/*DEFAULT02 - menù verticale con sfondo colorato
*/

/* Testi*/
@import url('https://fonts.googleapis.com/css2?family=Pridi:wght@200&display=swap');
/* Titoli*/
@import url('https://fonts.googleapis.com/css2?family=Jost:wght@500&display=swap');
/* Slider*/
@import url('https://fonts.googleapis.com/css2?family=Fjalla+One&display=swap');

/*
.allineaIntestazione {
    margin-top: 85px;
}

.testiStyle, .testiStyle:hover, .sliderStyle, .sliderStyle:hover, titoliStyle, titoliStyle:hover {
    color: black;
}

.titolo, .titolo:hover {
    color: white;
}

.coloreMenuV, .coloreMenuV:hover {
    color: white;
}

.coloreMenu, .coloreMenuV {
    background-color: #a27fab;
}

@media screen and (max-width: 899px) {
    .coloreToggle, .coloreToggle:hover {
        font-weight: bold;
        color: #666666;
    }

    .coloreMenu {
        background-color: transparent;
    }
}

@media screen and (min-width: 900px) {
    .coloreToggle, .coloreToggle:hover {
        font-weight: bold;
        color: #666666;
    }

    .coloreMenu, .coloreMenuV {
        background-color: #666666;
    }
}

.titolo, .titolo:hover, titoliStyle, .coloreToggle, .titolo:active, .titoliStyle::selection, .titoliStyle:active, .titoliStyle::selection {
    letter-spacing: 0.05em;
    font-size: 4vmin;
    font-style: normal;
    font-variant: normal;
    text-decoration: none;
    text-transform: uppercase;
    vertical-align: middle;
    font-variant: normal;
    font-family: 'Jost:wght@500', 'Century Gothic';
}

    .titolo:hover, .titoliStyle:hover {
        font-weight: bold;
    }

.sliderStyle, .sliderStyle:hover {
    font-family: 'Fjalla One', 'Century Gothic';
}

.testiStyle, .testiStyle:hover {
    font-family: Pridi, 'Century Gothic';
}

.voceMenu {
    color: #bcbcbc;
    font-family: Arial, 'Open Sans', sans-serif;
}

    .voceMenu:hover {
        color: white;
        font-weight: bold;
    }

.nav > ul > li > a:after {
    background: gray;
}

.voceMenu {
    color: #bcbcbc;
    font-family: Arial, 'Open Sans', sans-serif;
}

    .voceMenu:hover {
        color: white;
        font-weight: bold;
    }

.nav > ul > li > a:after {
    background: gray;
}
*/

:root {
    --foreColorPrimary: #a27fab;
    --foreColorTesti: black;
    --foreColorMenu: white;
    --foreColorMenuHover: #898989;
}

/**
 * Quando il checkbox è selezionato, impostare il colore di sfondo 
 */

[id='nav-toggle']:checked ~ .nav {
    background-color: var(--foreColorPrimary);
}

.testiStyle, .testiStyle:hover, .sliderStyle, .sliderStyle:hover, .titoliStyle, .titoliStyle:hover {
    color: var(--foreColorTesti);
}

.titolo, .titolo:hover, .titolo:active, .titoli::selection, .titoli::after, .titoli:visited {
    color: var(--foreColorMenu);
    background-color: var(--foreColorPrimary);
}

h2, h3, h4 {
    color: var(--foreColorTesti);
}

/* Colore del testo per lo slider, da utilizzare soltanto per i menù verticali*/

@media screen and (max-width: 899px) {
    .coloreToggle, .coloreToggle:hover {
        font-weight: bold;
        color: var(--foreColorMenu);
    }

    .coloreMenu, .coloreMenuV {
        background-color: transparent;
    }

    .voceMenu {
        color: var(--foreColorMenu);
    }

        .voceMenu:hover {
            color: var(--foreColorMenuHover);
            font-weight: bold;
        }
}

@media screen and (min-width: 900px) {
    .coloreToggle, .coloreToggle:hover {
        font-weight: bold;
        color: var(--foreColorMenu);
    }

    .coloreMenu, .coloreMenuV {
        background-color: transparent;
    }

        .coloreMenuV, .coloreMenuV:hover {
            color: var(--foreColorMenu);
        }

    .voceMenu {
        color: var(--foreColorMenu);
    }

        .voceMenu:hover {
            color: var(--foreColorMenuHover);
            font-weight: bold;
        }
}

.titolo, .titolo:hover, .titoliStyle, .coloreToggle, .titolo:active, .titoliStyle::selection, .titoliStyle:active, .titoliStyle::selection {
    letter-spacing: 0.05em;
    font-size: 4vmin;
    font-style: normal;
    font-variant: normal;
    text-decoration: none;
    text-transform: uppercase;
    vertical-align: middle;
    font-variant: normal;
}

    .titolo:hover, .titoliStyle:hover {
        font-weight: bold;
    }

.testiStyle, .testiStyle:hover, h4 {
    font-family: Pridi, 'Century Gothic';
}

.titolo, .titolo:hover, .voceMenu, h3, .titoliStyle, .coloreToggle, .titolo:active, .titoliStyle::selection, .titoliStyle:active, .titoliStyle::selection {
    font-family: 'Jost:wght@500', 'Century Gothic';
}

.sliderStyle, .sliderStyle:hover, h2 {
    font-family: 'Fjalla One', 'Century Gothic';
}