@font-face {
    font-family: "titre_opti";
    src: url("../webfonts/Lora-Regular.ttf") format('truetype');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: "para_opti";
    src: url("../webfonts/Montserrat-VariableFont_wght.ttf") format('truetype');
    font-weight: 400;
    font-style: normal;
}
:root {
  --dark-primary: rgba(7, 1, 18, 1);
  --glasses_primary:rgba(7, 1, 18, 0.38);
  --dark-secondary: rgba(17, 13, 54, 1);
  --dark-semi-light: rgba(88, 67, 255, 1);
  --dark-light:rgba(255,255,255,1);
  --glasses_light:rgba(255,255,255,0.38);
  --dark-test:url("../../pictures/inspiration-geometry.png");
  --line_shiny:linear-gradient(90deg, rgba(2,0,36,0) 0%, rgba(255,255,255,0.8) 51%, rgba(255,255,255,0) 100%) bottom no-repeat;
  --line_shiny_color:linear-gradient(90deg, rgba(2,0,36,0) 0%, rgba(88, 67, 255,0.8) 51%, rgba(88, 67, 255,0) 100%) bottom no-repeat;
}
*{
   margin:0px;padding:0px;
   -webkit-box-sizing: border-box;box-sizing: border-box;
}
html, body{
   height:100%;width:100%;
   font-family: "para_opti";
   backround:black;
   overflow:hidden;
}
h1,h2,h3,h4{
  font-family: "titre_opti";
}
h1 {
  font-size: 8vmin;
}
h2 {
  font-size: 7vmin;
}
h3{
   font-size: 6vmin;
}
h4{
   font-size:5vmin;
}
p{
  font-size: 4vmin;
}
button{
   font-size:1.2em;
}
ol, ul{
  list-style-type:none;width:100%;height:100%;
}
li, button, i{
   font-family: "titre_opti";
   text-decoration:none;
   cursor:pointer;
   margin:1.5vmin;
   padding:1vmin;
      display:flex;
   flex-direction:row;
   align-items:center;
   justify-content:center;
}
li *, button *{
   margin:0vmin 1vmin;
}
/*FLEX
row: justify horizontale align vertical 
column: justify verticale align horizontale
*/
.row{display:flex;flex-direction:row;}
.column{display:flex;flex-direction:column;}
.center{align-items:center;justify-content:center;}
.top{align-items:flex-start;justify-content:flex-start;}
.bottom{align-items:flex-end;justify-content:flex-end;}
.column.top-center{align-items:center;justify-content:flex-start;}
.row.top-center{align-items:flex-start;justify-content:center;}
.column.bottom-center{align-items:center;justify-content:flex-end;}
.row.bottom-center{align-items:flex-end;justify-content:center;}
.between-center{align-items:center;justify-content:space-between;}
.around-center{align-items:center;justify-content:space-around;}
.evenly-center{align-items:center;justify-content:space-evenly;}
/*SIZE*/
.w-100{
   width:100%;
}
.h-100{
   height:100%;
}
.h-50{
   height:50%;
}
/*Theme color*/
.menu h4, .card h4{
   background: rgb(2,0,36);
   background: linear-gradient(90deg, rgba(2,0,36,0) 0%, rgba(255,255,255,0.8) 51%, rgba(255,255,255,0) 100%) bottom no-repeat;
   background-size:auto 2px; 
}
.dark.card{
padding:0px;margin:1.5vmin;max-width:80%;
}
h1.dark{
   background: var(--line_shiny);
   background-size:auto 2px;
}
.dark.card p{
   padding:1.5vmin;border-radius:0% 0% 6px 6px;color:var(--dark-secondary);
   height:100%;
   width:100%;
}
.dark h4, .dark h1, .dark h4 i
{
   color:var(--dark-light);padding:4vmin;
}
.dark h4, button.dark, .dark li{
   text-shadow:-1px -1px 1px black, 1px 1px 1px black;
}
.dark h4 i{
   border:4px outset var(--dark-semi-light);
}
.dark{
   background:var(--dark-primary);color:var(--dark-light);
}
.dark button{
   color:var(--dark-light);padding:1.2vmin;
}
.dark li{
   width:25%;
}
.dark li.active{
    /*animation: slider 1s 1;*/
    color:var(--dark-semi-light);
}
.dark li.no_active{
    color:var(--dark-light);
}
.dark.card i{
   background:var(--dark-light);color:var(--dark-semi-light);
   width:2vmax;
   height:2vmax;
   border-radius:50%;
}
h4.dark, p.dark{
   background:none;color:var(--dark-light);
}
.dark input{
   background:var(--dark-light);
}
#contact .dark div i{
   background:var(--dark-primary);
}
.glasses{
   background: var(--glasses_primary);
   box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
   backdrop-filter: blur(5px);
   -webkit-backdrop-filter: blur(5px);
   border: 1px solid rgba(19, 16, 53, 0.38);
}
.light{
   background: var(--glasses_light);
}
.speach{
   color:var(--dark-light);
   text-shadow:2px 2px 8px black;
}