/* CONSTANTES */
:root {
    --c-background: #F0E0C6;
    --c-azul: #718AB3;
    --c-vermelho: #C35F5F;
    --c-amarelo: #D5AA4E;
    --c-escuro: #322A24;
}
@font-face { font-family: "Zing"; src: url("ZingRustDemoBase.otf"); }
@font-face { font-family: "Bergen"; src: url("BergenText-Regular.otf"); }
@font-face { font-family: "BergenBold"; src: url("BergenText-Bold.otf"); }
.blog-featured { display: none; }

/* DEFINIÇÕES */
body { margin: 0; padding: 0; display: flex; flex-direction: column; align-items: center; font-family: "Bergen", sans-serif; text-transform: uppercase; font-size: 20px; color: var(--c-escuro); background-color: var(--c-background); min-height: 100vh; overflow-x: hidden }
.bloco { width: 100%; display: flex; flex-direction: row; justify-content: center; }
.container { width: calc(100% - 40px); max-width: 1200px; display: flex; flex-direction: column; align-items: center; padding: 30px 0; }

/* ESTILO */
.nav { display: flex; flex-flow: row nowrap; justify-content: space-between; width: 100% }
.nav a { 
    font-family: 'Zing'; font-size: 34px; transition: 0.3s; width: 230px; text-decoration: none; 
    background-color: none; text-align: center; padding: 20px 0; text-transform: uppercase; 
    -webkit-text-stroke: 1px var(--c-escuro); -webkit-text-fill-color: var(--c-amarelo); 
    text-shadow: 2px 2px var(--c-escuro);
}
.nav a:hover { -webkit-text-fill-color: var(--c-azul); }
.nav .nav-bg { background-color: var(--c-vermelho); flex-grow: 1; display: flex; }


/* CRONÔMETRO HOME */
.cronometro-topo { font-size: 35px; -webkit-text-stroke: 0.6px var(--c-escuro); -webkit-text-fill-color: var(--c-azul); font-family: Zing; margin-left: -5px; text-shadow: 2px 2px var(--c-escuro); }
.cronometro-grande { -webkit-text-stroke: 2px var(--c-escuro); -webkit-text-fill-color: var(--c-amarelo); line-height: 60px; font-size: 90px; text-shadow: 2px 2px var(--c-escuro); }
.cronometro-palavra { font-size: 25px; -webkit-text-stroke: 0.3px var(--c-escuro); -webkit-text-fill-color: var(--c-vermelho); font-family: Zing; margin-left: -5px }

/* GALERIA */
.desc-personagem { display: flex; height: calc(100% - 50px); opacity: 0; transition: 0.5s; background-color: rgba(0, 0, 0, 0.7); flex-direction: column; justify-content: center; padding: 25px; backdrop-filter: blur(10px); color: white; }
.desc-personagem:hover { opacity: 1; }
.desc-personagem .nome { text-align: center; font-size: 50px; line-height: 40px; -webkit-text-stroke: 0.6px var(--c-escuro); -webkit-text-fill-color: var(--c-background); font-family: Zing; text-shadow: 2px 2px var(--c-escuro); }
.desc-personagem .desc { text-align: center; font-family: "Kanit"; line-height: 20px; }
.desc-personagem .botao { margin-top: 10px; text-align: center; background-color: var(--c-azul); border-radius: 5px; font-size: 25px; -webkit-text-stroke: 0.6px var(--c-escuro); -webkit-text-fill-color: var(--c-background); font-family: Zing; text-shadow: 2px 2px var(--c-escuro); }

.desc-jogador { display: flex; height: calc(100% - 50px); flex-direction: column; justify-content: flex-end; padding: 25px; color: white; }
.desc-jogador .nome { text-align: center; font-size: 50px; line-height: 40px; -webkit-text-stroke: 0.6px var(--c-escuro); -webkit-text-fill-color: var(--c-vermelho); font-family: Zing; text-shadow: 2px 2px var(--c-escuro); }
.desc-jogador .desc { text-align: center; font-size: 35px; line-height: 25px; -webkit-text-stroke: 0.6px var(--c-escuro); -webkit-text-fill-color: var(--c-amarelo); font-family: Zing; text-shadow: 2px 2px var(--c-escuro); }

.desc-campanha { display: flex; height: calc(100% - 50px); opacity: 0; transition: 0.5s; background-color: rgba(0, 0, 0, 0.7); flex-direction: column; justify-content: center; padding: 25px; backdrop-filter: blur(10px); color: white; }
.desc-campanha:hover { opacity: 1; }
.desc-campanha .dia { text-align: center; font-size: 30px; line-height: 25px; -webkit-text-stroke: 0.6px var(--c-escuro); -webkit-text-fill-color: var(--c-azul); font-family: Zing; text-shadow: 2px 2px var(--c-escuro); margin-bottom: 20px; }
.desc-campanha .nome { text-align: center; font-size: 50px; line-height: 40px; -webkit-text-stroke: 0.6px var(--c-escuro); -webkit-text-fill-color: var(--c-background); font-family: Zing; text-shadow: 2px 2px var(--c-escuro); }
.desc-campanha .desc { text-align: center; font-size: 35px; line-height: 25px; -webkit-text-stroke: 0.6px var(--c-escuro); -webkit-text-fill-color: var(--c-amarelo); font-family: Zing; text-shadow: 2px 2px var(--c-escuro); }
.desc-campanha .hora { text-align: center; font-size: 30px; line-height: 25px; -webkit-text-stroke: 0.6px var(--c-escuro); -webkit-text-fill-color: var(--c-vermelho); font-family: Zing; text-shadow: 2px 2px var(--c-escuro); margin-top: 20px; }

.bloco-campanha { width: calc((100% - 40px)/3); height: 280px; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; position: relative; margin-bottom: 20px; background-size: cover; }