/* Extra small devices (xs) — Below 576px */
@media (max-width: 575.98px) {
/* Styles for screens smaller than 576px */
    /* ---- Geral ---- */
    html{height: 100%; width: 100%; }
    body{
        background-color: #FEFCF0;

        display: flex;
        flex-direction: column;
        text-align: justify;
        justify-content: center; 
        align-items: center;
        
        box-sizing: border-box;
        max-width: 100vw;

        line-height: 1.6;
        font-family: Arial, sans-serif;
        font-size: 14px; /* Larger font for very small screens */
        overflow-x: hidden
    }

    .container{
        margin: 0 auto;
        width: 100%;
        max-width: 100%;
        text-align: justify;
    }
    
    
    .container h2 , .container h1{
        text-align: center;
    }
}

/* Small devices (sm) — 576px to 767.98px */
@media (min-width: 576px) and (max-width: 767.98px) {
/* Styles for screens smaller than 576px */
    /* ---- Geral ---- */
    html{height: 100%; width: 100%; }
    body{
        background-color: #FEFCF0;

        display: flex;
        flex-direction: column;
        text-align: justify;
        justify-content: center; 
        align-items: center;
        
        box-sizing: border-box;
        max-width: 100vw;

        line-height: 1.6;
        font-family: Arial, sans-serif;
        font-size: 15px; /* Larger font for very small screens */
        overflow-x: hidden
    }

    .container{
        margin: 0 auto;
        width: 100%;
        max-width: 100%;
        text-align: justify;
    }
    
    
    .container h2 , .container h1{
        text-align: center;
    }
}

/* Medium devices (md) — 768px to 991.98px */
@media (min-width: 768px) and (max-width: 991.98px) {
/* Styles for screens smaller than 576px */
    /* ---- Geral ---- */
    html{height: 100%; width: 100%; }
    body{
        background-color: #FEFCF0;

        display: flex;
        flex-direction: column;
        text-align: justify;
        justify-content: center; 
        align-items: center;
        
        box-sizing: border-box;
        max-width: 100vw;

        line-height: 1.6;
        font-family: Arial, sans-serif;
        font-size: 16px; /* Larger font for very small screens */
        overflow-x: hidden
    }

    .container{
        margin: 0 auto;
        width: 100%;
        max-width: 100%;
        text-align: justify;
    }
    
    
    .container h2 , .container h1{
        text-align: center;
    }
}

/* Large devices (lg) — 992px to 1199.98px */
@media (min-width: 992px) and (max-width: 1199.98px) {
/* Styles for screens smaller than 576px */
    /* ---- Geral ---- */
    html{height: 100%; width: 100%; }
    body{
        background-color: #FEFCF0;

        display: flex;
        flex-direction: column;
        text-align: justify;
        justify-content: center; 
        align-items: center;
        
        box-sizing: border-box;
        max-width: 100vw;

        line-height: 1.6;
        font-family: Arial, sans-serif;
        font-size: 17px; /* Larger font for very small screens */
        overflow-x: hidden
    }

    .container{
        margin: 0 auto;
        width: 100%;
        max-width: 100%;
        text-align: justify;
    }
    
    
    .container h2 , .container h1{
        text-align: center;
    }
}

/* Extra large devices (xl) — 1200px to 1399.98px */
@media (min-width: 1200px) and (max-width: 1399.98px) {
/* Styles for screens smaller than 576px */
    /* ---- Geral ---- */
    html{height: 100%; width: 100%; }
    body{
        background-color: #FEFCF0;

        display: flex;
        flex-direction: column;
        text-align: justify;
        justify-content: center; 
        align-items: center;
        
        box-sizing: border-box;
        max-width: 100vw;

        line-height: 1.6;
        font-family: Arial, sans-serif;
        font-size: 18px; /* Larger font for very small screens */
        overflow-x: hidden
    }

    .container{
        margin: 0 auto;
        width: 100%;
        max-width: 100%;
        text-align: justify;
    }
    
    
    .container h2 , .container h1{
        text-align: center;
    }
}

/* Extra extra large devices (xxl) — 1400px and above */
@media (min-width: 1400px) {
/* Styles for screens smaller than 576px */
    /* ---- Geral ---- */
    html{height: 100%; width: 100%; }
    body{
        background-color: #FEFCF0;

        display: flex;
        flex-direction: column;
        text-align: justify;
        justify-content: center; 
        align-items: center;
        
        box-sizing: border-box;
        max-width: 100vw;

        line-height: 1.6;
        font-family: Arial, sans-serif;
        font-size: 19px; /* Larger font for very small screens */
        overflow-x: hidden
    }

    .container{
        margin: 0 auto;
        width: 100%;
        max-width: 100%;
        text-align: justify;
    }
    
    
    .container h2 , .container h1{
        text-align: center;
    }
}