/* =========================================================
   DEPORTAZIONE
   CSS MODERNO RESPONSIVE
   ========================================================= */

:root{
    --primary:#7f0000;
    --primary-hover:#a40000;
    --text:#222;
    --text-light:#666;
    --background:#e7e7e7;
    --panel:#ffffff;
    --border:#d6d6d6;
    --link:#003f88;
}

*{
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{

    margin:0;

    padding:60px 120px 20px 20px;

    font-family:"Segoe UI", Arial, Helvetica, sans-serif;

    font-size:18px;

    line-height:1.7;

    color:var(--text);

    background:
        linear-gradient(
            to bottom,
            #f9f9f9,
            #e5e5e5
        );

    max-width:1400px;

    margin-left:auto;
    margin-right:auto;
}

/* =========================================================
   TITOLI
   ========================================================= */

h1{
    color:var(--primary);
    font-size:2.2rem;
    line-height:1.2;
    margin:0 0 1rem 0;
}

h2{
    font-size:1.8rem;
    color:#333;
    margin-top:2rem;
    margin-bottom:1rem;
}

h3{
    font-size:1.4rem;
    margin-top:1.5rem;
}

h4{
    font-size:1.2rem;
}

/* =========================================================
   TESTO
   ========================================================= */

p{
    margin:1rem 0;
    text-align:justify;
}

.commento{
    margin-top:1rem;
}

.note{
    font-size:.9rem;
    color:var(--text-light);
}

.biblio{
    font-size:.95rem;
}

/* =========================================================
   LINK
   ========================================================= */

a{
    color:var(--link);
    text-decoration:none;
    transition:.2s;
}

a:hover{
    color:var(--primary-hover);
    text-decoration:underline;
}

a:visited{
    color:#703070;
}

/* =========================================================
   ELENCHI
   ========================================================= */

ul,
ol{
    padding-left:1.5rem;
}

li{
    margin-bottom:.4rem;
}

/* =========================================================
   COPERTINA
   ========================================================= */

#copertina{
    float:left;
    width:240px;
    margin-right:35px;
    margin-bottom:20px;
}

#copertina img{
    width:100%;
    height:auto;
    border-radius:10px;
    box-shadow:0 4px 15px rgba(0,0,0,.25);
}

#introduzione{
    margin-left:275px;
    min-height:340px;
    text-align:justify;
}

/* =========================================================
   IMMAGINI
   ========================================================= */

.Immagine{
    text-align:center;
    margin:2rem 0;
}

.Immagine img{
    max-width:100%;
    height:auto;
    border-radius:8px;
    box-shadow:0 4px 15px rgba(0,0,0,.15);
}

.didascalia{
    display:block;
    margin-top:.7rem;
    color:var(--text-light);
    font-style:italic;
}

/* =========================================================
   MINIATURE
   ========================================================= */

.Miniatura{
    overflow:auto;
    margin:1rem 0;
}

.Miniatura img{
    float:left;
    width:250px;
    max-width:35%;
    margin:0 20px 10px 0;
    border-radius:6px;
    box-shadow:0 2px 10px rgba(0,0,0,.15);
}

/* =========================================================
   CITAZIONI
   ========================================================= */

.cit{
    background:#fafafa;
    border-left:5px solid var(--primary);
    padding:1rem 1.5rem;
    margin:2rem 0;
    color:#444;
    font-style:italic;
}

/* =========================================================
   TESTO EVIDENZIATO
   ========================================================= */

.solotesto{
    background:#fffff5;
    border:1px solid var(--border);
    border-radius:8px;
    padding:1rem;
    margin:2rem auto;
    width:100%;
    font-family:"Courier New", monospace;
    font-size:1.05rem;
    line-height:1.5;
}

/* =========================================================
   MENU NAVIGAZIONE DESKTOP
   ========================================================= */

#menu_nav,
#menu_nav2{

    position:fixed;

    right:10px;

    z-index:9999;

    background:rgba(255,255,255,.95);

    padding:5px;

    border-radius:6px;

    box-shadow:0 1px 8px rgba(0,0,0,.15);
}

#menu_nav{
    top:10px;
}

#menu_nav2{
    top:110px;
}

#menu_nav ul,
#menu_nav2 ul{

    list-style:none;

    margin:0;
    padding:0;

    display:flex;

    flex-direction:column;

    gap:3px;
}

#menu_nav li,
#menu_nav2 li{
    margin:0;
}

#menu_nav a,
#menu_nav2 a{

    display:block;

    min-width:80px;

    padding:5px 10px;

    background:var(--primary);

    color:#fff !important;

    border-radius:5px;

    font-size:.80rem;

    font-weight:600;

    text-align:center;

    text-decoration:none;
}

#menu_nav a:hover,
#menu_nav2 a:hover{

    background:var(--primary-hover);

    text-decoration:none;
}

/* =========================================================
   COLLEGATI
   ========================================================= */

#tabcollegati{
    width:100%;
    margin:2rem 0;
}

#tabcollegati ul{

    list-style:none;

    display:flex;
    flex-wrap:wrap;

    gap:1rem;

    margin:0;
    padding:0;
}

#tabcollegati li{

    width:260px;

    min-height:150px;

    background:#fff;

    border:1px solid var(--border);

    border-radius:8px;

    padding:1rem;

    box-shadow:0 2px 8px rgba(0,0,0,.08);
}

#tabcollegati li:hover{
    transform:translateY(-3px);
    transition:.2s;
}

#tabcollegati a{
    font-weight:bold;
}

/* =========================================================
   TABELLE
   ========================================================= */

table{
    width:100%;
    border-collapse:collapse;
    margin:1.5rem 0;
}

th,
td{
    border:1px solid #ccc;
    padding:8px;
}

th{
    background:#f2f2f2;
}

/* =========================================================
   FOOTER
   ========================================================= */

.footer,
.piede{
    clear:both;
    margin-top:3rem;
    padding-top:1rem;
    border-top:1px solid var(--border);
    color:#666;
}

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width:1024px){

    body{
        padding-right:20px;
    }

    #menu_nav,
    #menu_nav2{

        position:static;

        background:none;

        box-shadow:none;

        padding:0;

        margin:10px 0;
    }

    #menu_nav ul,
    #menu_nav2 ul{

        flex-direction:row;

        flex-wrap:wrap;

        justify-content:center;

        gap:6px;
    }

    #menu_nav a,
    #menu_nav2 a{

        min-width:auto;

        padding:6px 10px;

        font-size:.75rem;
    }
}

/* =========================================================
   SMARTPHONE
   ========================================================= */

@media (max-width:768px){

    body{

        font-size:16px;

        padding:15px;
    }

    h1{
        font-size:1.7rem;
    }

    h2{
        font-size:1.4rem;
    }

    #copertina{

        float:none;

        width:100%;

        max-width:320px;

        margin:0 auto 15px auto;
    }

    #introduzione{

        margin-left:0;

        min-height:auto;
    }

    #menu_nav,
    #menu_nav2{

        position:static;

        background:none;

        box-shadow:none;

        padding:0;

        margin:10px 0;
    }

    #menu_nav ul,
    #menu_nav2 ul{

        display:flex;

        flex-direction:row;

        flex-wrap:wrap;

        justify-content:center;

        gap:6px;
    }

    #menu_nav a,
    #menu_nav2 a{

        min-width:auto;

        padding:6px 10px;

        font-size:.75rem;
    }

    .Miniatura img{

        float:none;

        width:100%;

        max-width:100%;

        margin:0 0 15px 0;
    }

    #tabcollegati li{

        width:100%;
    }
}