/* header & navbar */
header {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 99;
    width: 100%;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: flex-end;

    .container {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0 20px;
    }

    .nav-menu {
        display: flex;
        justify-content: center;
        gap: 20px;

        li {
            color: var(--color-dark-600);
            padding: 5px;
            display: inline-block;
            cursor: pointer;

            &.active {
                color: var(--color-primary);
            }
        }

        &:not(.mobile-visible) li {
            transition: 100ms ease-out 100ms;

            &:hover {
                color: var(--color-primary);
                transform: translateY(10%) scale(104%);
                transition: 100ms ease-in;
            }
        }
    }


    .menu-toggle {
        display: none;
    }
}

.site-header.fixed {
    position: fixed;
    align-items: center;
    background-color: var(--color-light-100);
    top: -60px;
    animation: slide-in 300ms ease-in forwards;
    filter: opacity(.8);
    transition: filter 0.2s ease-in-out;

    li {
        color: var(--color-dark-400);
    }

    &:hover {
        filter: opacity(1);
    }
}

@keyframes slide-in {
    100% {
        top: 0;
    }
}