body, html{
    height: 100%;
    background-color: #F5F3E0;

    height: 100%;

    background-position: center;
    background-repeat:no-repeat;
    background-size: cover;
    background-attachment: fixed;
}

body {
    margin: 0px; /* Remove default margin */
    display: flex;
    flex-direction: column;
}

main {
    margin-left: 20px;
    margin-right: 20px;
}
/* margin: 0 auto  (centraliza as coisas) */

/*
.toTheSide {
    color: white;
    background-color: #180C1E; 
    padding: 10px; 
    border-style:solid; 
    width: 900px;
    margin: 5px;

    margin: 0 auto
}
*/

body {
    margin: 0px; /* Remove default margin */
    display: flex;
    flex-direction: column;
}

main {
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 5px;
    margin-bottom: 5px;

    background-color: #E0C9A6;
    background-origin: inherit;

    border-style: solid;
    border-color: #b3a083;
}

header {
    background-color:#3F2B27;
    padding-top: 20px;
    padding-bottom: 10px;
    width: 100%;
    text-align: center;
    
    
    top: 0;
    left: 0;
    border-bottom: 4px solid #d82c2c;
    z-index: 1000;
    
}
nav {
    margin-top: 10px;
}
nav ul{
    list-style-type: none;
    padding: 0px;
    margin: 0px
}
nav a {
    
    text-decoration: none;
    color: #F5F3E0;
    display: block;
    text-align: center;
    padding: 10px;

    overflow: hidden;
}
nav a:hover {
    color: #3F2B27;
    background-color: #F5F3E0;
}
nav li {
    float: left;
    margin: 5px;
}

footer {
    background-color:#3F2B27;


    width: 100%;
    text-align: center;
    padding-bottom: 60px;

    bottom: 0;
    left: 0;
    border-top: 4px solid #d82c2c;
    z-index: 1000;
}

.titulo {
    text-align: center;
    font-size: 25px;
}

.contexto {
    text-align: center;
    margin-left: 20px;
    margin-right: 20px;
    font-size: 23px;
}

.secondPage {
    height: 100%;
    background-image: url(imagens/newoneshot.png);

    height: 100%;

    background-position: center;
    background-repeat:no-repeat;
    background-size: cover;
    background-attachment: fixed; 
}

.epicBorder{
    
    font-family: 'Franklin Gothic Medium';

    align-self: center;

    
    border-radius: 15px;

    margin:0;
    padding: 5px;

    border: 4px solid;
    background-color: #180C1E;
    border-image: url(imagens/rainbow\ background.png);
    border-image: linear-gradient(to right,#B81414 0%,#14B814 33%,#1414B8 66%,#42176D 100%) 1 stretch;

    
    margin-left: auto;
    margin-right: auto;
    color:white;

    white-space: nowrap;

}

.textStyle{
    color: white;
}

.titlediv {
    display: flex;

    align-items: center;
    justify-content: center;
}

.title {
    color: #F5F3E0;
    font-family: Bookman, URW Bookman L, serif;

    margin: 0 15px;
    font-size: 40px;
    
}


.titlediv img {
    

    display: flex; /* Torna o bloco um contêiner flexível */
    justify-content: center; /* Centraliza a imagem horizontalmente */
    align-items: center;

    image-rendering: pixelated;

    max-width: 128px; /* Garante que a imagem não ultrapasse o tamanho do bloco */
    max-height: 128px;

    width: 128px;
    height: 128px; /* Mantém a proporção da imagem */

    border-radius: 1px;
    margin: 0 15px;

    

}



.contextoBloco {
    display: flex;
    align-items: center; /* Alinha verticalmente os itens no centro */
    justify-content: space-between; /* Espaço entre os itens */
    padding: 20px;
    gap: 20px; /* Espaçamento entre os blocos */

    
}

.contextoBlocoTxt {
    flex: 1; /* Permite que o bloco de texto ocupe mais espaço */
}

.contextoBlocoImg {
    flex: 1; /* Permite que o bloco de imagem ocupe o mesmo espaço do texto */

    display: flex; /* Torna o bloco um contêiner flexível */
    justify-content: center; /* Centraliza a imagem horizontalmente */
    align-items: center;
}

.contextoBlocoImg img {
    

    max-width: 512px; /* Garante que a imagem não ultrapasse o tamanho do bloco */
    max-height: 256px;

    width: 512px;
    height: 256px; /* Mantém a proporção da imagem */

    border-radius: 10px; /* Bordas arredondadas para a imagem, se desejado */
}

@media (max-width: 768px) {
    .contextoBloco {
        flex-direction: column; /* Empilha os blocos verticalmente */
        text-align: center; /* Centraliza o texto */
    }

    .contextoBlocoTxt, .contextoBlocoImg {
        flex: unset; /* Remove o comportamento flex para garantir que ocupem o espaço necessário */
    }
}