:root {
    --painel:       #221a2b;
    --painel-alto:  #2c2138;
    --painel-topo:  #3b2a4b;
    --borda:        #110b17;
    --linha:        #44345a;
    --texto:        #ddd3e6;
    --texto-fraco:  #9d8fab;
    --ouro:         #f39a3d;
    --ouro-claro:   #ffc884;
    --fundo:        #120d17;
}

html {
    background:
        linear-gradient(180deg,
            rgba(18, 12, 24, 0)   0,
            rgba(18, 12, 24, 0)   var(--janela-da-cena),
            rgba(18, 12, 24, .84) calc(var(--janela-da-cena) + 240px),
            rgba(18, 12, 24, .90) 100%),
        url("/estatico/cidade-halloween.png") no-repeat top center,
        var(--fundo);
    background-attachment: scroll, fixed, fixed;
    background-size: auto, cover, auto;
}

.bloco,
table th,
.bloco > h1,
.bloco > h2 { border-color: #0e0913; }

.bloco > h1,
.bloco > h2,
button, .baixar,
ul.abas a.atual,
details.apagar > summary {
    background: linear-gradient(180deg, var(--painel-topo), #2a1f36);
    border-color: #0e0913;
}

button:hover, .baixar:hover {
    background: linear-gradient(180deg, #e0782a, #a94d14);
    color: #fff;
}

ul.abas a { background: #2a1f36; }
ul.abas a:hover { background: #352744; }

code.caminho { background: #1b1322; }

.bloco > .interior,
.bloco > ul,
.bloco > summary { background-color: rgba(34, 26, 43, .96); }

.bloco > summary {
    background-image: linear-gradient(180deg,
        rgba(59, 42, 75, .96), rgba(42, 31, 54, .96));
}

table tr:nth-child(odd)  td { background: rgba(34, 26, 43, .96); }
table tr:nth-child(even) td { background: rgba(44, 33, 56, .96); }
table th { background: rgba(59, 42, 75, .96); }

#cabecalho {
    background: linear-gradient(180deg,
        rgba(14, 8, 20, .94), rgba(14, 8, 20, .52));
    border-bottom: 1px solid rgba(243, 154, 61, .35);
}

#rodape { background: rgba(12, 7, 17, .90); }

#faixa-imagem {
    background: radial-gradient(ellipse 620px 200px at 50% 52%,
                                rgba(12, 6, 18, .72), rgba(12, 6, 18, 0) 72%);
}

#faixa-imagem .titulo {
    background: linear-gradient(180deg,
        #FFF1DE 0%,  #FFC884 16%, #F39A3D 42%,
        #8A3F0E 50%, #FFC884 56%, #D96A1E 78%, #4A1F5E 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-stroke: 0.016em #160A1C;
}

#faixa-imagem .lema { color: #F4DDF9; }

.atributos {
    --prata:       #ece2f4;
    --prata-medio: #b6a6c6;
    --prata-fundo: #2c2436;
    --prata-linha: #54456a;
    --suave:       #b8a9c6;
}

.etiqueta.evento {
    background: #5b2a86;
    color: #ffcf9a;
}

#faixa-do-evento {
    max-width: 1400px;
    margin: 0 auto;
    text-align: center;
}

#faixa-do-evento a {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: baseline;
    gap: 4px 14px;
    padding: 8px 14px;
    color: #ffd9a8;
    text-decoration: none;
    background: linear-gradient(90deg,
        rgba(91, 42, 134, .92), rgba(201, 92, 22, .92), rgba(91, 42, 134, .92));
    border: 1px solid #0e0913;
    border-top: none;
}

#faixa-do-evento strong {
    font: bold 15px/1.3 Georgia, 'Times New Roman', serif;
    letter-spacing: .5px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .8);
}

#faixa-do-evento span {
    font-size: 12px;
    text-decoration: underline;
}

#faixa-do-evento a:hover span { color: #fff; }