arimelody.me/public/style/header.css

header {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        border-bottom: 1px solid #888;
        background-color: #080808;
        z-index: 1;
}

nav {
        width: min(calc(100% - 4rem), 720px);
        height: 3em;
        margin: auto;
        padding: 0 1em;
        display: flex;
        flex-direction: row;
        gap: .8em;
        align-items: center;
}

#header-home {
        flex-grow: 1;
        display: flex;
        gap: .5em;
        cursor: pointer;
}

img#header-icon {
        width: 2em;
        height: 2em;
        margin: .5em;
        display: block;
}

#header-text {
        width: 11em;
        display: flex;
        flex-direction: column;
        justify-content: center;
        flex-grow: 1;
}

#header-text h1 {
        margin: 0;
        font-size: 1em;
}

#header-text h2 {
        height: 1.2em;
        line-height: 1.2em;
        margin: 0;
        font-size: .7em;
        color: #bbb;
}

#header-links-toggle {
        width: 3em;
        height: 3em;
        display: none;
        justify-content: center;
        align-items: center;
        transition: background-color .2s;
}

#header-links-toggle:hover {
        background-color: #fff2;
}

header ul#header-links {
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: row;
        gap: .5em;
        align-items: center;
}

header ul li {
        list-style: none;
}

header ul li a,
header ul li span {
        padding: .4em .5em;
        border: 1px solid var(--links);
        color: var(--links);
        border-radius: 2px;
        background-color: transparent;
        transition-property: color, border-color, background-color;
        transition-duration: .2s;
        animation-delay: 0s;
        animation: list-item-fadein .2s forwards;
        opacity: 0;
        text-decoration: none;
}

header ul li span {
        color: #aaa;
        border-color: #aaa;
        cursor: default;
        text-decoration: none;
}

header ul li a:hover {
        color: #eee;
        border-color: #eee;
        background-color: var(--links) !important;
        text-decoration: none;
}


#toggle-crt a {
        color: var(--primary);
        border-color: var(--primary);
        opacity: 1;
}

#toggle-crt a:hover {
        color: #111;
        background-color: var(--primary) !important;
}

#toggle-crt.disabled a {
        opacity: .5 !important;
}

@media screen and (max-width: 780px) {
        header {
                font-size: 14px;
        }

        nav {
                width: calc(100vw - 2rem);
                margin: 0;
        }

        div#header-text {
                flex-grow: 1;
        }

        a#header-links-toggle {
                display: flex;
        }

        header ul#header-links {
                position: fixed;
                left: 0;
                top: 2.7rem;
                width: calc(100vw - 2rem);
                padding: 1rem;
                flex-direction: column;
                gap: 1rem;
                border-bottom: 1px solid #888;
                background: #080808;
                display: none;
        }

        header ul#header-links.open {
                display: flex;
        }

        ul#header-links li {
                width: 100%;
        }	

        ul#header-links li a,
        ul#header-links li span {
                margin: 0;
                display: block;
                font-size: 1em;
                text-align: center;
        }
}

@keyframes list-item-fadein {
        from {
                opacity: 1;
                background: #fff8;
        }

        to {
                opacity: 1;
                background: transparent;
        }
}