body {
    background: #222; /*Fundo com cor */
    color: #222;
    font-family: 'Franklin Gothic Medium';
}

header h1 {
    font-size: 2.5rem;
    color: #e0d42c;
    text-align: center;
}

h2 {
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
font-weight: bold;
font-size: 2.2rem;
color: #222;
}

main {
    background: #ffffff;
    padding: 3rem;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    text-align: center;
}

.fonte {
    padding: 0.7rem; /* espaço interno pro texto "respirar" */
    border: 1px solid #414040; /* borda para separar visual */
    border-radius: 6px; /* cantos arredondados */
    font-size: 1.6rem; /* tamanho da fonte */
    max-width: 40%; /* limita o tamanho horizontal do div */
    margin: 0 auto 1rem; /*centraliza os div na tela margin: topo | esquerda e direita | baixo e quando eu coloco auto ele centraliza automaticamente*/
}

.fonte-arial {
    font-family: Arial;
}

.fonte-tahoma{
    font-family: Tahoma;
}
.fonte-trebuchet{
    font-family: Trebuchet;
}
.fonte-couriernew{
    font-family: 'Courier New';
}
.fonte-georgia{
    font-family: Georgia;
}
.btn-voltar{
display: inline-block;
padding: 0.75rem 1.4rem;
background: #e0d42c;
color: #222;
text-decoration: none;
border-radius: 8px;
font-weight: bold;
cursor: pointer;
transition: 0.2s ease;
}

.btn-voltar:hover { /* Efeito de passar o mouse */
background: #bbb122;
transform: translateY(-2px);
}

button.option {
    background: #e0d42c; /*cor diferente para os botoes */
}

button.option:hover {
    background: #b8ae21;
}