.wrapper_canvas{
  position: absolute;
  top: 2vw;
  right: 24vw;
  width: 75vw;
  max-width: 75vw;
  aspect-ratio: .5/1;
  border: 3px double #afafafd1;
  border-radius: .5vw;
}
#canvas_small{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  z-index: 11;
}
#canvas_big{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  z-index: 12;
}
canvas{
  image-rendering: -moz-crisp-edges;
  image-rendering: -webkit-crisp-edges;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}
  css-doodle {
  --rule: (
    @grid: 1 / 100%;
    @size: 1px calc(141.4% + 1px);
    transform: rotate(@p(±45deg));
    background: #AEACFB;
    margin: auto;
    opacity: .1;
  );
}
@font-face {
  font-family: VonDerLee;
  src: url(./font/VanDerLee5.ttf);
}
html {
  box-sizing: border-box;
   font-family: VonDerLee;
   font-size: 1.2vh;
}
*, *:before, *:after {
  box-sizing: inherit;
  -webkit-user-select: none;  /* Chrome all / Safari all */
  -moz-user-select: none;     /* Firefox all */
  -ms-user-select: none;      /* IE 10+ */
  user-select: none;          /* Likely future */
}
body{
  height: 100%;
  overflow: hidden;
  display: grid;
  color: lightgrey;
  background-color: black;
  margin: 0;
  padding: 0;
  align-content: center;
  justify-content: center;
  align-items: center;
  justify-items: center;
}

.fill_available{
  width: -webkit-fill-available;
  height: -webkit-fill-available;
  padding: 1.5vh 0;
}
.onscreen_gamepad_input{
  aspect-ratio: 1;
  background-color: #009688;
  border-radius: 50%;
  box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
  transition: all .05s;
  width: 18vw;
  max-width: 19vh;
}
.onscreen_gamepad_input:active{
  background-color: #4caf50;
  box-shadow: none;
  transform: translateY(.2vh);
}
.onscreen_gamepad_input label{
  color: white;
}
#gamepad_input_rotate, #gamepad_input_fall{
  padding: 2vw;
}
#onscreen_gamepad{
  background: none;
  //backdrop-filter: blur(2px);
  bottom: 0;
  border-radius: .5vw;
  display: none;
  grid-template-columns: repeat(5, auto);
  align-content:space-evenly;
  justify-content: space-around;
  justify-items: center;
  align-items: center;
  position: absolute;
  height: 19vh;
  left: 0;
  width: 100vw;
  z-index: 100;
}
.overlay{
  position: absolute;
  top: 2vw;
  right: 24vw;
  z-index: 0;
  display: none;
  grid-template-rows: repeat(1, auto);
  align-content:space-evenly;
  justify-content: space-around;
  justify-items: center;
  align-items: center;
  aspect-ratio: .5;
  width: 75vw;
  max-height: 75vh;
  border: 3px double #afafafd1;
  border-radius: .5vw;
  background: none;
  backdrop-filter: saturate(0.85) brightness(0.9);
}
.overlay button{
  background-color: #000000;
  border: 3px double #afafafd1;
  border-radius: .5vw;
  box-shadow: none;
  color: white;
  font-family: VonDerLee;
  font-weight: 500;
  font-size: 1.5rem;
  height: 5vh;
  padding: 1vw;
  width: 50vw;
  max-width: 30vh;
}
button.results{
  height: auto;
  display: grid;
  grid-template-columns: repeat(2, auto);
  justify-content: center;
  align-items: center;
}
.button_control.active{
  //background-color: lightslategray;
  background-color: #000000bf;
  border: 1px solid #ee03f4;
}
.overlay button:active{
    background-color: #ffffffa0;
  }
