@media (max-width:500px)  { 
    /* smartphones, iPhone, portrait 480x320 phones */ 

    h1 {
        font-size: 2.5rem;
    }

    h2 {
        line-height: 1.8rem;
    }

    header {
        justify-content: center;
        padding: 1rem;
    }

    .logo {
        width: 150px;
    }

    .centerText {
        max-width: 100%;
    }

    .movie-element {
        width: 100%;
        height: auto;
        aspect-ratio: 16/9;
        background-color: lightgray;
    }

    .signup {
        width: 95%;
        margin-top: 1rem;
    }

    .signup-form {
        display: flex;
        flex-direction: column;

    }

    .input-container {
        margin-right: 0;
        width: 100%;
    }
    
    .submit-button {
        width: 100%;
        margin-top: 1rem;
    }

    .signup-overview {
        display: none;
    }

    .meet-teacher {
        width: 100%;
        flex-direction: column;
    }

    .circle {
        margin-right: 0;
    }

    .text {
        justify-content: center;
        align-items: center;
        text-align: center;
    }

    .faq-block {
        width: 100%;
    }

    .more-info {
        display: none;
    }

    .bottom-sign-up {
        width: 100%;
        flex-direction: column;
    }
}
 @media (min-width: 641px) and (max-width:961px)  {
    /* tablet portrait */
     .centerText {
        max-width: 80%;
    }

    .movie-element {
        width: 100%;
    }

    .signup {
        width: 90%;
    }

    .signup-form {
        align-items: flex-start;
        flex-direction: column;
    }

    .input-container {
        width: 100%;
    }

    .submit-button {
        margin-top: 2rem;
    }

    .signup-overview {
        display: none;
    }

    .meet-teacher {
        width: 90%;
        flex-direction: column;
    }

    .circle {
        width: 15rem;
        height: 15rem;
        border-radius: 15rem;
        margin-right: 0;
        margin-bottom: 1rem;
    }

    .content-grid {
        max-width: 100%;
    }

    .more-info {
        width: 100%;
        flex-direction: column;
    }
}