/*    HOVER ANIMATION    */

#content header nav a span:after,
#content header nav a:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    width: 50%;
    transition: .85s;
}

#content header nav a:after {
    background-color: var(--background-color);
}

#content header nav a span:after {
    background: linear-gradient(to right, #00b3ff, #0197ce, #00b3ff);
    height: 3px;
}

#content header nav a:hover {
    scale: 1.1;
}

#content header nav a:hover:after {
    width: 0;
}

#content header nav a span:hover:after {
    width: 100%;
}

/*    HOVER ANIMATION END    */

@media screen and (max-width: 900px) {
    #content header {
        width: 100%;
        left: 50%;
    }

    #content header nav {
        width: 100%;
        padding: 15px;
        display: flex;
        flex-direction: column;
    }

    #content header nav a {
        display: none;
        margin: 10px auto;
    }

    #content header nav a.show {
        display: inline-block;
    }

    #content header nav .menu {
        visibility: visible;
        position: relative;
        margin: 0 10px 30px;
        /*padding: 0 100% 30px 0;*/
        max-height: 75px;
    }

    #content header nav .menu img {
        opacity: 0;
        position: absolute;
        align-self: center;
        transform: rotate(90deg);
    }

    #content header nav .menu img.show {
        transition: opacity .1s, transform .4s;
        opacity: 1;
        transform: rotate(0);
    }

    #content header .header-settings {
        position: absolute;
        top: 0;
        right: 15px;
    }
}