body{
    margin: 0;
    background-color: #A6775B;
}

.coisabonita{
    background-color: #1C2026;
    margin: 0 auto;
    height: 7.64vw;
    
}

.coisabonita img{
    width: 100%;
    box-shadow: 0vw 6px 15px rgba(0, 0, 0, 0.5);
}

.bannertopo {
    background-image: url("imgs/bannerGrande.png");
    background-size: cover;
    background-repeat: no-repeat;
    box-shadow: inset 0.5 0.5vw 10px 2px rgba(0, 0, 0, 0.5);
}


.titleBanner{
    font-family: "Changa One", sans-serif;
    font-size: 4.3vw;
    text-align: center;
    margin: 0 auto;
    font-weight: 400;
}

.bannertopo h1{
    padding-top: 4vw;
    margin-bottom: -1.3vw;
    text-shadow: #735048 0.1vw 0.1vw 0.2vw;
}

.bannertopo p{
    font-family: "Changa One", sans-serif;
    font-size: 1.85vw;
    text-transform: uppercase;
    color: #F2CA99;
    margin-left: 4.4vw;
    padding-bottom: 3vw;
    text-shadow: #0000005a 0.2vw 0.2vw 0.2vw;

}

.informacoes{
    display: flex;
    justify-content: center;
    gap: 2.5vw;
    max-width: 90vw ; 
    margin: 0 auto;
    padding: 2vw;
    margin-top: 3.8vw;
}

.informacoes2{
    justify-content: center;
    max-width: 90vw; 
    margin: 0 auto;
}

.introducao{
    width: 70vw;
}

.minetexto{
    font-family: "Changa", sans-serif;
    font-size: 1.4vw;
    color: #423939;
    text-align: justify;
    width: 56vw;
}

.imagem1{
    width: 56.7vw;
}

.detalhes{
    width: 36vw;
    height: 90vw;
    border-radius: 0.2vw;
    background-color: #735048;
    padding: 2vw;
    justify-content: center;
    margin: 0 auto;
    box-shadow: #00000025 0.35vw 0.35vw 0.2vw;
    padding-bottom: 0vw;
    
}

.detalhes .Prdetalhes{
    font-family: "Changa", sans-serif;
    color: white;
    font-size: 1.4vw;
    text-align: left;
    margin-bottom: 3vw;
    font-weight: 400;
}



.detalhesh1{
    margin-top: 0;
    text-align: center;
    font-family: "Changa", sans-serif;
    color: #F2CA99;
    font-size: 1.8vw;
    margin-bottom: 3.5vw;
}

.desfechovit{
    margin-top: 0;
    text-align: center;
    font-family: "Changa", sans-serif;
    color: #F2CA99;
    font-size: 1.8vw;
    margin-bottom: 1vw;
}

.bandeiras{
    width: 5vw;
}

.dadosquantidade{
    display: flex;
    gap: 2vw;
    color: white;
    margin: 0 auto;
    padding: 0.1vw;
    font-size: 1.15vw;
    margin-bottom: 3vw;
}

.dadosquantidade .bandeiras{
    padding: 3vw;
    padding-top: 0;
}

.dadosquantidade p{
    font-size: 1.08vw;
    font-family: "Changa";
    line-height: 1;
    font-weight: 300;
}

.dadosquantidade h1{
    font-size: 1.3vw;
    font-family: "Changa";
    line-height: 1;
    margin-left: -1vw;
    color: white;
    margin-bottom: 2.7vw;
}

.linha-vertical {
    height: 24vw;
    width: 0.1vw;
    background-color: white;
}

.tituloPrincipal{
    margin-top: 0;
    margin-bottom: 0;
    font-family: "Changa", sans-serif;
    text-transform: uppercase;
    font-size: 2.75vw;
    line-height: 1.4;
    color: white;
    text-align: justify;
    text-shadow: #735048 0.1vw 0.1vw 0.4vw ;
    width: 56vw;
    font-weight: 700;
}

.subtitulo{
    margin-top: 0;
    font-family: "Changa", sans-serif;
    text-transform: uppercase;
    font-size: 2.75vw;
    line-height: 1.4;
    color: #F2CA99;
    text-align: justify;
    text-shadow: #735048 0.1vw 0.1vw 0.4vw ;
    margin-top: 3vw;
    margin-bottom: 0.2vw;
    font-weight: 700;
}

.textolegenda{
    font-family: "Changa", sans-serif;
    font-size: 1.148vw;
    color: #000000;
    text-align: left;
    text-transform: uppercase;
    margin-top: 0;

}

.textos{
    font-family: "Changa", sans-serif;
    font-size: 1.38vw;
    color: #000000;
    text-align: justify;
}

.linha{
    border: solid white 0.15vw ;
    width: 90vw;
    margin: auto;
    margin-top: 1vw;
    margin-bottom: 3vw;
}

.aliados{
    display: flex;
    gap: 2vw;
    align-items: center;
    margin: auto;
    padding: 1vw;
}

.aliados img{
    width: 13vw;
}

.aliados h1{
    margin: auto;
    margin-top: 2.1vw;
    color: white;
    font-size: 2.4vw;
    font-family: 'Changa';
    font-weight: 700;
}

.subsubtitulo{
    margin-top: 2vw;
    text-shadow: #00000070 0.208vw 0.208vw 0.8vw;
    text-align: center;
    color: rgb(0, 0, 0);
    font-size: 2.4vw;
    text-transform: uppercase;
    font-family: "Changa", sans-serif;
    font-weight: 400;
}

.imgetxtGuadalcanal{
    margin-top: 2vw;
    display: flex;
    gap: 0.8vw;
    align-items: center;
    margin-bottom: 1vw;
}

