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

/*DEFAULT06 - menù verticale con sfondo trasparente*/

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

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

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

.coloreMenu, .titolo, .titolo:hover {
    color: var(--foreColorPrimary);
}

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

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

    .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(--foreColorTesti);
    }

    .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;
}

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

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

.testiStyle, .testiStyle:hover, h4 {
    font-family: 'Raleway:wght@200', 'Century Gothic';
}

.titolo, .titolo:hover, .voceMenu, h3, .titoliStyle, .coloreToggle, .titolo:active, .titoliStyle::selection, .titoliStyle:active, .titoliStyle::selection {
    font-family: 'Tenor Sans', 'Century Gothic';
}

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