:root {
    /* COLORS */
    --bg: #2b2f24;
    --bg-dark: #171a14;
    --bg-light: #363b2d;

    --primary: #8b5a3c;
    --primary-dark: #5a3825;

    --accent: #c8a56a;

    --text: #f3efe6;
    --text-muted: #c8c1b2;

    --shadow: rgba(200, 165, 106, 0.25);
    --shadow-strong: rgba(91, 56, 37, 0.70);

    --font-title: 'Cinzel', serif;
    --font-body: 'EB Garamond', serif;

    --transition: 0.35s ease;

    /* BANNER */
    --banner-bg-top: rgba(43, 47, 36, 0.35);
    --banner-bg-bottom: rgba(23, 26, 20, 0.88);

    --banner-overlay: rgba(200, 165, 106, 0.12);
    --banner-overlay-soft: rgba(200, 165, 106, 0.05);

    --banner-shadow: rgba(91, 56, 37, 0.40);
    --banner-shadow-dark: rgba(10, 10, 8, 0.85);

    --banner-image: url("https://www.meisterdrucke.it/kunstwerke/1260px/Gustave_Dore_-_Inferno_Canto_1_Dante_in_the_savage_wood_illustration_from_The_Divine_Comedy_by_-_%28MeisterDrucke-628344%29.jpg");

    /* NAV */
    --nav-h: 60px;
}

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

/* BODY */
body {
    background: var(--bg);

    background-size: cover;
    background-position: center;
    background-attachment: fixed;

    color: var(--text);
    font-family: var(--font-body);

    line-height: 1.8;
}

/* TITOLO */
titl {
    display: block;

    text-align: center;

    font-family: var(--font-title);
    font-size: 3rem;
    letter-spacing: 4px;

    color: var(--primary);

    margin-bottom: 30px;

    text-shadow: 0 0 15px var(--shadow-strong);
}

/* SEZIONI TESTO */
ria,
riin,
dante,
virgil,
fiere,
ret,
theme {
    display: block;

    background-color: rgba(24, 24, 24, 0.85);

    padding: 25px;
    margin: 20px auto;

    border-left: 5px solid var(--primary);

    border-radius: 14px;

    max-width: 1000px;

    box-shadow: 0 0 20px var(--banner-shadow);
}

/* VERSIONE INGLESE */
riin {
    color: var(--text-muted);
    font-style: italic;
}

/* TITOLI SEZIONI */
.titoloSez {
    display: block;

    font-family: var(--font-title);
    color: var(--primary);

    font-size: 1.5rem;
    margin-bottom: 15px;
}

/* LISTE */
ul {
    margin-left: 30px;
    margin-top: 10px;
}

li {
    margin: 8px 0;
}

ria img,
riin img,
dante img,
virgil img,
fiere img,
ret img,
theme img {
    display: block;

    max-width: 100%;
    height: auto;

    margin: 20px auto;

    border-radius: 12px;

    box-shadow: 0 0 20px var(--shadow);

    border: 2px solid var(--primary);
}

.contenuto-sezione {
    display: flex;
    align-items: flex-start;
    gap: 200px;
}

.contenuto-sezione img {
    width: 220px;
    height: auto;

    border-radius: 12px;

    border: 2px solid var(--primary);

    box-shadow: 0 0 20px var(--shadow);

    flex-shrink: 0;
}

.contenuto-sezione p {
    flex: 1;
}