/* Vari non utilizzati*/
@import url(https://fonts.googleapis.com/css?family=Hind);
/*--- Body Font --*/
@import url(https://fonts.googleapis.com/css?family=Nobile);
/*--- Heading Font --*/

/* Testi*/
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@200&display=swap');
/* Titoli*/
@import url('https://fonts.googleapis.com/css2?family=Syncopate&display=swap');
/* Slider*/
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@900&display=swap');

/*
DEFAULT - menù con sfondo colorato
*/

:root {
    --foreColorPrimary: #000000;
    --foreColorTesti: #000000;
    --foreColorMenu: white;
    --foreColorMenuHover: #676767;
    --fontTesti: 'Raleway', 'Roboto', 'Century Gothic';
    --fontTitoli: Syncopate, 'Jost', Audiowide, 'Bree Serif', 'Century Gothic';
    --fontSlider: Orbitron, 'Fjalla One', 'Patua One', 'Century Gothic';
}

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

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

#contenitoreMenu {
    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(--foreColorMenu);
}

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

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

@media screen and (max-width: 899px) {
    .allineaIntestazione {
        margin-top: 82px;
    }
}*/

/*.testiStyle, .testiStyle:hover, .sliderStyle, .sliderStyle:hover, .titoliStyle, titoliStyle:hover {
    color: #000000;
}
    
.coloreMenu, .titolo, .titolo:hover {
    color: white;
}
*/
/* Colore del testo per lo slider, da utilizzare soltanto per i menù verticali*/

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

.coloreMenu {
    background-color: #000000;
}
*/
.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;
}

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

    .titolo, .titolo:hover, .voceMenu, h3, .titoliStyle, .coloreToggle, .titolo:active, .titoliStyle::selection, .titoliStyle:active, .titoliStyle::selection {
        font-family: Syncopate, 'Jost', Audiowide, 'Bree Serif', 'Century Gothic';
    }

    .titolo:hover {
        font-weight: bold;
        text-decoration: none;
    }

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

/*h2, h3, h4 {
    color: #000000;
}
*/