:root {
    --header-title-font-size: 2rem;
    --header-nav-font-size: 1.5rem;
    --header-margin-left: 10vw;
}

/* Header */
#header {
    top: 0;
    width: 80vw;
    margin-left: var(--header-margin-left);
    position: absolute;

    display: flex;
    justify-content: space-between;
}

#header-title {
    font-size: var(--header-title-font-size);
    cursor: pointer;
    transition: text-shadow 0.2s ease-in-out;
}

#header-title:hover {
    text-shadow: #96C5F7 3px 3px;
}

.header-nav {
    display: flex;
    gap: 1vw;
    align-items: center;
    cursor: pointer;
}

#header-nav-logo {
    display: flex;
    gap: 1vw;
    align-items: center;
}

.header-nav>h2 {
    margin: 0;
    font-size: var(--header-nav-font-size);
}

#header-logo {
    width: 3.5vw;
    aspect-ratio: 1/1;
    transition: transform 1.5s cubic-bezier(.17,.67,.83,.67);
}

/*#header-logo:hover {
    transform: rotate3d(0, 1, 0, calc(360deg * 3.5));
}*/

@media (max-width:961px) { 
    #header-title {
        display: none;
    }

    #header-logo {
        position: absolute;
        top: 4.5vh;
        width: 12vw;
        aspect-ratio: 1/1;
    }

    #header-nav-menu-text {
        display: none;
    }
}

@media (min-width:961px) and (max-width: 1025px)  {
    #header-title {
        display: none;
    }

    #header-logo {
        position: absolute;
        top: 4.5vh;
        width: 8vw;
        aspect-ratio: 1/1;
    }

    #header-nav-menu-text {
        display: none;
    }
}