@font-face{
  font-family: "Outfit";
  src: url("/wp-content/uploads/fonts/Outfit-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face{
  font-family: "Gothic A1";
  src: url("/wp-content/uploads/fonts/GothicA1-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

body, button{
  font-family: "Gothic A1", sans-serif;
}

p,li{
  font-size: 15px;
  font-weight: 300;
}

#container{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.small_container{
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  background: ;
}

.dual_container{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
}

.title{
  font-family: "Outfit", sans-serif;
  font-size: 50px;
  font-weight: 700;
  margin: 20px;
}


.text_field{
  padding: 10px;
  
}
:root{
  --scale: 0.5;          /* scale par défaut */
  --container-h: 2050px; /* hauteur totale (gma + marge etc) */
}


.scale_container{
  display: flex;
  justify-content: center;
  background: ;
  height: calc(2050px*(var(--scale)));
}

#gma{
  transform-origin: top center;
  transform: scale(var(--scale));
  margin-top: 30px;
  position: relative;
  width: 350px;
  height: 1950px;
  border-radius: 50px;
  background: #171717;
  box-shadow: inset 0px 0px 15px grey;
}

#inn_out1{
  position: absolute;
  left: 155px;
  top: 1490px;
  width: 40px;
  height: 40px;
  background: white;
  border-radius: 20px;
}

#inn_out2{
  position: absolute;
  top: 4px;
  left: 4px;
  width: 32px;
  height: 32px;
  background: #171717;
  border-radius: 20px;
}

#inn_out3{
  position: absolute;
  top: 5px;
  left: 5px;
  width: 14px;
  height: 14px;
  background: #171717;
  border-radius: 20px;
  border: 4px solid white;
}

#inn_out4{
  position: absolute;
  top: 15px;
  left: 32px;
  width: 15px;
  height: 5px;
  background: white;
}

#inn_out5{
  position: absolute;
  top: 9px;
  left: -12px;
  width: 17px;
  height: 5px;
  background: white;
  border-top: 5px solid #171717;
  border-bottom: 5px solid #171717;
}



#outline1{
  position: absolute;
  left: 35px;
  top: 55px;
  width: 280px;
  height: 500px;
  background: none;
  border: 3px solid white;
  z-index:1;
  border-radius: 20px;
}

#outline2{
  position: absolute;
  left: 35px;
  top: 1355px;
  width: 280px;
  height: 108px;
  background: none;
  border: 3px solid white;
  z-index:1;
  border-radius: 20px;
}

.text_small_box{
  position: absolute;
  top: 1890px;
  left: 50px;
  width: 250px;
  height: 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: #171717;
  color: white;
  text-transform: uppercase;
  font-family: "Gothic A1", sans-serif;
  font-size: 20px;
  z-index:1; 
}

.text_small_box .text_input{
  position: absolute;
  width: 100%;
  height: 100%;
  z-index:2;
  opacity: 0%;
}

.text_large_box{
  position: absolute;
  top: 1495px;
  left: 210px;
  width: 100px;
  height: 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: #171717;
  color: white;
  text-transform: uppercase;
  font-family: "Gothic A1", sans-serif;
  font-size: 30px;
  z-index:1; 
}

.text_large_box .text_input{
  position: absolute;
  width: 100%;
  height: 100%;
  z-index:2;
  opacity: 0%;
}

.but_full_box{
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  background: #171717;
  width: 100px;
  height: 107px;
}

.but_text{
  width: 98px;
  height: 64px;
  background: #171717;
}

.text_input{
  position: absolute;
  width: 91px;
  height: 58px;
  z-index:2;
  opacity: 0%;
}

.button{
  display: flex;
  position: absolute;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 98px;
  height: 64px;
  background: #171717;
  border-radius: 15px;
  box-shadow: inset 0px 0px 5px #474747;
  color: white;
  text-transform: uppercase;
  font-family: "Gothic A1", sans-serif;
  font-size: 22.3px;
  z-index:1;
}


.indicator{
  z-index: 2;
  display : block;
  height : 0;
  width : 0;
  border-top : 18px solid white;
  border-right : 18px solid transparent;
  border-left : 18px solid transparent;
  background: #171717;

}



#encoder1{
  width: 160px;
  height: 160px;
  position: relative;
  left: 15px;
  top: 15px;
  background: #171717;
  border-radius: 80px;
  box-shadow: 0px 0px 5px #474747;
}

#encoder2{
  width: 190px;
  height: 190px;
  position: absolute;
  left: 80px;
  top: 1560px;
  background: #171717;
  border-radius: 95px;
  box-shadow: 0px 0px 15px #474747;
}

#backup{
  width: 100px;
  height: 100px;
  position: absolute;
  left: 125px;
  top: 1785px;
  background: red;
  border-radius: 50px;
  box-shadow: inset 0px 0px 5px grey;
}