.overlay input{
  background-color: #000000;
  border: 3px double #afafafd1;
  border-radius: .5vw;
  box-shadow: none;
  color: white;
  font-family: VonDerLee;
  font-weight: 500;
  font-size: 2rem;
  font-size: 1.7rem;
  height: 3vh;
  padding: 1vw;
  width: 40vw;
  max-width: 27vh;
}
#music_changer{
  display: grid;
  grid-template-columns: repeat(3, auto);
  align-content: center;
  justify-content: center;
  justify-items: center;
}
button.button_music{
  width: 15vw;
  max-width: 10vh;
  height: 5vh;
}
button.button_music.focused{
  background-color: oldlace;
  color: black;
}
#level_changer{
  display: grid;
  grid-template-columns: repeat(5, auto);
  align-content: center;
  justify-content: center;
  justify-items: center;
}
button.button_level{
  width: 8vw;
  max-width: 6vh;
  height: 8vw;
  max-height: 6vh;
}
button.button_level.focused{
  background-color: oldlace;
  color: black;
}
.grid{
  position: absolute;
  top: 2vw;
  right: 24vw;
  z-index: 10;
  aspect-ratio: .5;
  display: grid;
  //grid-template-columns: repeat(10, auto);
  width: 75vw;
  max-height: 75vh;
  //transition: all .5s;
  border: 3px double #afafafd1;
  border-radius: .5vw;
}
.grid.hit {
  animation-name: hit-animation;
  animation-duration: .25s;
  animation-iteration-count: 1;
  animation-timing-function:ease-out;
  -webkit-animation: hit-animation .25 forward ease-out;
}
@keyframes hit-animation {
  from {  transform: translateY(.5vh)    }
  to   {  transform: translateY(0) }
}
@-webkit-keyframes hit-animation {
  from {  transform: translateY(.5vh)    }
  to   {  transform: translateY(0) }
}
.score{
  text-align: center;
  overflow-wrap: anywhere;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: absolute;
  z-index: 100;
  right: 2vw;
  width: 20vw;
  //max-width: 10vh;
  //box-shadow: -1px -1px 1vw 0px #afafafd1;
  background-color: #000000a0;
  border: 3px double #afafafd1;
  border-radius: .5vw;
  font-size: 1.5rem;
  color: white;
}
.score label{
  position: absolute;
  width: 17.5vw;
  height: 1.5vh;
  //margin-bottom: -5vh;
  transform: translateY(2vh);
  left: 1vw;
  padding: 1vh;
  color: darkgrey;
  box-shadow: none;
  background-color: #000000;
  z-index: 100;
  overflow: hidden;
  font-size: 1.5vh;
}
.score.punkte{
  top: 5vh;
  height: 5vh;
}
.score.level{
  top: 12vh;
  height: 5vh;
}
.score.zeilen{
  top: 19vh;
  height: 5vh;
}
.score.multi{
  display: block;
  top: 24vh;
  height: 2vh;
  width: 20vw;
  z-index: 10;
}
#multiplicator{
  height: 100%;
  background-color: #ffffffC8;
  width: 0%;
}
#multi{
  height: -webkit-fill-available;
}
.score.preview{
  top: 27vh;
  height: 6vh;
}
#preview{
  height: 6vh;
  //background-color: crimson;
  display: grid;
  grid-template-columns: repeat(4, auto);
  align-content: center;
  justify-content: center;
  justify-items: center;
}
.score.stats{
  top: 35vh;
  height: 6vh;
}
#stats{
  width: 100%;
  padding: 0;
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  align-content: flex-start;
}
#stats_1{
  background-color: #f94144;
  height: 100%;
}
#stats_2{
  background-color: #f8961e;
  height: 100%;
}
#stats_3{
  background-color: #f9c74f;
  height: 100%;
}
#stats_4{
  background-color: #90be6d;
  height: 100%;
}
#stats_5{
  background-color: #43aa8b;
  height: 100%;
}
#stats_6{
  background-color: #577590;
  height: 100%;
}
#stats_7{
  background-color: #f3722c;
  height: 100%;
}
#stats_8{
  background-color: #ffc6ff;
  height: 100%;
}
#stats_9{
  background-color: #8cbfcc;
  height: 100%;
}
.score.user{
  top: 43vh;
  height: 15vh;
}
#user_picture{
  height: -webkit-fill-available;
  width: -webkit-fill-available;
  max-height: 100%;
  max-width: 100%;
  aspect-ratio: 1;
}
#user_picture img{
  border-radius: .5vw;
  max-height: 100%;
  max-width: 100%;
  aspect-ratio: 1;
}
.score.input{
  display: grid;
  grid-template-columns: repeat(5, auto);
  top: 58vh;
  height: 3vh;
  width: 20vw;
  z-index: 10;
}
.score.time{
  display: block;
  top: 61vh;
  height: 2vh;
  width: 20vw;
  z-index: 10;
}
.input_display{
  width: 2vw;
  max-width: 1.5vh;
  height: 2vw;
  max-height: 1.5vh;
  background-color: grey;
  border-radius: 50%;
  margin: 1px;
  padding: 1px;
  font-size: initial;
  box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
  border: 1px solid grey;
}
.input_display.highlight{
  background-color: crimson;
  transform: translateY(.25vh);
  color: yellow;
  box-shadow: none;
}

.score.menu{
  top: 65vh;
  height: 6vh;
}
.score.menu:active{
  background-color: #ffffffa0;
}
#button_open_menu{
  display: block;
}
#button_close_menu{
  display: none;
}
.control{
  background-color: brown;
}
.box.preview{
  height: 2vw;
  max-height: 2vh;
  width: 2vw;
  max-width: 2vh;
}

.box.preview:nth-child(-n+4){
  height: .5vw;
  width: 2vw;
}
.box.preview.active{
  background-color: oldlace;
  transform:translate3d(0,0,0) scale3d(1,1,1);
}
.box{
  box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
  border-radius: .5vw;
  //transition: all .3s;
  //transition-timing-function: ease-out;
  //opacity: .8;
  z-index: 10;
}
.box.active{
  transform:translate3d(-1vw,-1vw,-1vw) scale3d(1,1,2.5);
}
.box.inactive{
  transition: all 3s;
  transition-timing-function: ease-out;
  transform:translate3d(0,0,0);
}
.box.blink {
  animation: blink-animation .5s steps(4, start) infinite;
  -webkit-animation: blink-animation .5s steps(4, start) infinite;
}
@keyframes blink-animation {
  to {
    visibility: hidden;
  }
}
@-webkit-keyframes blink-animation {
  to {
    visibility: hidden;
  }
}
.box.type_99{
  background-color: #696969aa;
  transform:translate3d(.25vw,.25vw,5vw) scale3d(.95,.95,1);
  //opacity: .5;
  z-index: 9;
}
.box.type_0{
  box-shadow: -1px -1px 1vw 0px #afafafd1;
  background-color: #000000a0;
  //background-color: none;
}
.box.type_1{
  background-color: #8c8a999c;
}
.box.tetronimo_0{
  background-color: none;
}
.box.tetronimo_1{
  background-color: #f94144;
}
.box.tetronimo_2{
  background-color: #f8961e;
}
.box.tetronimo_3{
  background-color: #f9c74f;
}
.box.tetronimo_4{
  background-color: #90be6d;
}
.box.tetronimo_5{
  background-color: #43aa8b;
}
.box.tetronimo_6{
  background-color: #577590;
}
.box.tetronimo_7{
  background-color: #f3722c;
}
.box.tetronimo_8{
  background-color: #bf6fb1;
}
.box.tetronimo_9{
  background-color: #8cbfcc;
}