.content-project{
    width: 100%;
    height: 100%;
    display: flex;
    position: relative;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 128px;
}

.wrapper-scroll{
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    --scrollbar-color-thumb: red;
    --scrollbar-color-track: black;
    --scrollbar-width: thin;
    --scrollbar-width-legacy: 10px;
}

.container-project{
    width: 100%;
    display: flex;
    position: relative;
    flex-direction: column;
    justify-content: start;
    align-items: center;
    text-align: center;
    box-sizing: border-box;
    padding-left: 15%;
    padding-right: 15%;
    padding-top: 64px;
    padding-bottom: 64px;
    gap: 64px;
}

p, h3, h4, strong, li{
    color: white;
    font-family: "Times New Roman", Times, serif;
    text-shadow: 2px 2px 4px #000000;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a:link{
    color: red;
    font-family: "Times New Roman", Times, serif;
    text-shadow: 2px 2px 4px #000000;
    font-size: 18px;
    font-weight: bold;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a:visited{
    color: red;
}

.container-project img{
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
    max-width: 100%;
    height: auto;
    display: block;
    margin: 20px auto;
}

.character-portrait{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
}

.character-portrait img{
    box-sizing: border-box;
    height: auto; 
    display: block; 
    max-width: 40%;
}

.character-description{
    width: 50%;
    display: flex;
    position: relative;
    flex-direction: column;
    justify-content: start;
    align-items: start;
    text-align: left;
    word-wrap: break-word;
}

.text-container{
    width: 100%;
    word-wrap: break-word;
}

.img-container{
    width: 100%;
    max-width: 100%;
    max-width: 50%;
    height: auto;
    object-fit: contain;
}

.img-container img {
    width: 100%; 
    height: auto; 
    display: block; 
    max-width: 100%;
}

/* Estilo para o contêiner flexível centralizar o vídeo */
.flex-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 80vh;
    padding: 20px;
    box-sizing: border-box;
}

/* Estilo para o contêiner do vídeo para criar a proporção */
.video-container {
    position: relative;
    width: 80%; /* Define uma largura máxima relativa à largura da tela */
    max-width: 1200px; /* Largura máxima do vídeo */
    padding-bottom: 45%; /* Proporção 16:9 */
    height: 0;
}


/* Estilo para o <iframe> para preencher o contêiner */
.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

p, li{
    font-size: 22px;
}

h3{
    font-size: 38px;
}

h4{
    font-size: 30px;
}

strong{
    font-size: 30px;
}

@supports (scrollbar-width: auto) {
    .wrapper-scroll {
        scrollbar-color: var(--scrollbar-color-thumb) var(--scrollbar-color-track);
        scrollbar-width: var(--scrollbar-width);
    }
}

@supports selector(::-webkit-scrollbar) {
    .wrapper-scroll::-webkit-scrollbar-thumb {
        background: var(--scrollbar-color-thumb);
    }
    .wrapper-scroll::-webkit-scrollbar-track {
        background: var(--scrollbar-color-track);
    }
    .wrapper-scroll::-webkit-scrollbar {
        max-width: var(--scrollbar-width-legacy);
        max-height: var(--scrollbar-width-legacy);
    }
}

@media (max-width: 1000px){
    .container-project{
        padding-left: 16px;
        padding-right: 16px;
        padding-top: 64px;
        padding-bottom: 64px;
    }

    .character-portrait{
        align-items: start;
    }

    .character-description{
        width: 75%;
        padding-left: 16px;
        padding-right: 16px;
    }

    .character-description p, .character-description li{
        font-size: 20px;
    }

}

.container-project a {
    color: #00aaff;
    text-decoration: none;
    transition: color 0.3s;
}

.container-project a:hover {
    color: #ffffff;
    text-decoration: underline;
}

@media (max-width: 900px) {
    .container-project {
        display: flex;
        flex-direction: column; /* ESSENCIAL: Muda o layout para coluna */
        padding: 15px; /* Adiciona um respiro nas laterais */
        font-size: 1rem; /* Leve ajuste na fonte para telas menores */
    }
    
    /* Garante que o container de rolagem ocupe o espaço corretamente
      e não corte o conteúdo.
    */
    .wrapper-scroll {
        width: 100%;
        height: 100%;
        overflow-y: auto; /* Permite rolar o conteúdo na vertical */
        box-sizing: border-box; /* Evita que o padding cause overflow */

        /* Estilização da barra de rolagem (opcional, mas elegante) */
        scrollbar-width: thin;
        scrollbar-color: red black;
    }
    
    .wrapper-scroll::-webkit-scrollbar {
        width: 8px;
    }

    .wrapper-scroll::-webkit-scrollbar-track {
        background: black;
    }

    .wrapper-scroll::-webkit-scrollbar-thumb {
        background-color: red;
    }
}