@font-face {
    font-family: "Bitter";
    src: url("fontes/bitter-v40-latin_latin-ext-regular.woff2") format("woff2");
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: "Bitter";
    src: url("fontes/bitter-v40-latin_latin-ext-700.woff2") format("woff2");
    font-weight: 700;
    font-display: swap;
}
@font-face {
    font-family: "Libre Baskerville";
    src: url("fontes/libre-baskerville-v24-latin_latin-ext-regular.woff2")
        format("woff2");
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: "Libre Baskerville";
    src: url("fontes/libre-baskerville-v24-latin_latin-ext-700.woff2")
        format("woff2");
    font-weight: 700;
    font-display: swap;
}
@font-face {
    font-family: "Courier Prime";
    src: url("fontes/courier-prime-v11-latin_latin-ext-regular.woff2")
        format("woff2");
    font-weight: 400;
    font-display: swap;
}

:root {
    --offwhite: #d5b693;
    --preto: #332b22;
    --bege: #b79f90;
    --marrom: #6e533e;

    --f-titulo: "Bitter", Georgia, serif;
    --f-corpo: "Libre Baskerville", Georgia, serif;
    --f-mono: "Courier Prime", "Courier New", monospace;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

::selection {
    background: var(--marrom);
    color: var(--offwhite);
}

body {
    background-color: var(--preto);
    color: var(--offwhite);
    font-family: var(--f-corpo);
    font-size: 1rem;
    line-height: 1.7;
    max-width: 1920px;
    margin: 0 auto;
    padding: 2.5rem 2rem 5rem;
    margin-top: 5rem;
    margin-bottom: 5rem;
    border: 6px solid var(--marrom);
}

header {
    padding-bottom: 1.5rem;
    margin-bottom: 1rem;
    text-align: center;
}

.site-nome {
    font-family: var(--f-titulo);
    font-weight: 700;
    font-size: 4rem;
    color: var(--offwhite);
    letter-spacing: 0.05em;
    line-height: 1;
}

.site-sub {
    font-family: var(--f-mono);
    font-size: 0.75rem;
    color: var(--offwhite);
    text-transform: uppercase;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
    letter-spacing: 0.15em;
}

.divisor {
    border: none;
    height: 2px;
    background: var(--offwhite);
    margin: 1rem 0;
}

main h2 {
    font-family: var(--f-titulo);
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--offwhite);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 1rem;
    line-height: 1.5;
}

main p {
    font-size: 1rem;
    margin-bottom: 1rem;
}

.meta {
    font-family: var(--f-mono);
    font-size: 1rem;
    color: var(--offwhite);
    margin-bottom: 1rem;
}

.leia-mais,
.voltar {
    display: inline-block;
    font-family: var(--f-mono);
    font-size: 1rem;
    color: var(--offwhite);
    margin-top: 0.5rem;
    letter-spacing: 0.05em;
}

.leia-mais,
.voltar:hover {
    color: var(--offwhite);
}

.layout {
    display: flex;
    gap: 2.5rem;
}

.conteudo {
    flex: 1;
    min-width: 0;
}

.sidebar {
    width: 20rem;
    height: 60rem;
    flex-shrink: 0;
    font-family: var(--f-mono);
    font-size: 1em;
    color: var(--offwhite);
    background: var(--marrom);
    border: 1px solid var(--offwhite);
    padding: 1rem;
}

.sidebar a {
    color: var(--offwhite);
}

.sidebar a:visited {
    color: var(--offwhite);
}

.sidebar a:hover {
    color: var(--preto);
}

footer {
    font-family: var(--f-mono);
    font-size: 0.75rem;
    color: var(--offwhite);
    padding-top: 0.5rem;
    line-height: 2;
}