/***********************/
/* BELOW 1300px (Landscape tablets) */
/***********************/

@media (max-width: 75em) {
    html {
        /* 9px/16px =  56.25%*/
        font-size: 56.25%;
    }

    .question_card-title {
        font-size: 3rem;    
        padding: 1rem 2.5rem;   
    }

    .form {
        width: fit-content;
        max-width: 75%;        
        gap: 2.5rem;
        font-size: 2.5rem;       
    }

    .btn,
    .btn:link, 
    .btn:visited {
        display: inline-block;
        text-decoration: none;
        border-radius: 3px;
        font-family: Eater;
        padding: 1.5rem 2rem;
        border: none;
        cursor: pointer;
        font-size: 2rem;
    }

    .btn-close {
        position: absolute;
        right: 1rem;
        top: 1rem;
        padding: .5rem 1rem;
        font-size: 1.5rem;
    }

    .add-margin-top-big {
        margin-top: 6rem;
    }

    .add-margin-top-small {
        margin-top: 3rem;
    }


}

/***********************/
/* BELOW 944px (Tablets) */
/***********************/

@media (max-width: 61em) {
    html {
        /* 8px/16px = 50% */
        font-size: 50%;
    }

    .question_card-title {
        font-size: 3rem;    
        padding: 2rem 6rem;   
    }

    .add-margin-top-big {
        margin-top: 8rem;
    }


}

/***********************/
/* BELOW 820px (Smaller Tablets) */
/***********************/

@media (max-width: 51em) {
    .question_card-title {
        font-size: 3rem;    
        padding: 2rem 1.5rem;   
    }

    .form {
        width: fit-content;
        max-width: 90%;        
        gap: 2.5rem;
        font-size: 2rem;       
    }

    .add-margin-top-big {
        margin-top: 7rem;
    }

    .add-margin-top-small {
        margin-top: 1.5rem;
    }
}

/***********************/
/* BELOW 600px (Smaller Tablets) */
/***********************/

@media (max-width: 37.5em) {
    
    .results {    
        width: 80%;        
        margin: 2rem auto;  
        padding: 2rem;    
    
    }

    .results_text {
       
        font-size: 2.5rem;
        
    }
    .question_card-title {
        font-size: 3rem;    
        padding: 2rem 2rem;   
    }

    .form {
        width: fit-content;
        max-width: 90%;        
        gap: 2.5rem;
        font-size: 2.5rem;       
    }

    .link,
    .link-a {       
        font-size: 2.5rem;
        font-weight: 700; 
    }

     .form-button {
        height: 1.5rem;
        width: 1.5rem;
        border: 3px solid black;      
    }

    .form-button::after {       
        height: .4rem;
        width: .4rem;   
    }   

    .add-margin-top-big {
        margin-top: 5rem;
    }

    .add-margin-top-small {
        margin-top: 3rem;
    }

    
        
}

    


/***********************/
/* BELOW 400px (Smaller Tablets) */
/***********************/

@media (max-width: 25em) {    

    .question_card-title {
        font-size: 2.6rem;    
        padding: 2.5rem 0;   
    }

    .form {
        width: fit-content;
        max-width: 90%;        
        gap: 2rem;
        font-size: 2rem;       
    }

    .link,
    .link-a {       
        font-size: 2rem;
        font-weight: 700; 
    }

    .modal {
        max-width: 50rem;
        padding: 3rem 5rem;
        font-size: 2rem;      

    }


}