/* Mobile-only styles */
@media (max-width: 767px) {
    header {
        display: flex;
        justify-content: flex-end;
        width: 100%;
        height: 10vh;
        position: fixed;
        top: 0;
        background: #4f6df5;
        z-index: 5;
        box-shadow: 0px 0px 1px 1px black;
    }

    #headerBackground {
        position: fixed;
        display: flex;
        width: 100%;
        height: 60vh;
        background: #4f6df5;
        position: fixed;
        top: -100%;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        transition: 0.2s ease;
        box-shadow: 0px 0px 1px 1px black;
    }

    #headerBackground.active {
        top: 0;
    }

    .navButtons {
        flex-direction: column;
        font-size: 3rem;
        align-items: center;
    }

    #hamborgor {
        height: 100%;
        width: 40px;
        margin-left: auto;
        position: relative;
        z-index: 1000;
        right: 5%;
    }

    #hamborgor span {
        height: 5px;
        width: 100%;
        background-color: #d6dec3;
        border-radius: 25px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        transition: 0.3s ease;
    }

    #hamborgor span:nth-child(1) {
        top: 35%;
    }

    #hamborgor span:nth-child(3) {
        top: 65%;
    }

    #hamborgor.active span:nth-child(1) {
        top: 50%;
        transform: translate(-50%, -50%) rotate(45deg);
    }

    #hamborgor.active span:nth-child(2) {
        opacity: 0;
    }

    #hamborgor.active span:nth-child(3) {
        top: 50%;
        transform: translate(-50%, -50%) rotate(-45deg);
    }

    .navButtons {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: auto;
        font-size: 3rem;
    }
}
@media (min-width: 768px) {
    header {
        width: 100%;
        top: 0;
        position: fixed;
    }

    #headerBackground {
        width: 95%;
        margin: auto;
        margin-top: 2em;
        background-color: #4f6df5;
        height: 5rem;
        border-radius: 20px;
        transition: 0.3s;
        top: 0;
        overflow-x: hidden;
        color: white;
        box-shadow: 0px 0px 1px 1px white;
    }

    #headerBackground.scrolled {
        margin-top: 0;
        width: 100%;
        transition: 0.3s;
        box-shadow: 0px 0px 1px 1px black;

    }

    #headerBackground.wait {
        border-radius: 0px;
        transition: 0.3s;
    }

    #homeButton {
        font-size: 2.5rem;
    }

    .github-button {
        margin: 0;
    }

    .navButtons {
        height: 100%;
        width: 90%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 0 auto;
        font-size: 1.5em;
        gap: 1.5em;
        flex-direction: row;
    }

    .navButtons a:nth-child(2) {
        margin-left: auto;
    }

    nav a {
        text-decoration: none;
        transition: 0.15s;
    }

    a:hover {
        cursor: pointer;
        transform: scale(1.1);
        text-decoration: underline 1px;
    }
}