@media (max-width: 1000px) {
    header .h2 .search {
        display: none;
    }
}

@media (max-width: 770px) {
    header {
        width: 100%;
        padding: 1.2em 2%;
        display: flex;
        flex-direction: column;
    }

    header .h1 {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: fit-content;
    }

    header .h1 .logo {
        margin: 0px;
        width: 100%;
    }

    header .h1 .logo .logo-img {
        height: 25px;
        width: 100%;
        display: block;
        padding: 10px auto;
    }

    header .h1 nav {
        width: 100%;
        height: fit-content;
        justify-content: space-around;
        flex-wrap: wrap;
        margin: 5px 8px;
    }

    header .h1 nav a {
        padding: 4px 5px;
        margin: 5px;
    }

    header .h2 {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    header .h2 .sign-in-out {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    header .h2 .sign-in-out a:first-of-type {
        border: 1px solid var(--text-light);
    }

    header .h2 .sign-in-out a:first-of-type:hover {
        color: var(--text-light-hover);
        border: 1px solid var(--text-light-hover);
    }
}

@media (max-width: 580px) {
    section .container {
        margin: 10vh auto 20vh auto;
        width: 60%;
    }

    .container a {
        text-decoration: none;
        cursor: default;
    }

    .container a h1 {
        font-size: 2.5rem;
    }
}

@media (max-width: 580px) {
    .container a h1 {
        font-size: 2rem;
    }

    .container .email-form form {
        height: 50px;
        /* width: 100%; */
        margin: 0px 8px 15px 8px;
    }

    .container .email-form input {
        padding: 0px 8px;
        width: 130px;
    }

    .container .email-form button {
        width: 110px;
        padding: 0px 8px;
    }

    .container .email-form a {
        padding: 15px 8px;
    }
}