@import url('https://fonts.googleapis.com/css2?family=Almendra:ital,wght@0,400;0,700;1,400;1,700&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Limelight&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Almendra:ital,wght@0,400;0,700;1,400;1,700&family=Bebas+Neue&family=Cormorant+Garamond:ital,wght@0,300..700;1,300..700&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Limelight&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Almendra:ital,wght@0,400;0,700;1,400;1,700&family=Bebas+Neue&family=Cherry+Swash:wght@400;700&family=Cormorant+Garamond:ital,wght@0,300..700;1,300..700&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Limelight&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');



body{
  color: white;
background-color: rgba(250, 248, 248, 0.976);
background-image:linear-gradient(to right,rgb(244, 238, 237), rgba(119, 2, 2, 0.927));

text-align:left;
font-size:20px;
font-family: Arial, Helvetica, sans-serif;
font-family: 'montserrat', sans-serif;
  }
  
  /*body.foto-citta{
    color: rgb(154, 3, 23);
  background-color: rgb(222, 224, 216);
  
  text-align:left;
  font-size:20px;
  font-family: Arial, Helvetica, sans-serif;
  font-family: 'montserrat', sans-serif;
  box-shadow: 0px 5px 10px 3px#efe8e8;

  }*/

  h1, h2{
    font-size: 70px;
    color: rgb(246, 243, 242); 
    font-family: "Bebas Neue", sans-serif;
  font-weight: 400px;
  font-style: normal;
  /*font trovato su google*/
  }
  
  h1{
    
    margin-top: 0px;
    margin-bottom: 0px;
  }
  h2{
    text-align: center;
    font-weight: normal;
    /*normale*/
    clear: both
    /*non fluttuare ne sx ne dx*/
    }
H3{
    text-align: center;
    font-weight: normal;
    /*normale*/
    clear: both
    /*non fluttuare ne sx ne dx*/
    
}

  /*h2.titolo-kekka{
    text-align: center;
     font-family: "Cherry Swash", serif;
     font-weight: bold;
  }*/
  h2.contenuto-calendario{
    text-align: center;
  }
  
  /*p.contenuto-kekka{
    color:white;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    margin-top: 80px;
     font-weight: normal;
    clear: both
  }*/
 
    h1.animate__animated{
    
    font-size: clamp( 2rem, 6 vm+ 1rem 5rem);
    line-height: 1.3; 
    text-align: center;
    text-transform: uppercase;
  }

    @supports (background-clip: text) or
             (-webkit-backgtound-clip: text )
             {
              h1.animate__animated {
    
                background-image: linear-gradient(to right,
                rgb(239, 236, 225), 
                #82e4f3,
                 rgb(83, 202, 33),
                 rgb(249, 242, 60));

               /*padding: 1rem;
                border: 20px solid rgba(87, 86, 85, 0.286) (255 255 / 50%);

                 background-clip: border-box;
                 background-clip: content-box;*/
                background-clip: text;

                --bg-size:200%;
                color:transparent;
                background-size: var(--bg-size);
                animation: animate 2s steps(5) infinite;
                animation: animate 2s linear infinite;
                animation: animate 2s ease infinite;
                     }
                      }
                      @keyframes animate{
                      /*from{
                        background-position: 0;
                      }*/
                      to{
                        background-position: var(--bg-size);
                      }
                      }
  h2.dentro-contenuto-articolo{
    text-align: center;
    font-size: 75px;
    --animate__infinite:	infinite;
  }
 

  div#contenitore-supremo,.LOGO-PROGRAMMA,div#contenuto-supremo-articolo,div#contenitore,div#foto-citta{
    /*background-color: rgb(209, 149, 220);*/
    max-width: 800px;
    margin: 120px auto 0px;
    /*il margine alto/basso e dx/sx*/
  }
  div#testata,div#contenuto, div#piedipagina,div#contenuto-supremo-articolo,div#contenitore,div#menu-navbar,div#logo-squadre,div#tastata-citta{
    padding: 25px;
  }

  div#testata,div#navbar-articolo,div#testata-citta,div#menu-navbar,#nabar-tx{
   background-color: #803641;
  
   margin: 20px 0px 20px;
    /*bordi all elemento*/
   border: 3px solid #393939;
   border-radius: 20px;
   box-shadow: 8px 5px 10px 3px#e4e7e2 ;
  }
  div#testata-citta{
    margin-top: 50px;
  }
  img.animate__animated{
      width: 40%;
      min-width:250px ;
      float: left;
      margin:0px 20px 20px 0px;
      border-spacing: 5PX; 
}
img.logo{
   width: 50%;
      min-width:250px ;
      float: left;
      margin:0px 20px 20px 0px;
}
/*img.logo-articolo{
      width: 100%;
      min-width:250px ;
      margin:0px 20px 20px 0px; 
}*/


div#navbar,div#navbar-articolo,div#navbar-tx,div#navbar-menu{
  text-align: center;
  color: rgb(22, 13, 1);
  background-color: #920a0aa5;
  width: 100%;
  margin: 0px;
  padding: 2px 20px;
  position: fixed;
  top: 0px;
  left: 0px;
  /*bordi all elemento*/
   
   box-shadow: 0px 0px 10px 3px#0b2101 ;
  }




