/* .box{
    background-color: rgba(6, 117, 111, 0.53);
    margin: 5px;
} */
:root {
    --azzurro: rgb(4, 140, 133);
    --azzurroTransparente: rgba(4, 140, 134, 0.63);
    --violaScuro:rgba(41,12,100,1);
--biancoTransparente: rgba(255, 255, 255, 0.5);
  --neon:#8AE1E4;
  --neonLess:#72a5c7;
    --primary: var(--azzurro);
    --secondary: var(--violaScuro);
    --btn: var(--viola);
    --text:var(--rosa)
  }
  







.font-title {
  font-family: "Big Shoulders Display";
  src: url("https://fonts.gstatic.com/s/bigshouldersdisplay/v4/ON7ruXb8fU1jDd2jLAs4j6zN.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  color:var(--neon);
  
}

.box{
/* From https://css.glass */
height: parent; 
background: var(--azzurroTransparente);
border-radius: 16px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(4, 140, 134, 0.4);


}
.row{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0 auto;
    padding: 0;
    width: 100%;
}

.images{
    width: 100%;
    
}

.immagine{
  
  border-top-left-radius: 16px;
  border-bottom-left-radius: 16px;

}

@media (max-width: 576px){
  .immagine{
    margin-top: 10px;
    border-radius: 16px;
    
  
  }
}




body
{

background: var(--azzurro);
background: linear-gradient(150deg, var(--azzurro) 0%, rgba(41,12,100,1) 100%);
}


.svgTop{
    position: absolute;
    width: 100%;
    height: 100%;   
    top: -350px;
    
    background-size: cover;
    background-position: center;
    z-index: -1;
}

.svgBottom{
    width: 100%;
    height: 100%;
    position: absolute;
;
    background-size: cover;
    background-position: center;
   
    z-index: -1;
}
.box h1{
    font-family: 'Big Shoulders Display', cursive;
    font-size: 2.5rem;
    color: #8AE1E4;
    text-align: center;
    margin-top: 20px;
}
.box h3, .box h6{
  font-family: 'Big Shoulders Display', cursive;
  font-size: 2rem;
  color: #8AE1E4;
  text-align: center;
  
}

.box h6{
  font-family: 'Big Shoulders Display', cursive;
  font-size: 1.5rem;
  color: #8AE1E4;
  text-align: center;
  
}


a{
    text-decoration: none;
    color: var(--neon);
}






    
    



  .box p{
    color: var(--neonLess);
    font-size: 0.9rem;
  }






  .page{
    max-width: 900px;
  }


 .btn-card{
  background: var(--violaScuro);
  /* border-radius: 16px;*/
  backdrop-filter: blur(3.1px);
  -webkit-backdrop-filter: blur(3.1px);
  
    border-width: 1px;
    border-style: solid;
    border-radius: 15px;
    color: white;
  min-width: 86px;
    }
    .btn-card:hover{
      /* From https://css.glass */
       background: var(--neonLess);
       /* border-radius: 16px;*/
       backdrop-filter: blur(3.1px);
       -webkit-backdrop-filter: blur(3.1px);
       
         border-width: 1px;
         border-style: solid;
         border-radius: 15px;
         color: var(--violaScuro);
       min-width: 86px;
        }
  
 .form-control{
    background: rgb(6 174 167 / 63%);
    border-radius: 16px;
    border: 1px solid var(--azzurro);
    color: var(--neon);
    font-size: 1rem;
    padding: 10px;}