@font-face {
  font-family: Digital;
  src: url("midiplayer/res/lcddot_tr.woff");
}
@font-face {
  font-family: Demon;
  src: url(fonts/demon.ttf);
}

.miditext {
    
    
overflow: clip;
  width: 465px;
  height: 42px;
  font-family: "Digital";
  color: #344032;
  font-size: 2.7rem;
  margin-top: 38px;
  margin-bottom: -16px;
    cursor:pointer;
     user-select: none;
   
}

.button {cursor:pointer; user-select: none;}
.oldmiditext{ overflow: clip;
    width: 465px;
    height:25px;
    font-family: "Digital";
    color: #344032;
    font-size: 2.7rem;
        margin-top: 39px;
    margin-bottom: 1px;}
canvas{
    width: 100%;
    min-height: 0;
    max-height: 40vh;
}

input[type='range']
{
    width: 94%;
}



.slider {
     margin-top: 23px;
    -webkit-appearance: none;
    width: 92%;
    height: 9px;
    background: #bed4a9;
    outline: none;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
}

.slider:hover {
  opacity: 1;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 10px;
  height:10px;
  background: #9dccd4;
  cursor: pointer;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
    input[type='range'] {
      overflow: hidden;
        width: 92%;
        -webkit-appearance: none;
        background-color: #bed4a9;
    }
    
    input[type='range']::-webkit-slider-runnable-track {
      height: 10px;
      -webkit-appearance: none;
      color: #13bba4;
      margin-top: -1px;
    }
    
    input[type='range']::-webkit-slider-thumb {
      width: 10px;
      -webkit-appearance: none;
      height: 10px;
      cursor: ew-resize;
      background: #434343;
      box-shadow: -450px 0 0 450px #344032;
    }

.example_content{
    width: 500px;
    height:200px;
    background-image: url("midiplayer/res/background.png");
    
    border-radius: 1rem;
    box-shadow: black 0 0 15px;
    
    flex-direction: column;
    align-items: center;
}