body{
    background-color:white;
}

h1{
    color: #FFFFFF;
}

h2{
     color: white;    
}

h3,h4{
    color: white;
    
}

nav{
    background-color: #1E293B;
    display: flex;
    flex-direction: column;
    align-items: center;
}
header{
    background-color: #1E293B;
    display: flex;
    justify-content: space-around;
  
}

.container-immagini{
    
    width:80%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.container-immagini img{
    padding: 10px;
    height: 130px;
    width: 130px;
    border-radius: 45%;
}

header h3:hover{
    background-color: white;
    color:#1E293B;
    text-decoration: none;
}

header a{
    text-decoration: none;
}


header div{
    
    display: flex;
    flex-direction: column;
    align-items: center;
}

p{
    color:#1E293B;
    text-align: center;
    font-size: 20;
}



footer{
    background-color: #1E293B;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding:20px;
}

footer div{
    margin:20px;
}

#img_footer{
    height: 5%;
    width: 5%;
    border-radius: 45%;
}

.social-container {
    display: flex;
    gap: 50px; 
    align-items: center;
    
}

.social-container i{
    color: white;
    font-size: 35px;
}

#info_maestro_presidente{
    
    width:80%;
    display: flex;
    
    justify-content: center;
   
}

#info_maestro_presidente div{
    color:white;
    
    font-size: 20;
    
}

#info_maestro_presidente p{
    color:white;
}


#informazioni {
    color: white;
    font-size: 20px; 
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px; 
    

    overflow-wrap: break-word;
    word-break: break-word;
    
    width: 100%;            
    box-sizing: border-box; 
    padding: 10px;          
    text-align: center;     
}


#informazioni > div {
    max-width: 100%; 
}


#informazioni i {
    margin-right: 5px;
    flex-shrink: 0; 
}

@media (max-width: 1024px){
    
    nav h1{
        text-align: center;
    }
    header{
        display: block;

    }
    #img_footer{
        height: 8%;
        width: 8%;
        border-radius: 45%;
    }
    
}

@media (max-width: 610px){
    
#info_maestro_presidente{
    display: flex;
    flex-direction: column;
    justify-content: center;
    
    
}

.infomp{
    display: flex;
    flex-direction: column;
    align-items: center;
    
    
}

.telefono{
    width: 40%;
    
}

#info_maestro_presidente p{
    color:white;
}

#img_footer{
    height: 15%;
    width: 15%;
    border-radius: 45%;
}
#informazioni {
    text-align: center;      
    display: flex;
    flex-direction: column;  
    gap: 12px;               
    width: 100%;
    
    box-sizing: border-box;  
}


#informazioni > div {
    text-align: center;     
    color: #FFFFFF;         
    
}


#informazioni i {
   
    margin-right: 6px;      
    display: inline-block;  
}


#informazioni span {
    display: inline;        
}

}


@media (max-width: 576px){

    
#img_footer{
    height: 15%;
    width: 15%;
    border-radius: 45%;
}



#info_maestro_presidente{
    
    width:80%;
    display: flex;
    
    justify-content: center;
   
}

#info_maestro_presidente div{
    color:white;
    
    font-size: 20;
    
}

#info_maestro_presidente p{
    color:white;
}


#informazioni{
    color:white;
    font-size: 20;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align:justify;
   
    contain: content;

}

.telefono{
    width:100%;
    text-align: center;
}
}

@media (max-width: 400px){
 

#img_footer{
    height: 20%;
    width: 20%;
    border-radius: 45%;
}



#info_maestro_presidente{
    
    width:80%;
    display: flex;
    
    justify-content: center;
   
}

#info_maestro_presidente div{
    color:white;
    
    font-size: 12;
    
}

#info_maestro_presidente p{
    color:white;
    font-size: 12;
}


#informazioni{
    color:white;
    font-size: 12;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align:justify;
   
    contain: content;

}

.telefono{
    width:100%;
    text-align: center;
}

.posta{
    width: 90%;
}

}