@supports (height: 100dvh) {
  body { min-height: 100dvh; }
}

@font-face {
    font-family: "Outfit";
    src: url("../../fonts/outfit/OutfitRegular.ttf") format("truetype");
    font-weight: normal;
}

@font-face {
    font-family: "Outfit";
    src: url("../../fonts/outfit/Outfit.ttf") format("truetype");
    font-weight: bold;
}

@font-face {
    font-family: "OutfitMedium";
    src: url("../../fonts/outfit/OutfitMedium.ttf") format("truetype");
}
    .pagination {
      position: fixed;
      left: 0;
      right: 0;
     bottom: 10px;    
      display: flex;
      justify-content: center;
      z-index: 50;   
    }


body {
    background-image: url('../../assets/images/bgg.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    font-family: "Outfit", sans-serif;
    margin: 0;
    padding: 0;
    min-height: 100svh;  
    display: flex;
    flex-direction: column;
}

html, body { height: 100%; }

.container-fluid {
    display: flex;
    flex-direction: column;
    height: 100vh; 
    padding: 10px;
}

.content {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    /* padding: 10px; */
    padding-bottom: calc(80px + 20px);
}

.rodape {
    color: #0e5dac;
    text-align: center;
    padding: 8px;
}

.rodape p {
    margin: 3px 0;
    font-size: 0.9rem;
    font-weight: bold;
}

.subtitle {
    color: #0e5dac;
    font-size: 1rem;
    font-weight: bold;
    font-family: "Outfit", sans-serif;
    margin: 5px 0;
}

.subtitleGray {
    color: #69c0e4;
    font-size: 1rem;
    font-weight: bold;
    font-family: "Outfit", sans-serif;
    margin: 5px 0;
}

.titleGray {
    color: #69c0e4;
    font-size: 2.4rem;
    font-weight: bold;
    font-family: "Outfit", sans-serif;
    margin: 10px 0;
}

.autoras-text-style {
    list-style-type: none;
    font-size: 1.7rem;
    color: #19598d;
    padding-left: 0;
    display: flex;
    margin-left: 5vw;
    justify-content: center;
    margin-right: 10px;
}

.description {
    color: #0e5dac;
    font-size: 0.9rem;
    font-weight: bold;
    font-family: "Outfit", sans-serif;
    margin: 5px 0;
}

.author-list {
    list-style-type: none;
    padding: 0;
    /* margin: 5px 0; */
    text-align: center;
    justify-self: center;
}

.author-list li {
    margin: 5px 0;
}

.alignCenter {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
}

@media (max-width: 1024px) {

    .titleGray {
        font-size: 2.4rem;
    }

     .autoras-text-style {
        font-size: 1.6rem;
    }

    .subtitle, .subtitleGray {
        font-size: 1.7rem;
    }

    .rodape p {
        font-size: 1.7rem;
    }

    .description {
        font-size: 1.6rem;
    }

    .content {
        padding: 5px;
    }

    .container-fluid {
        padding: 5px;
    }
}

@media (max-width: 768px) {

    .titleGray {
        font-size: 1.7rem;
    }

    .autoras-text-style {
        font-size: 1.3rem;
    }

    .subtitle, .subtitleGray {
        font-size: 1.2rem;
    }

    .rodape p {
        font-size: 1.2rem;
    }

    .description {
        font-size: 1.1rem;
    }

    .content {
        padding: 5px;
    }

    .container-fluid {
        padding: 5px;
    }

 
}

@media (max-width: 576px) {

    .titleGray {
        font-size: 1.5rem;
    }

    .autoras-text-style {
        font-size: 1.0rem;
    }

    .subtitle, .subtitleGray {
        font-size: 1.1rem;
    }

    .rodape p {
        font-size: 1.1rem;
    }

    .description {
        font-size: 1rem;
    }

    .content {
        padding: 5px;
        
    }

    .container-fluid {
        padding: 5px;
    }

   
}

@media (max-width: 376px) {
    .titleGray {
        font-size: 1.3rem;
    }

    .subtitle, .subtitleGray {
        font-size: 1rem;
    }

    .description {
        font-size: 0.9rem;
    }

    .rodape p {
        font-size: 1rem;
    }

    .content {
        padding: 5px;
    }

    .container-fluid {
        padding: 5px;
    }




}

@media (max-height: 800px) {
    .content {
        justify-content: start;
        padding-bottom: calc(80px + 20px);
    }

}