/* Extra small devices (xs) — Below 576px */
@media (max-width: 575.98px) {

    /* ---- Geral ---- */
    html{height: 100%; width: 100%; }

    body {
      font-size: 14px; /* Smallest size for mobile phones */
      font-family: Arial, sans-serif;

      display: flex;
      flex-direction: column;
      box-sizing: border-box;
      background-color: #FEFCF0;

      align-items: center;
      justify-content: center;
      text-align: justify;
      line-height: 1.6;

    }

    .container{
        margin: 0 auto;
        max-width: 800px;
        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) {
    /* ---- Geral ---- */
    html{height: 100%; width: 100%; }

    body {
        font-size: 15px; /* Slightly larger for small tablets */
        font-family: Arial, sans-serif;

        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        background-color: #FEFCF0;

        align-items: center;
        justify-content: center;
        text-align: justify;
        line-height: 1.6;
    }

    .container{
        margin: 0 auto;
        max-width: 800px;
        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) {
    /* ---- Geral ---- */
    html{height: 100%; width: 100%; }
    body {
        font-size: 16px; /* Standard size for tablets */
        font-family: Arial, sans-serif;

        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        background-color: #FEFCF0;
  
        align-items: center;
        justify-content: center;
        text-align: justify;
        line-height: 1.6;
    }

    .container{
        margin: 0 auto;
        max-width: 800px;
        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) {
    /* ---- Geral ---- */
    html{height: 100%; width: 100%; }
    body {
        font-size: 17px; /* Larger for small desktop screens */
        font-family: Arial, sans-serif;

        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        background-color: #FEFCF0;
  
        align-items: center;
        justify-content: center;
        text-align: justify;
        line-height: 1.6;
    }

    .container{
        margin: 0 auto;
        max-width: 800px;
        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) {
    /* ---- Geral ---- */
    html{height: 100%; width: 100%; }
    body {
        font-size: 18px; /* Comfortable size for large desktops */
        font-family: Arial, sans-serif;

        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        background-color: #FEFCF0;
  
        align-items: center;
        justify-content: center;
        text-align: justify;
        line-height: 1.6;
    }

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

/* Extra extra large devices (xxl) — 1400px and above */
@media (min-width: 1400px) {
    /* ---- Geral ---- */
    html{height: 100%; width: 100%; }
    body {
        font-size: 19px; /* Largest size for extra-large screens */
        font-family: Arial, sans-serif;

        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        background-color: #FEFCF0;
  
        align-items: center;
        justify-content: center;
        text-align: justify;
        line-height: 1.6;
    }

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