@media (max-width: 910px) {
    /* compact nav */
    header :is(h1, a) {
        line-height: 1em;
        max-width: min-content;
    }
    header h1 {
        font-size: 1.8rem;
    }
    header a {
        display: block;
    }
}

@media (max-width: 780px) {
    /* transition speed */
    .black-fill,
    .AspIT,
    nav {
        transition: .5s;
    }

    /* Nav Hamburger Menu */
    nav {
        position: inherit;
        top: var(--header);
        right: -100%;
        z-index: -1;

        opacity: 0%;
        box-shadow: black 0 0 20px;
        background-color: rgba(0, 0, 0, 0.5);
    }

    nav ul {
        flex-direction: column;
        /* dvh takes account for mobile browser's searchbar in the top, and dynamically adjusts on whether it's pulled up or down; Dynamic ViewPort */
        height: calc(100dvh - var(--header));
    }
    nav li {
        height: max-content;
        overflow: visible;
        
        margin-right: 0;
        width: 100vw;
        background-color: rgba(0, 0, 0, 1);
        border: rgba(255, 255, 255, 0.2) 1px solid;
    }

    nav a {
        margin-top: 0;
    }

    .AspIT {
        border-radius: 50%;
        box-shadow: white 0 0 10px 2px ;
    }
    /* Changes upon check */
    #nav:checked + nav {
        right: 0%;
        opacity: 100%;
    }header:has(#nav:checked) .black-fill {
        fill: white;
    }header:has(#nav:checked) .AspIT {
        background-color: black;
        box-shadow: black 0 0 10px 2px ;
    }
    
}