body {
  background: #FFBC0D;
  color: black;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  font-family: speedee;
}

span{
  margin: 5px;
}
#playBtton {
  background: #DB0007;
  color: white;
  border-width: 0px;
  font-size: 60px;
  font-family: speedee;
  font-weight: bold;
  height: 100px;
  width: 200px;
  cursor: pointer;
  border-radius: 20px;
}

#loadAudio {
  font-size: 150%;
  background: #DB0007;
  color: white;
  justify-items: center;
  align-items: center;

  font-family: speedee;
  font-weight: bold;
  padding:2%;
  

  cursor: pointer;
  border-radius: 20px 20px 10px 10px;
  border: 5px dashed #fc761c;
  width: 200px;
}

#fileName{
  background-color: #DB0007;
  color: white;
  font-size: medium;
  font-family: speedee;
  font-weight: 500;
  border-radius: 5px 5px  10px 10px;
  padding: 10px;
}

#toneShiftContainer{
  display: none;
}
 p{
  font-size: 16px;
  font-weight: lighter;

  color: #FFBC0D;
 }
a{
  background-color: #DB0007;
  color: white;
  border-radius: 20px;
  padding: 20px;
  font-size: 120%;
  display: none;

}

#importAudioText{
  padding-left: 25px;
}

.fa-music:before {
  width: 100%;
  padding: 75px;
  align-self: center;
  content: "\f001";
}
audio {
  /* display: block; */
  display: none;
  /* min-width: 40px; */
  /* width: 80%; */
  margin: 1rem auto;
  color: #FFBC0D;
}
label{
  font-family: speedee;
  font-weight: bold;
}
form {
  align-items: center;
  justify-content: center;
}

div{
  width: 50%;
  font-weight: bold;
  cursor: pointer;
  border-radius: 20px;
  text-align:center;
  padding:2%;
  border: 2px solid black;
}

      #inputTag{
        display: none;      
      }
      label{
        font-size: 100%;
        cursor:pointer;
      }
      #imageName{
        color:#DB0007;
      }
      i{
        margin-top: 15px;
        width: 100%;
        height: 100%;
        justify-content: center;
      }
 



@font-face {
  font-family: speedee;
  src: url("./fonts/Speedee-Bold.ttf");
}

.valueLabel{
  color: #DB0007;
  font-size: 130%;
}

/* SLIDER ----------------------- */

.slider {
  margin-top: 15px;
  -webkit-appearance: none;
  width: 100%;
  height: 8px;
  border-radius: 5px;  
  background: #DB0007;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  border-radius: 50%; 
  background: #DB0007;
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #DB0007;
  cursor: pointer;
}