@font-face {
    font-family: "Flexi-IBM";
    src: url(/assets/fonts/Flexi_IBM_VGA_True.ttf);
}

/* ─── Reset / Base ─────────────────────────────── */

body {
    overflow: hidden;
    font-family: "Flexi-IBM";
    font-size: 22px;
}

a {
    color: white;
}
a:hover {
    color: yellow;
}

hr {
    color: white;
    width: 100%;
}

ul li {
    list-style-type: "* ";
}

/* ─── Vídeo de fundo ───────────────────────────── */

video#bg-video {
    position: fixed;
    inset: 0;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -1;
    object-fit: cover;
    background: url(/assets/media/backgrounds/version1/Nitro+2026-02-20.png) center / cover no-repeat;
}

/* ─── Botão ocultar painel ─────────────────────── */

#hide-main-block-button {
    position: fixed;
    top: 10px;
    left: 20px;
    width: 40px;
    height: 40px;
    border: 4px double white;
    background-color: #0000aa;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ─── Painel principal ─────────────────────────── */

#main-block {
    display: flex;
    flex-direction: column;
    background-color: #0000aa;
    color: white;
    border: 4px double white;
    min-height: 660px;
    max-width: 950px;
    max-height: 850px;
    margin: 10px auto 300px;
    overflow: hidden;
}

#page-title {
    text-align: center;
    border-bottom: 4px double white;
    margin: 0;
    padding: 2px;
}

#inside-block {
    display: flex;
    flex: 1;
    min-height: 0;
}

#left-block {
    flex: 1;
    min-width: 0;
    padding: 40px;
    overflow-y: scroll;
}

/* ─── Navbar ───────────────────────────────────── */

#navbar {
    flex: 0 0 140px;
    display: flex;
}

#nav-list {
    flex: 1;
    margin: 0;
    padding: 25px;
    padding-top: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    border-left: 3px double white;
}

#nav-list li {
    list-style: none;
}

.nav-item {
    position: relative;
    width: 60px;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.nav-text {
    position: absolute;
    top: 100%;
    text-align: center;
}

/* Blocos da navbar — frame estático e hover animado */

#nav-cobblestone      { background: url("/assets/media/blocks/cobblestone-frame.png") center / 60px no-repeat; }
#nav-cobblestone:hover{ background: url("/assets/media/blocks/Cobblestone.gif")       center / 60px no-repeat; }

#nav-diamond      { background: url("/assets/media/blocks/diamond-frame.png") center / 60px no-repeat; }
#nav-diamond:hover{ background: url("/assets/media/blocks/diamond-low.gif")   center / 60px no-repeat; }

#nav-books      { background: url("/assets/media/blocks/book-frame.png") center / 60px no-repeat; }
#nav-books:hover{ background: url("/assets/media/blocks/book-low.gif")   center / 60px no-repeat; }

#nav-beacon      { background: url("/assets/media/blocks/beacon-frame.png") center / 60px no-repeat; }
#nav-beacon:hover{ background: url("/assets/media/blocks/beacon-low.gif")   center / 60px no-repeat; }

#nav-furnace      { background: url("/assets/media/blocks/furnace-off-frame.png") center / 60px no-repeat; }
#nav-furnace:hover{ background: url("/assets/media/blocks/furnace-on-low.gif")    center / 60px no-repeat; }

/* ─── Hero (main.njk) ──────────────────────────── */

#hero {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.title-text:hover {
    color: #ffff00;
}

/* ─── Animação ASCII ───────────────────────────── */

@keyframes varredura-amarela {
    0%,   9%   { color: yellow; }
    9.1%, 100% { color: inherit; }
}

.ascii-animado span {
    animation: varredura-amarela 2.2s infinite;
}

.ascii-animado span:nth-child(1)  { animation-delay: 0.0s; }
.ascii-animado span:nth-child(2)  { animation-delay: 0.2s; }
.ascii-animado span:nth-child(3)  { animation-delay: 0.4s; }
.ascii-animado span:nth-child(4)  { animation-delay: 0.6s; }
.ascii-animado span:nth-child(5)  { animation-delay: 0.8s; }
.ascii-animado span:nth-child(6)  { animation-delay: 1.0s; }
.ascii-animado span:nth-child(7)  { animation-delay: 1.2s; }
.ascii-animado span:nth-child(8)  { animation-delay: 1.4s; }
.ascii-animado span:nth-child(9)  { animation-delay: 1.6s; }
.ascii-animado span:nth-child(10) { animation-delay: 1.8s; }
.ascii-animado span:nth-child(11) { animation-delay: 2.0s; }


/* ─── Layout externo (main-block + sidebar) ────── */

#layout {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    margin-top: 10px;
}

#main-block {
    margin: 0; /* sobrescreve a margem anterior — o #layout cuida do posicionamento */
}

/* ─── Checkbox hack — botão aba ────────────────── */

#status-toggle {
    display: none;
}

/* #status-tab {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    cursor: pointer;
    /* align-self: ; centraliza verticalmente em relação ao #main-block */

    /* background-color: #0000aa;
    color: white;
    border: 4px double white;
    border-left: none; /* cola na borda direita do main-block */
    /* padding: 10px 4px;

    user-select: none;
    font-family: "Flexi-IBM";
    font-size: 16px; }*/ 


/* #status-tab:hover {
    color: yellow;
} */

/* ─── Painel de status (escondido por padrão) ──── */

#status-panel {
    display: flex;
    /* para reativar botão de status, mudar isso para none */
    margin-left: 5px;
    flex-direction: column;
    /* align-self: stretch; */
    /* descomente linha acima para fazer com que o painel preencha tudo
    até o fim do bloco principal */

    /* background-color: #0000aa;
    color: white;
    border: 4px double white;
    padding: 10px;
    width: 200px;
    font-family: "Flexi-IBM";
    font-size: 16px;
} */
}

/* Quando o checkbox está marcado, mostra o painel */
#status-toggle:checked ~ #status-tab {
    color: yellow;
}

#status-toggle:checked ~ #status-panel {
    display: block;
}

/* ─── Widget status.cafe ───────────────────────── */

#statuscafe {
    padding: .5em;
    background-color: #0000aa;
    color: white;
    border: 4px double white;
    padding: 10px;
    width: 200px;
    font-family: "Flexi-IBM";
    font-size: 16px;
}

#statuscafe-username {
    margin-bottom: .5em;
    color: yellow;
}

#statuscafe-content {
    margin: 0 0.5em 0.5em 0.5em;
}

#changelog {
    background-color: #0000aa;
    color: white;
    border: 4px double white;
    padding: 10px;
    width: 200px;
    font-family: "Flexi-IBM";
    font-size: 16px;
    margin-top: 5px;
    max-height: 400px;
    overflow-y: scroll;
}

input[type="radio"]{
    appearance: none;
    -webkit-appearance: none;
    
}

input[type="radio"] + label::before{
    content: "[ ] ";
}

input[type=radio]:checked + label::before {
    content: "[*] ";
}

input[type="radio"] + label:hover::before{
    color: yellow;}

label:hover{
    color: yellow;
}

h1 {
    background-color: white;
    color: #0000aa;
    padding-left: 10px;
}

h2 {
    background-color: white;
    color: #0000aa;
    padding-left: 10px;
}

h3 {
    background-color: white;
    color: #0000aa;
    padding-left: 10px;
}