:root {
    --cor-primaria: #681212;
    --cor-secundaria: #925e5e;
    --cor-fundo: #ffffff;
    --cor-texto: #341e1e;
    --cor-contraste: #f3eef7;
    --cor-botao: #cdb5b5;

    --fonte-principal: 'Segoe UI', sans-serif;
}

* {
    transition: background-color 0.3s ease, color 0.3s ease;
}

.tema-escuro {
    --cor-primaria: #853939;
    --cor-secundaria: #1f1111;
    --cor-fundo: #241212;
    --cor-texto: #c3a3a3;
    --cor-contraste: #f7eeee;
    --cor-botao: #681212;
}

.tema-escuro button {
    border: none;
    background-color: var(--cor-botao);
    color: var(--cor-contraste);
}

.tema-escuro article {
    background-color: #f7eeee0c;
}

.tema-escuro h2 {
    color: var(--cor-contraste);
}

body {
    font-family: var(--fonte-principal);
    color: var(--cor-texto);
}

header,
footer {
    background-color: var(--cor-primaria);
    color: var(--cor-contraste);
    text-align: center;
    margin: 0 auto;
    padding: 16px;
    max-width: 100vw;
}

main {
    background-color: var(--cor-fundo);
    color: var(--cor-texto);
    margin: 0 auto;
    padding: 16px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

article {
    display: flex;
    border-radius: 8px;
    margin: 1rem;
    gap: 1rem;
    padding: 1rem;

    /* Mobile-first */
    flex: 0 0 80%;
    flex-direction: column;
    align-items: center;
    text-align: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

img {
    width: 80px;
    height: 80px;
}

h2 {
    margin: 0;
}

.artigo-autor {
    font-weight: bold;
}

a {
    color: rgb(108, 108, 242);
}

button {
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 5px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.btn-tema-escuro {
    position: fixed;
    bottom: 16px;
    right: 16px;
    font-size: 2rem;
    padding: 12px;
    border-radius: 50%;
    background-color: var(--cor-primaria);
    color: var(--cor-contraste);
}

/* Tablet */
@media (min-width: 601px) and (max-width: 1000px) {
    article {
        flex: 1 1 40%;
    }
}

/* Desktop */
@media (min-width: 1001px) {
    article {
        flex-direction: row;
        align-items: start;
        text-align: left;
        flex: 1 1 25%;
    }
}