/* .box{
    background-color: rgba(6, 117, 111, 0.53);
    margin: 5px;
} */

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

:root {

  --arancionechiaro: #d3d0c9;
  --arancino:#eeb4a1;
  --arancione: #aa6969;
  --viola: #8d5676;
    --azzurro: rgb(4, 140, 133);
    --azzurroTransparente: rgba(4, 140, 134, 0.63);
    --violaScuro:#2c2137;
    --marrone:#4c2c2f;
    --arancioneScuro:#784563;
--biancoTransparente: rgba(255, 255, 255, 0.5);
  --neon:#2c2137;
  --neonLess:#2c2137;
    --primary: var(--arancionechiaro);
    --secondary: var(--violaScuro);
    --btn: var(--viola);
    --text:var(--secondary);
    --boxColor: var(--arancione);
  }
  

.portalImage{
  width: 100%;
  height: 100%;
  max-width: 350px;
  
 
}

.portal{
  box-shadow: rgba(62, 46, 240, 0.4) 0px 5px, rgba(62, 46, 240, 0.3) 0px 10px, rgba(62, 46, 240, 0.2) 0px 15px, rgba(62, 46, 240, 0.1) 0px 20px, rgba(62, 46, 240, 0.05) 0px 25px;
}

.portal2{
  box-shadow: rgba(0, 42, 255, 0.519) 0px 25px 20px -20px;
}


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





}

.box2{
/* From https://css.glass */
height: parent; 
background: var(--boxColor);





}
.boxRounded{
/* From https://css.glass */
height: parent; 
background: var(--boxColor);

border-top-left-radius: 16px;
border-top-right-radius: 16px;



}





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

.images{
    width: 100%;
    
}

.immagine-left{
  
  border-top-left-radius: 16px;
  border-bottom-left-radius: 16px;
  max-height: 400px;
  max-width: 400px;
;

}
.immagine-right{
  
  border-top-right-radius: 16px;
  border-bottom-right-radius: 16px;
    max-height: 400px;
  max-width: 400px;


}
  p{
      font-size: 0.65rem;
    }

 @media (min-width: 800px){
    .immagine-left,.immagine-right{
      border-radius: 16px;
    }
    p{
      font-size: 1rem;
    }
    h5{
      font-size: 28px;
    }
  }

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




body
{

background: var(--primary);
}


.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: 'myFirstFont';
    font-size: 2.5rem;
    color: var(--text);
    text-align: center;
    margin-top: 20px;
}
.box h3{
  font-family: 'myFirstFont';
  font-size: 2rem;
  color: var(--text);
  text-align: center;
  
}
h6,h5,h4,h3,h2,h1{
  font-family: 'myFirstFont';
 }

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

.a1{
    text-decoration: none;
    color: var(--arancione);
}




    
    



  .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(--primary);
       min-width: 86px;
        }
  
 .vertical-center {
    align-content: center;}


.card-text{
  max-width: 300px;
}