*
{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}



body
{
    overflow-x: hidden;
    background-color: #480ca8;
    font-family: 'Work Sans', sans-serif;
}


.container
{
    width: 100vw;
    height: 100vh;
}



/*Questa keyframes fa scorrere la nav-bar
da sinistra verso destra al caricamento della pagina*/
@keyframes SlideInFromLeft
{
    0%
    {
        transform: translateX(-100%);
    }

    100%
    {
        transform: translateX(0);
    }
}




nav
{
    width: 100%;
    position: fixed;
    top: 0;
    animation: 1.5s ease-out 0s 1 SlideInFromLeft;
}
/*
|
|
|
*/
nav .nav-bar
{
    width: 100%;
    padding: 6px;
    background-color: rgb(121, 82, 179);
    display: flex;
    justify-content: space-around;
    align-items: center;
}
/*
|
|
|
*/
/*Questa keyframes apre la navbar responsiva con una animazione*/
@keyframes OpenNavBarResponsive
{
    0%
    {
        transform: translateY(-100%);
    }

    100%
    {
        transform: translateY(0);
    }
}
/*
|
|
|
*/
/*Questa keyframes chiude la navbar responsiva con una animazione*/
@keyframes CloseNavBarResponsive
{
    0%
    {
        transform: translateY(0);
    }

    100%
    {
        transform: translateY(-100%);
        background-color: transparent;
    }
}
/*
|
|
|
*/
/*Questa classe serve per la chiusura a rallenty della nav,
ma è nascosta all'inizio*/
.for-close-responsive-nav-hidden
{
    width: 100%;
    height: 173px;
    background-color: rgb(121, 82, 179);
    position: fixed;
    top: 0;
    left: 0;
    display: none;
}
/*
|
|
|
*/
/*Questa classe serve per la chiusura a rallenty della nav,
e viene attivato alla pressione del bottone con la X
in alto a destra e la nav viene chiusa a rallenty*/
.for-close-responsive-nav
{
    display: block;
    transform:translateY(-100%);
    animation: 0.5s ease-out 0s 1 CloseNavBarResponsive;
}
/*
|
|
|
*/
/*
|
|
|
*/
/*Questa classe permette al bottone che apre e chiude
la nav-bar responsive di restare nascosto finchè la dimensione dello schermo
non diventa troppo piccola e si attiva la media query che fa visualizzare il bottone*/
.nav-bar .resp-nav
{
    display: none;
}
/*
|
|
|
*/
/*Questa classe attivata dopo che il bottone che apre e chiude
la nav-bar responsive viene premuto permette di visualizzare nuovamente
gli elementi che compongono la nav-bar*/
.nav-bar.responsive .home, .nav-bar.responsive .subscribe,
.nav-bar.responsive .login, .nav-bar.responsive .info, .nav-bar.responsive .search
{
    display: block;
}
/*
|
|
|
*/
/*Questa classe viene attivata quando il bottone
che apre e chiude la nav-bar responsive viene schiacciato
mette in colonna gli elementi della nav, li allinea al centro e
chiama l'animazione che fa aprire la nav-bar a rallenty*/
nav .nav-bar.responsive
{
    width: 100%;
    flex-direction: column;
    align-items: center;
    animation: 0.7s ease-out 0s 1 OpenNavBarResponsive;
}
/*
|
|
|
*/
/*Aggiustamenti grafici per le icone della nav bar*/
.nav-bar .login i:before, .nav-bar .subscribe i:before, .nav-bar .home i:before
{
    font-size: 1em;
    line-height: 1.25;
}
/*
|
|
|
*/
/*Aggiustamenti grafici per le icone della nav bar*/
.nav-bar .info i:before
{
    font-size: 0.8em;
    line-height: 1.4;
}
/*
|
|
|
*/
/*Aggiustamenti grafici per la scritta info della nav bar*/
.nav-bar .info span
{
    position: relative;
    right: 3px;
}
/*
|
|
|
*/
/*effetti grafici che aggiustano i link della nav bar*/
.nav-bar .home a, .nav-bar .subscribe a, .nav-bar .login a, .nav-bar .info a
{
    font-size: 160%;
    text-decoration: none;
    color: white;
    transition: background-color 1s;/*attivata con :hover*/
    transition: font-size 0.3s;/*attivata con :hover*/
}
/*
|
|
|
*/
@keyframes ColorHomeBotton
{
    0%
    {
        border: 2px solid #fae392;
        color: #fae392;
    }


    20%
    {
        border: 2px solid #ff6666;
        color: #ff6666;
    }


    80%
    {
        border: 2px solid #081924;
        color:#081924;
    }


    85%
    {
        border: 2px solid #016628;
        color:#016628;
    }


    90%
    {
        border: 2px solid #9c9a37;
        color:#9c9a37;
    }


    95%
    {
        border: 2px solid #0a1f3a;
        color: #0a1f3a;
    }


    100%
    {
        border: 2px solid #ffe484;
        color: #ffe484;
    }
}
/*
|
|
|
*/
.nav-bar .subscribe a:hover, .nav-bar .login a:hover, .nav-bar .info a:hover
{
    border-radius: 8px;
    padding: 2px;
    font-size: 170%;
    border: 2px solid #ffe484;
    color: #ffe484;
}
/*
|
|
|
*/
.nav-bar .home a
{
    border-radius: 8px;
    padding: 2px;
    border: 2px solid #ffe484;
    color: #ffe484;
}
/*
|
|
|
*/
.nav-bar .home a:hover
{
    color: white;
    border-color: white;
    border-radius: 8px;
    font-size: 180%;
    animation: 3.5s ease-out 0s 100000 ColorHomeBotton;
}
/*
|
|
|
*/
/*effetti grafici per la barra di ricerca della nav bar*/
.nav-bar .search input
{
    border: 2px solid #ffe484;
    color: #7209b7;
    background-color: white;
    border-radius: 5px;
    padding: 3px;
    font-size: 137%;
    transition: background-color 0.7s;/*attivata con :hover*/
}
/*
|
|
|
*/
.search .research input:hover
{
    background-color: #ffe484;
}
/*
|
|
|
*/
/*effetti grafici per il bottone di ricerca della nav bar*/
.nav-bar .search .button-search
{
    width: 3.3rem;
    border: 3px solid #ffe484;
    color: #7209b7;
    background-color: white;
    border-radius: 5px;
    padding: 3px;
    font-size: 137%;
    cursor: pointer;
    transition: background-color 0.7s;/*attivato con hover*/
}
/*
|
|
|
*/
.search .research .button-search:hover
{
    background-color: #ffe484;
}








