/* .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;
  --neonTrasparent:#8ae1e4b1;
  --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);
  
}





body
{

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






@media (min-width: 576px){
  .navbar li {
      margin-left : 0.5em;
      margin-right : 0.5em;
  }
}

@media (min-width: 768px){
  .navbar li {
      margin-left : 1em;
      margin-right : 1em;
  }
}

.btn-nav{
    /* From https://css.glass */
    background: var(--azzurroTransparente);
    /* 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(--neon);
    min-width: 86px;
      }
    
    
    
    
      .btn-nav:hover,.active-nav: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;
      }

      .btn-nav:hover a{
        color: var(--violaScuro);
      }

      .active-nav{
    /* From https://css.glass */
    background: var(--neonTrasparent);
    /* 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;
            
          }







    
      .btn-nav.active{
        background: var(--azzurro);
        box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
        backdrop-filter: blur(4.5px);
        -webkit-backdrop-filter: blur(4.5px);
        color: var(--bianco) !important;
        border-radius: 10px;
      }
      @media (max-width: 768px){
      .navbar  .btn-nav, .navbar .active-nav{
          margin-top: 40px;
          font-size: x-large;
          padding-top: .9rem;
      padding-bottom: .9rem;
      padding-left: .5rem;
      padding-right: .5rem;
      width: 300px;
        }

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


  @media (min-width: 576px){
    .navbar li {
        margin-left : 0.5em;
        margin-right : 0.5em;
    }
  }

  @media (min-width: 768px){
    .navbar li {
        margin-left : 1em;
        margin-right : 1em;
    }


  }

  .custom-toggler .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(138,225,228, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
  }
  
  .custom-toggler.navbar-toggler {
    
    background-color: var(--violaScuro);
  } 
    
  .nav-item{
    align-self: center;
  }