.Tamanho 
{
    font-size: 60px;
    text-align: center;
    margin: 5%;
    color: #ffffff;
}

.Tamanho2
{
    font-size: 30px;
    text-align: center;
    margin: 5%;
    color: #ffffff;
}

.circle
{
    width: 200px;
    height: 200px;
    background-color: aliceblue;
    border-radius: 50%;
    margin: 5% auto;
}

.retrato
{
    width: 190px !important;
    height: 190px !important;
    background-color: aliceblue !important;
    border-radius: 50% !important;
    margin: 5% auto !important;
}

.letras
{
    font-size: 20px;
    text-align: center;
    margin: 10%;
    font-family: Arial, Helvetica, sans-serif;
    color: #ffffff;
}

.letras2
{
    font-size: 40px;
    color: #ffffff;
    margin-top: 20px;
    word-wrap: break-word; /* Quebra o texto longo automaticamente */
    text-align: center; /* Centraliza o texto */
}

.letras3
{
    position: absolute;
    bottom: 10px;  /* Ajusta a posição do texto para o fundo */
    width: 100%;
    color: white; /* Altere conforme a necessidade */
    font-size: 40px;
    position: relative;
    top: auto;
}

.letras4
{
    position: absolute;
    bottom: 0.5px;  /* Ajusta a posição do texto para o fundo */
    width: 100%;
    color: white; /* Altere conforme a necessidade */
    font-size: 40px;
    position: relative;
    top: auto;
}

.Scrollar
{
    display: flex; /* Flexbox para alinhamento */
    flex-wrap: nowrap; /* Impede quebra de linha */
    overflow-x: auto; /* Ativa a barra horizontal */
    overflow-y: hidden; /* Remove a barra vertical */
    gap: 40px; /* Espaço entre as divs */
    padding: 10px; /* Adiciona espaço interno */
    scroll-behavior: smooth; /* Rolagem suave */
}

.Caixa1
{
    background-color: #021C41;
    font-size: 10px;
    text-align: center;
    width: 310px; 
    height: 350px; 
    margin: 0;
    border-radius: 15%;
    flex-shrink: 0; /* Evita que sejam comprimidas */
}

.Caixa2 
{
    background-color: #514EA5;
    font-size: 10px;
    text-align: center;
    width: 250px;
    height: 191px;
    margin: 5% auto;
    border-radius: 15%;
}

.Caixa3
{
    background-color: #25282c;
    width: 550px;
    height: 700px;
    margin: 0% auto ;
    position: relative;

    display: flex; /* Ativa a  flexbox */
    justify-content: center; /* Centraliza horizontalmente*/
    align-items: center; /* Centraliza verticalmente */
    gap: 10px; /* Espaço entre as divs */
}

.Moldura
{
    background-color: #ffffff;
    width: 450px;
    height: 590px;
}

.Caixinha
{
    background-color: #25282c;
    width: 550px;
    height: 120px;
    margin: 0% auto 200px auto;
    position: relative;
}

.Caixinha > div
{
    display: flex; /* Ativa o flexbox */
    justify-content: center; /* Centraliza horizontalmente */
    align-items: center; /* Centraliza verticalmente */
    width: 100%;
    height: 100%;
}

