@media (max-width:600px) {
    header nav {
        padding: 10px clamp(3%, 5vw, 100px);
    }

    header nav.sticky {
        padding: 0px clamp(3%, 5vw, 100px);
    }

    nav ul {
        display: none;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        /* justify-content: center; */
        gap: 1.5rem !important;
        position: absolute;
        min-height: fit-content;
        top: 65px;
        right: 0;
        left: 0;
        width: 100%;
        padding: 1rem clamp(3%, 5vw, 100px);
        border-top: 1px dotted var(--white1);
        border-bottom: 1px dotted var(--white1);
        background-color: color-mix(in srgb, var(--black1) 50%, transparent);
        backdrop-filter: blur(10px);
        transition: all 0.3s;
    }

    nav.sticky ul {
        border-top: 1px dotted transparent;
    }

    nav ul li a {
        margin: 0;
    }

    nav.sticky ul {
        top: 48px;
    }

    nav ul.active {
        display: flex;
    }

    nav ul li a {
        color: var(--white1);
    }

    nav.sticky ul li a {
        color: var(--white1);
    }

    nav.sticky ul li a:active {
        color: var(--white2);
    }

    .navbar-toggle {
        display: block;
        z-index: 999;
    }

    .navbar-toggle.active .bar:nth-child(2) {
        opacity: 0;
    }

    .navbar-toggle.active .bar:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }

    .navbar-toggle.active .bar:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }

    @keyframes abBlink {
        0% {
            color: var(--white1);
            opacity: 1;
            text-shadow: 0 0 9px var(--white1);
        }

        70% {
            color: var(--white1);
            opacity: 1;
            text-shadow: 0 0 9px var(--white1);
        }

        100% {
            color: var(--white1);
            opacity: 0.5;
            text-shadow: 0 0 3px var(--white1);
        }
    }

    .hero h1 {
        font-size: 34px;
    }

    .site {
        padding: 30px 18px;
    }

    .row {
        flex-direction: column;
    }

    footer {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
}

@media (max-width:400px) {
    nav ul {
        flex-direction: column;
        align-items: center;
        flex-wrap: nowrap;
        top: 65px;
    }
}