body {
    background-color: beige;
}

.bg-box {
    background-color: rgb(179, 180, 180);
}

.bg-title,
header,
footer {
    background-color: rgb(208, 212, 212);
}

a.active {
    color: #212529 !important;
    border-bottom: 1px solid;
    font-weight: bold;
    transition: all 0.3s !important;
    -webkit-transition: all 0.3s !important;
    -moz-transition: all 0.3s !important;
    -ms-transition: all 0.3s !important;
    -o-transition: all 0.3s !important;
}

a {
    color: #6c757d !important;
    border: 0;
}

a:hover {
    color: #2e2f30 !important;
}

* {
    transition: 0.5s;
}

/* * page loading */
.ping-container {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.ping {
    background: #fff;
    border-radius: 50%;
    border: 50px solid #222;
    width: 20px;
    height: 20px;
    animation: load 1.5s ease-out infinite;
}

@keyframes load {
    0% {
        background: #3cc4ee;
        border: 0px solid #3cc4ee;
    }
    50% {
        background: #3cc4ee;
        border: 100px solid #fff;
    }
    100% {
        background: #3cc4ee;
        border: 0px solid #fff;
    }
}

/* * github corners */
.github-corner:hover .octo-arm {
    animation: octocat-wave 560ms ease-in-out;
}

.github-corner > svg {
    z-index: 99999;
    fill: #151513;
    color: #fff;
    position: fixed;
    top: 0;
    border: 0;
    right: 0;
}

@keyframes octocat-wave {
    0%,
    100% {
        transform: rotate(0);
    }
    20%,
    60% {
        transform: rotate(-25deg);
    }
    40%,
    80% {
        transform: rotate(10deg);
    }
}

@media (max-width: 500px) {
    .github-corner:hover .octo-arm {
        animation: none;
    }

    .github-corner .octo-arm {
        animation: octocat-wave 560ms ease-in-out;
    }
}

/* -------------------------- */