/*  
===============================
GLOBALI    
===============================
*/

*{
    padding:0em;
    margin:0em
}

:root{
    --bgcolor:#f5f5f7;
    --titlecolor:#400093;
    --txtcolor:#481f7e;
    --colorlink:#fff;
    --hoverlink:#9856D8;
    --visitedlink:#fff;
    --linkbgcolor:#7c06ee;
    --bglogo: #fff;
    --bordercolor:#400093;
    --articlecolor:#7c51b3;
    --bgsection:#ede9f0;
    --bgarticle:#e4dde8;

}

/*  
===============================
BODY    
===============================
*/

html,body{ 
    font-size:100%;
    font-family: "Lexend", Roboto, sans-serif;
    line-height: 1.4em;
    scroll-behavior: smooth;
}

body{
    background-color: var(--bgcolor);
    color: var(--txtcolor);
    max-width: 1200px;
    margin: auto;
}

body h2{
    font-size:1.7em;
    color: var(--txtitle);
    text-align: center;
    line-height: 1.2em;
}

#descrizione{
    margin: 1.2em 2.5em;
}


/*  
===============================
HEADER    
===============================
*/

header h1{
    background-image: url("img/logo.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    text-indent: -9999em;
    font-size: 10em;
    line-height: 1.5em;
    margin: 0.2em;
}

header{
    background-color: var(--bglogo);
    border-radius: 2em;
}


/*  
===============================
LINK    
===============================
*/

#github{
    margin:2.5em;
    font-weight: bold;
    text-align: center;
}

#github a{
    text-decoration: none;
    background-color: var(--linkbgcolor);
    transition-duration: 0.4s;
}

#github a:link{
    color:var(--colorlink);
    text-decoration: none;
    background-color: var(--linkbgcolor);
    border-radius: 2em;
    padding: 1em 2.2em;
}

#github a:visited{
    color:var(--visitedlink);
}

#github a:hover{
    background-color:var(--hoverlink);
}

#menu{
    display: flex;
    justify-content: space-between;
    text-align: center;
    font-size: 0.9em;
    margin: 0.5em 0em;
    background-color: var(--bgarticle);
    border-radius: 5em;
}

#menu a{
    transition-duration: 0.4s;
    background-color: transparent;
    padding: 0.2em 0.5em;
    border-radius: 5em;
    width: 100%;
}

#menu a:link,
#menu a:active{
    color:var(--txtcolor);
}

#menu a:hover{
    color: var(--colorlink);
    background-color: var(--hoverlink);
    font-weight: bold;
}

li a{
    color:var(--titlecolor);
}

li a:visited{
    color:var(--hoverlink);
}


/*  
===============================
MAIN    
===============================
*/

article{
    background-color: var(--bgarticle);
    border-radius: 2em;
    padding: 0.5em;
}

article section{
    background-color: var(--bgsection);
    border-radius: 1.5em;
    margin: 1em;
    padding: 0.5em;
}

section ul{
    margin:0.5em 3em;
}

section label{
    margin:0em 1.5em;
    font-size: 1.2em;
    font-weight: bold;
    color: var(--articlecolor);
}

.docs{
    border-bottom: solid var(--bordercolor) 0.1em;
    display: block;
    margin-left: 1.2em;
    margin-right: 1.2em;
}

.docs h3{
    color: var(--articlecolor);
    font-size: 1.5em;
    margin: 0em 1.5em;
    padding: 0.4em 0em;
}

/*  
===============================
FOOTER    
===============================
*/

footer{
    text-align: center;
    padding: 0.5em;
}

footer p {
    margin-bottom: 1em;
}