@font-face {
  font-family: 'bouncer_mono_font';
  src:  url('./assets/GT-Cinetype-Light.woff2') format('woff2'),
        url('./assets/GT-Cinetype-Light.woff') format('woff');
}


body {
  font-family: 'bouncer_mono_font', Fallback, monospace;
  color: rgb(0, 250, 200);
  background-color: rgb(15, 40, 35);
}

h1{
  font-family: 'bouncer_mono_font', Fallback, monospace;
  letter-spacing: 2.5px;
  line-height: 160%;
  font-size: 40px;
}

#main_title{
  text-align: center;
  line-height: 1.5em;
  max-width: 350px;
  margin-bottom: 70px;
}


#headline_active{
  margin-top: 230px;
  letter-spacing: 2.5px;
  line-height: 150%;
  font-size: 38px;

}

#explanation_training{
  font-size: 18px;
  max-width: 400px;
  letter-spacing: 1.7px;
  line-height: 160%;
  text-align: center;
}

#explanation_active{
  font-size: 18px;
  letter-spacing: 2px;
  line-height: 160%;
  margin-bottom: 80px;
}

#main_container{
  max-width: 1400px;
  min-height: 900px;
  margin: auto;
  margin-top: 100px;

  display: flex;
  background-color: rgb(15, 40, 35);
}

#left_UI_container{
  padding:30px;
 min-width: 500px;
 min-height: 900px;
 background-color: rgb(15, 40, 35);
 display: flex;
 flex-direction: column;
 align-items: center;
}

#left_UI_container_bouncer_active{
  padding:30px;
 min-width: 500px;
 min-height: 900px;
 background-color: rgb(15, 40, 35);
 flex-direction: column;
 align-items: center;
 display: none;
}



#right_p5js_container{
  min-width: 900px;
  min-height: 900px;
  background-color: rgb(15, 40, 35);

 }

 #add_image_box{
   margin-top: 20px;
   margin-bottom: 20px;
  display: flex;
  flex-direction: column;
   align-items: center;


 }

 input {
  color: rgb(0, 250, 200);
  font-family: 'bouncer_mono_font', Fallback, monospace;
  text-align: center;

  width: 350px;
  font-size: 30px;
  border-top-style: hidden;
  border-right-style: hidden;
  border-left-style: hidden;
  border-bottom-style: groove;
  background-color: rgb(69, 89, 83);
}

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: rgb(164, 164, 164);
  font-family: 'bouncer_mono_font', Fallback, monospace;
  font-size: 20px;

}
::-moz-placeholder { /* Firefox 19+ */
  color: rgb(192, 192, 192);
  font-family: 'bouncer_mono_font', Fallback, monospace;

}
:-ms-input-placeholder { /* IE 10+ */
  color: rgb(182, 182, 182);
  font-family: 'bouncer_mono_font', Fallback, monospace;

}

.no-outline:focus {
  outline: none;
}

input[type=range][orient=vertical]
{
    writing-mode: bt-lr; /* IE */
    -webkit-appearance: slider-vertical; /* Chromium */
    width: 80px;
    height: 255px;
    padding: 0 5px;
    background: url('./images/knob.png');

}




.btn {
  color: #00fac8;
  background-color: rgb(24, 52, 46);
  border-color: #00fac8;
  border-style: solid;
  border-width: 2px;
  
  font-family: 'bouncer_mono_font', Fallback, monospace;
  font-size: 20px;
  position: relative;
  padding: 15px 30px;
  /* -webkit-box-shadow: 2px 2px 0 rgb(179, 179, 179);
  -webkit-box-shadow: 2px 2px 0 rgb(179, 179, 179); */
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  margin: 0 10px 0 0;
}

.btn:hover {
  background-color: rgb(4, 104, 83);
}

.btn:active {
  background-color: rgb(22, 27, 26);

}


  video{
    width: 300;
    height: 300;
  }
  p{
    display: inline;
    font-size: 14px;
  }