.Button
{
    padding: 20px 30px;
    background-color: #ffffff00;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

/*Estilos para o PopUo */
.popup-overlay
{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.8);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

#popup:target
{
    display: flex;
}

.popup-content
{
    background-color: #25282c;
    padding: 30px;
    border-radius: 15px;
    text-align: center;
    width: 90%;
    max-width: 400px;
    box-shadow: 0px 4px 10px rgba(0,0,0,0.3);
}

.popup-close
{
    display: inline-block;
    margin-top: 20px;
    padding: 10px 20px;
    background-color: #ffffff;
    color: #25282c;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    cursor: pointer;
}


.popup-close:hover {
    background-color: #514EA5;
    color: white;
}

.Caixa1_Professora
{
    background-color: #021C41;
    font-size: 10px;
    text-align: center;
    width: 450px; 
    height: 460px; 
    margin: 0 auto;
    border-radius: 15%;
    position: relative;
}

.Caixa2_Professora
{
    background-color: #514EA5;
    font-size: 10px;
    text-align: center;
    width: 390px;
    height: 340px;
    margin: 5% auto;
    border-radius: 15%;
    margin-bottom: 80px; /* Dá espaço entre o retrato e o texto */
    text-align: center;
    position: relative;
    top: 30px;
}

.retrato2
{
    width: 300px !important;
    height:300px !important;
    background-color: aliceblue !important;
    border-radius: 50% !important;
    margin: 5% auto !important;
    position: relative;
    top: 20px;
}

.Painel
{
    background-color: #596575;
    font-size: 10px;
    text-align: center;
    width: 490px; 
    height: 350px; 
    margin: 10% auto;
    border-radius: 15%;
    position: relative;
    padding-top: 1px;
}

.Paineizinhos
{
    background-color: #25282c;
    font-size: 10px;
    text-align: center;
    width: 420px; 
    height: 70px; 
    margin: 6% auto;
    border-radius: 15%;
}

.inicio
{
    background-image: linear-gradient(to bottom, #241E40, 
    #01251F, #0D0D0D );
}

.desigualdade_degrade
{
    background-image: linear-gradient(to bottom, #241E40, 
    #4FBF97, #8C4F88);
}

.ancestralidade_degrade
{
    background-image: linear-gradient(to bottom, #68A58B, 
    #CEBD92, #DB7D7B);
}

.afrofuturismo_degrade
{
    background-image: linear-gradient(to bottom,  #881A1A, 
    #0D0D0D,  #01261F);
}

.popup
{
    display: flex;
    flex-direction: column; /* Organiza os elementos dentro do popup em coluna */
    align-items: center; /* Centraliza os itens horizontalmente */
    justify-content: center; /* Centraliza os itens verticalmente */
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 400px; /* Aumentei a largura para melhor acomodar o texto */
    max-width: 90%; /* Impede que o popup fique muito grande em telas menores */
    padding: 20px; /* Reduzi o padding para evitar que a caixa fique muito grande */
    background: #234266;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    z-index: 1000;
}

.popup-content
{
    text-align: center;
    line-height: 1.5;
    width: 80%; /* Faz com que o conteúdo ocupe toda a largura da div */
    height: auto;
    padding: 10px;
    color: white;
    background: #1F4E4E;
    font-size: 18px;
    overflow-y: auto; /* Adiciona rolagem caso o conteúdo ultrapasse o tamanho da div */
    margin-bottom: 20px;
}


.close-btn
{
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 20px;
    cursor: pointer;
    
}

.popup2
{
    display: flex;
    flex-direction: column; /* Organiza os elementos dentro do popup em coluna */
    align-items: center; /* Centraliza os itens horizontalmente */
    justify-content: center; /* Centraliza os itens verticalmente */
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 400px; /* Aumentei a largura para melhor acomodar o texto */
    max-width: 90%; /* Impede que o popup fique muito grande em telas menores */
    padding: 20px; /* Reduzi o padding para evitar que a caixa fique muito grande */
    background: #cfbd93;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    z-index: 1000;
}

.popup-content2
{
    text-align: center;
    line-height: 1.5;
    width: 80%; /* Faz com que o conteúdo ocupe toda a largura da div */
    height: auto;
    padding: 10px;
    color: white;
    background: #4A3B12;
    font-size: 18px;
    overflow-y: auto; /* Adiciona rolagem caso o conteúdo ultrapasse o tamanho da div */
    margin-bottom: 20px;
    border-radius: 10px;
}

.popup3
{
    display: flex;
    flex-direction: column; /* Organiza os elementos dentro do popup em coluna */
    align-items: center; /* Centraliza os itens horizontalmente */
    justify-content: center; /* Centraliza os itens verticalmente */
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 400px; /* Aumentei a largura para melhor acomodar o texto */
    max-width: 90%; /* Impede que o popup fique muito grande em telas menores */
    padding: 20px; /* Reduzi o padding para evitar que a caixa fique muito grande */
    background: #390f0f;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    z-index: 1000;
}

.popup-content3
{
    text-align: center;
    line-height: 1.5;
    width: 80%; /* Faz com que o conteúdo ocupe toda a largura da div */
    height: auto;
    padding: 10px;
    color: white;
    background: #A53B3B;
    font-size: 18px;
    overflow-y: auto; /* Adiciona rolagem caso o conteúdo ultrapasse o tamanho da div */
    margin-bottom: 20px;
    border-radius: 10px;
}