@font-face {
  font-family: myFirstFont;
  src: url("..//Franciscus/Roman/otf/Franciscus-Bold.otf") format("opentype");
}
:root {

  --arancionechiaro: #d3d0c9;
    --azzurro: rgb(4, 140, 133);
    --azzurroTransparente: rgba(4, 140, 134, 0.63);
    --violaScuro:#2c2137;
--biancoTransparente: rgba(255, 255, 255, 0.5);
  --neon:#2c2137;
  --neonLess:#2c2137;
    --primary: var(--arancionechiaro);
    --secondary: var(--violaScuro);
    --btn: var(--viola);
    --text:var(--secondary);
  }
  

  







.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(--primary);
}






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

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

.btn-nav{
    /* From https://css.glass */
    font-family: 'myFirstFont';
    background: var(--boxColor);
    /* 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(--arancionechiaro);
    min-width: 86px;
       

      }
    
      .btn-body{max-width: max-content;}
    
    
    
      .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(--primary);
     min-width: 86px;
      }

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

      .active-nav{
        font-family: 'myFirstFont';
    /* From https://css.glass */
    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: var(--primary);
    min-width: 86px;
            
          }







    
      .btn-nav.active{
        background: var(--violaScuro);
        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: 991px){
      .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(--primary);
        }
      }


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

  @media (min-width: 991px){
    .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(44,33,55, 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(--boxColor);
  } 
    
  .nav-item{
    align-self: center;
  }