div#piedipagina{
  color: white;
  background-color: #920a0aa5 ;
   background-image: linear-gradient(to top right, #9a060699);
   margin-top: 0px;
   margin-bottom: 50px;
   border: 2px solid #191403;
   border-radius: 20px;
   box-shadow: 0px 5px 10px 2px black;
}
div#testata:hover{
  box-shadow: 0px 0px 0px 0px#7f0303
}
  p.dentro-testata{
    font-weight: bold;
  /*grassetto*/
  margin-bottom: 0px;
  padding-bottom: 0px;
  /*tolto i margine dell elemento*/
   
}
p.dentropiedipagina{
  font-style:italic;
  /*testo incorsivo*/
 }
 p.dentro-contenuto{
  font-size:19px ;
 }
 /*img.foto-kekka{
  margin-bottom: 80px;
 }*/
  
 a.link,a.articolo,a.kekka,a.menu-navbar{
  color: rgb(250, 90, 90);
 font-weight: bold;
 text-decoration: none;
}
a.contenuto-navbar,a.menu-navbar{
  color: white;
  font-weight: bold;
  text-decoration: none;
  margin: 0px 10px 0px 0px;
  box-shadow: 0px 0px 10px 3px#0b2101;
}
a:hover{
  text-decoration: underline;
  color: #ebe3e4;
}

/*adattamenti per schermi smartphon*/
@media screen and (max-width:600px){

  div#contenitore-supremo,div#contenuto-supremo-articolo,div#logo-squadre,.contenitore,.contenitore-citta,.gallery.C-POTIERI,.C-DIFENSORI,.C-CENTROCAMPO,.C-ATTACCANTI{
   
   margin: 0px auto 0px;
   }
   img.logo,img.foto-citta{
  width: 100%;
  float: none;
  margin: 2px 0px;
}
div#testata{
  display: none;
}
div#contenuto,div#contenuto-articolo,div#contenitore-citta.gallery{
  margin-top: 20px;
}}

div#navbar ul {
margin: 0;
padding: 0;
list-style-type: none;
font-weight: bold;
}
div#nabar li{
width:100px;
float:left;
margin: 0;
padding: 0;
border-right: 1px solid rgb(240, 62, 157);
color:black;
}
div#navbar a{
display: block;
padding: 5px;
color: #000;
text-decoration: none;
}
div#navbar a:hover{

padding-left: 5px;
color: #f4f2f1;
text-decoration: none;
}
div#navbar li ul   { display: none;}
div#navbar li:hover ul{
 display: block;
position: absolute;
z-index:1;
width:150px;
padding: 15px;
margin: 0 0 0 -1px;
border:1px solid black;
background: rgb(240, 5, 17); 
}

div#navbar li li { border: none; width: 150%;}
div#navbar li li a{padding: 2px 2px 2px 10px;}


body.foto-citta,div.contenitore-citta,div#gallery,a.foto-citta,a.foto-fra,div#gallery-fra,.contenitore-citta,.gallery-citta{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family:Arial, Helvetica, sans-serif ;
}
a.foto-CITTA{
  text-align:center;
  color: #e4e7e2;
  

}

.contenitore,.contenitore-citta{
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 50px 8%;

}
.gallery{
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(250px,1fr));
  grid-gap:30px;

}
.gallery{
  width: 100%;
}
.gallery img {
width: 100%;
}

.gallery img{
width: 100%;
}
.gallery-fra img{
  width: 100%;
}
/*.gallery-fra{
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(250px,1fr));
  grid-gap:30px;
}*/
.gallery{
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(250px,1fr));
  grid-gap:30px;
}
Div#navbar-tx ul {
margin: 0;
padding: 0;
list-style-type: none;
font-weight: bold;
}
div#nabar-tx li{
width:100px;
float:left;
margin: 0;
padding: 0;
border-right: 1px solid black;
color:black;
}
div#navbar-tx a{
display: block;
padding: 5px;
color: #000;
text-decoration: none;
}
div#navbar-tx a:hover{

padding-left: 5px;
color: #f4f2f1;
text-decoration: none;
}
div#navbar-tx li ul   { display: none;}
div#navbar-tx li:hover ul{
 display: block;
position: absolute;
z-index:1;
width:150px;
padding: 15px;
margin: 0 0 0 -1px;
border:1px solid black;
background: rgb(240, 111, 5); 
}

div#navbar-tx li li { border: none; width: 150%;}
div#navbar-tx li li a{padding: 2px 2px 2px 10px;}
nav li {
text-align: center;
display: inline-block;
 border: 1px solid #f0ece0;
   border-radius: 5px;
   box-shadow: 0px 5px 10px 2px black;
}
table.C-PORTIERI {
text-align: center;
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 0PX;
}
table.C-DIFENSORI {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  width: 50PX;
  right: 50PX;
  border: 1px solid rgb(15, 1, 1);
  padding: 20px;
  text-align:center;
  font-weight: bold;
}

th {
  
  background-color: #590303;
}
.foto-rosa{
  
  width: 250px;
  right: 2000px;
  text-align: justify;
  

}

.foto-staff{
 width: 30%;
      min-width:250px ;
      float: left;
      margin:0px 20px 20px 0px;
      border-spacing: 5PX; 
}
TD{
  color: black;
}

.numero-giocatore {

  font-size: 2em;
  font-weight: bold;
  margin-right: 0px;  /*Spazio tra numero e foto */
  margin-bottom: 1px;
  color: #0b0b0b;

}

.giocatori{
  text-align:justify;
}