/* Testi*/
@import url('https://fonts.googleapis.com/css2?family=Poiret+One&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=Patua+One&display=swap');

/*
DEFAULT03 - menù orizzontale trasparente
*/

:root {
    --foreColorPrimary: #5d00b3;
    --foreColorTesti: #000000;
    --foreColorMenu: white;
    --foreColorMenuHover: #bcbcbc;
}

#menu li a {
    color: var(--foreColorPrimary);
    width: 106px;
}

    #menu li a:hover, #menu li a:active {
        color: var(--foreColorMenu);
        background-color: var(--foreColorPrimary);
    }

.showMenu {
    border: 2px solid var(--foreColorPrimary);
    color: var(--foreColorPrimary);
}

/**
 * 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);
}

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

.coloreMenu {
    background-color: transparent;
}

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

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

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

.voceMenu, .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 {
        font-weight: bold;
    }

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

.testiStyle, .testiStyle:hover, h4 {
    font-family: 'Poiret One', '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: 'Patua One', 'Century Gothic';
}