/*content*/


main
{
    width: 100%;
    height: 100%;
}



 main .contenuto-page
{
    width: 100%;
    height: 100%;
    background-image: url("img/ciao.jpg");
    background-size: cover;
    background-position: center;
}


.layover
{
    width: 100%;
    height: 100%;
    background-color: rgba(215, 215, 215, 0.2);
}



.form
{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}



.nome, .cognome, .indirizzo, .CAP, .email, .password
{
    display: flex;
    flex-direction: column;
    margin: 8px;
}




.privacy-policy
{
    display: flex;
}



.privacy-policy label a
{
    font-size: 95%;
    color: #480ca8;
    font-weight: 700;
    text-align: center;
    padding-left: 4px;
}



.privacy-policy input
{
    margin-top: 3px;
}



.nome label, .cognome label, .indirizzo label, .CAP label, .email label, .password label
{
    text-align: center;
    font-size: 155%;
    color: #480ca8;
}



.nome input, .cognome input, .indirizzo input, .CAP input, .email input, .password input
{
    border: 2px solid #480ca8;
    color: #480ca8;
    border-radius: 5px;
    padding: 5px;
    font-size: 115%;
    transition: background-color 0.7s;
}



.nome input:hover, .cognome input:hover, .indirizzo input:hover, .CAP input:hover, .email input:hover, .password input:hover
{
    background-color: rgb(255, 228, 132);
}





.Bottoni
{
    display: flex;
    margin : 4px;
}




.Bottoni .Accedi, .Bottoni .Annulla
{
    margin: 8px;
}




.Bottoni .Accedi input, .Bottoni .Annulla input
{
    padding: 7px 12px;
    font-size: 135%;
    font-weight: 600;
    border: 2px solid #7209b7;
    border-radius: 7px;
    box-shadow: 2px 20px 10px #343a40;
}





.Bottoni .Accedi input
{
    transition: background-color 0.4s;
    transition: color 0.4s;
    transition: border 0.4s;
    background-color: #7209b7;
    color: white;
}





.Bottoni .Annulla input
{
    transition: background-color 0.4s;
    transition: color 0.4s;
    border: 2px solid #7209b7;
    color: #7209b7;
}




.Bottoni .Annulla input:hover
{
    background-color: #7209b7;
    color: white;
}




.Bottoni .Accedi input:hover
{
    background-color: white;
    color: #7209b7;
    border: 2px solid #7209b7;
}






/*media queries*/

@media only screen and (max-width: 950px)
{
    .nav-bar .login, .nav-bar .subscribe, .nav-bar .info,
    .nav-bar .search
    {
        display: none;
    }

    .nav-bar
    {
        justify-content: flex-start!important;
        position: relative;
    }

    .nav-bar .resp-nav
    {
        display: inline-block;
        position: absolute;
        top: 2px;
        right:20px;
    }

    .nav-bar .resp-nav i
    {
        font-size: 2.2em;
        color: white;
    }
}




@media only screen and (max-height: 620px)
{
    .nome label, .cognome label, .indirizzo label, .CAP label, .email label, .password label
    {
        font-size: 135%;
    }

    .nome input, .cognome input, .indirizzo input, .CAP input, .email input, .password input
    {
        font-size: 100%;
    }
}




@media only screen and (min-width: 1700px)
{
    .nome label, .cognome label, .indirizzo label, .CAP label, .email label, .password label
    {
        font-size: 175%;
    }

    .nome input, .cognome input, .indirizzo input, .CAP input, .email input, .password input
    {
        font-size: 150%;
    }
}