/* =====================
   GENERALE
   ===================== */

html{

    scroll-behavior:smooth;

}


body {
    margin: 0;
    padding: 20px; 
    font-family: Garamond; 
    /*line-height: 1.6;*/
    color: #111; 

    background: linear-gradient(
        to bottom,

        #6cccf6 0%,
        #6cccf6 20%,

        
        #8aebff 30%,
        

        
        #abffff 50%,
        #c6ffff 70%,
        #e4ffff 90%,

        
        #ffffff 100%
    );

    background-repeat: no-repeat;
    background-attachment: fixed;
} 




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

header {
    background: #0b0f14; 
    font-size: 30px; 
    border-radius:8px; 
    padding: 8px; 
}
    

h1 {
    text-align:center; 
    color: #40C4FF; 
} 

h1::before {
    content:"";
    display:inline-block;
    width:30px;
    height:30px;
    border-radius:50%;
    background:red;
    margin-right:20px;
 
}

#menu a {
margin: 2px 0 1px 0; font-size:20px; display: block; color:#111; background:red; padding:15px; text-align:center; border-radius:12px; text-decoration:none; font-weight: none; 
letter-spacing: 0.04em; 
text-shadow: 0 1px 0 rgba(255,0,0,0.2); 
    
} 

#menu a:hover {
    background: #546E7A;
} 




#menu span { 
  
  font-size: 10px;
  background: yellow;
  color: #000;
  padding: 2px 4px;
  border-radius: 3px;
}



.new-label { 
    display: inline-block; 
    font-size: 10px;
    background: yellow;
    color: #000;
    padding: 2px 4px;
    border-radius: 3px;
    margin-left: 5px;
}



    






/* =====================
   CONTENUTO
   ===================== */

main { font-size:20px; } 



a { margin: 2px 0 1px 0; font-size:20px; display: inline-block; color:#fff; background:red; padding:15px; text-align:center; border-radius:12px; text-decoration:none; font-weight: 400; 
letter-spacing: 0.04em; 
text-shadow: 0 1px 0 rgba(255,0,0,0.2); 
    
} 

a:hover {
    background: #546E7A;
}


h2 { font-size: 30px;
        margin-bottom: 20px;
        text-align: center; 
}




/* =====================
   QUIZ
   ===================== */



#quiz { 
    
    max-width: 700px;
    margin: 40px auto;
    padding: 20px;
    font-family: Arial, sans-serif;
    text-align: center;
} 





#demand { 
    margin: 30px 0;
    font-size: 22px;
    font-weight: bold;
}

#risposte button {
    
    width: 100%;
    margin: 12px 0;
    padding: 15px;
    border: none;
    border-radius: 8px;
    background: #222;
    color: white;
    cursor: pointer;
    font-size: 22px; 
}

#risposte button:hover {
    background: #2a2a33;
}

#risultato {
    margin-top: 30px;
    font-size: 24px;
    font-weight: bold;
}







button { 
    display: inline-block; 
    width: 100%; 
    font-size: 22px; 
    padding: 12px;
    margin-top: 6px;
    border: 1px solid #333;
    background: #1c1c22;
    color: #fff;
    cursor: pointer;
    border-radius: 8px;
    transition: 0.2s; 

}

button:hover {
    background: #2a2a33;
    transform: scale(1.02);
}

.result {
    font-size:30px; 
    padding: 20px;
    background: #fff; 
    border-radius: 10px;
    border: 1px solid #333;
} 



.domanda{
    margin-bottom:25px;
}

button.test{ 
    display:inline-block; 
    width: auto; 
    margin-top: 6px;
    padding:12px; 
}


.top { text-align:right; } 

.top a {display:inline-block; } 


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

footer {
font-size:18px; color:#fafafa; margin-top: 40px; background: #0B0F14; padding:12px; border-radius:8px; 
}

footer a { font-size:18px; color:#fff; margin:0; padding:0; text-align:left; border-radius:0; text-decoration:none; 
}