.imgetxtGuadalcanal img{
    width: 44vw;
    height: 26vw;
}

.citacao{
    background-color: #735048;
    margin: auto;
    text-align: center;
    padding: 0.1vw;
    font-family: "Changa", sans-serif;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.38vw;
    border-radius: 0.3vw;
    box-shadow:  #00000049 0.3vw 0.3vw 0.5vw;
    margin-bottom: 4vw;
}

.containerlinhadotempo {
    background: #1C2026; 
    color: #fff; 
    border-radius: 0.3vw; 
    box-shadow:  #00000049 0.3vw 0.3vw 0.5vw;
    margin-bottom: 2vw;
    padding: 2vw;
}

.titulotimeline {
    text-align: center;
    color: #fff;
    font-size: 2.4vw;
    text-transform: uppercase;
    font-family: "Changa", sans-serif;
    font-weight: 400;
    margin-top: -1vw;
}

.linha2 {
    border: solid white 0.17vw;
    width: 85vw;
    margin: auto;
    margin-top: -1vw;
}

.timeline-nav {
    display: flex;
    margin-bottom: 25px;
    justify-content: center;
    gap: 0.35vw;
    margin-top: 1vw;
    flex-wrap: wrap;
}

.timeline-nav button {
    background: #fff;
    font-family: 'Changa', 'sans-serif';
    color: #b00;
    border: none;
    padding: 0vw 1.42vw;
    cursor: pointer;
    font-size: 1.08vw;
    text-transform: uppercase;
    transition: 0.3s;
    line-height: 1.2;
}

.timeline-nav button.active {
    background: #b00;
    color: #fff;
}

.timeline-content {
    display: none;      
    gap: 1vw;
    margin-top: 2vw;
    align-items: center;
    animation: fadeIn 0.4s ease; 
}

.timeline-content.active {
    display: flex;          
    flex-direction: column;
}

.timeline-text p{
    width: 49vw;
}

.timeline-text {
    font-family: "Changa", sans-serif;
    font-size: 1.38vw;
    color: #ffffff;
    text-align: left;
    display: flex;
    gap: 7vw;
    align-items: center;
}

.timeline-content img {
    max-width: 25vw;
    border-radius: 0.5vw;
    margin-right: 3vw;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.titletimeline{
    font-size: 2vw;
}

.imagemTextoDois{
    display: flex;
    margin-top: 4vw;
    gap: 4vw;
    margin-bottom: 6vw;
}

.imagemTextoDois img{
    width: 45vw;
}

.imagemTextoDois h1{
    margin-top: 0;
    margin-bottom: 5vw;
}

.duaspfj{
    display: flex;
    gap: 2vw;
}

.infojapa{
    background-color: #735048;
    width: 47vw;
    height: 32vw;
    display: flex;
    align-items: center;
    padding: 0vw 0vw 0vw 1.6vw;  
    border-radius: 0.3vw; 
    gap: 1.5vw;
    box-shadow:  #00000049 0.3vw 0.3vw 0.5vw;
}

.infojapa img{
    width: 18vw;
}

.infojapa p{
    font-family: "Changa", sans-serif;
    color: rgb(255, 255, 255);
    font-size: 1.08vw;
    text-align: justify;
    width: 21vw;
    line-height: 2;
    margin-bottom: -0.1vw;
    margin-top: 0;
}

.infojapa h1{
    color: white;
    margin-bottom: -0.1vw;
    margin-top: 0;
}

.duaspfa{
    display: flex;
    gap: 2vw;
    justify-content: center;
    margin-bottom: 3vw;
}

.aliadostudo{
    background-color: #735048;
    padding: 1.27vw;
    padding-bottom: 0;
    padding-inline: 2.5vw;
    padding-bottom: 1vw;
    padding-top: 0;
    border-radius: 0.3vw;
    box-shadow:  #00000049 0.3vw 0.3vw 0.5vw; 
}

.aliadostudo h1{
    text-align: left;
    margin-bottom: -0.1vw;
    color: white;
}

.imgeTextoAliados{
    display: flex;
    gap: 1vw;
    margin: auto;
    justify-content: center;
    align-items: center;
}

.imgeTextoAliados img{
    width: 18vw;
}

.imgeTextoAliados p{
    font-family: "Changa", sans-serif;
    color: rgb(255, 255, 255);
    font-size: 1.08vw;
    width: 20vw;
    text-align: justify;
    margin-top: 0;
    margin-bottom: 0;
}

.containerreferencia{
    background-color: #1C2026;
    align-items: center;
    padding: 0.1vw;
    margin-bottom: 2vw;
    box-shadow: #000000 0 0 1vw ;
}

.containerreferencia .textos{
    color: white;
    text-align: center;
    font-weight: 700;
}

.containerreferencia .links{
    color: white;
    text-align: left;
    font-family: 'Changa';
    padding: 0vw 2vw 0vw 2vw;
}

.linha3{
    border: solid white 0.15vw ;
    width: 85vw;
    margin: auto;
    margin-top: -1vw;
    margin-bottom: 1vw;
}

.rodape{
    gap: 48vw;
    display: flex;
    background-color: #473837;
    padding: 2vw;
    box-shadow: #0000005d 0 -0.2vw 0.3vw ;
}

.rodape h1{
    margin: 0;
    font-size: 2.1vw;
    text-transform: none;
    text-align: justify;
    max-width: 85vw;
    margin: 0 auto;
    color: #D9A273;
    text-shadow: #0000005a 0.2vw 0.2vw 0.2vw;
}

a{
    color: white;
    text-decoration: none;
}

a:hover {
    color: rgb(210, 144, 37);
    text-decoration: underline; /* Adiciona um sublinhado ao passar o rato */
}

a:active {
    color: rgb(141, 91, 0);
}