body {
    touch-action: none;
    font-family: 'Nunito', sans-serif;
    background: url('../img/fon.png');
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
  html { 
    overflow: hidden; 
  }
  .h1DivCenter{
    display: none;
  }
  body *{
    transition: 300ms;
  }
  .fakeCanvas{
    z-index: 10;
  }
  canvas , .fakeCanvas{
    border: 5px solid #A6B2EC;
    border-radius: 2px;
    width: 58vh;
    height: 100vmin;
    top: 50%;
    margin-left: 50%;
    position: absolute;
    transform: translate(-50%, -50%);
    transition: 400ms;
  }
  canvas{
    background: url('../img/canvasN11.jpg') no-repeat;
    -moz-background-size: 100%; 
    -webkit-background-size: 100%;
    -o-background-size: 100%;
    background-size: 100%; 
  }
  .allNew{
    position: absolute;
    top: 65%;
    left: 9vw;
  }

  .h1_text{
    text-align: center;
    width: 25vw;
    height: 8vmin;
    z-index: 60;
    border-radius: 1vmin;
    background: rgba(255, 255, 255, 0.253);
    color: #00693E;
    margin-top: 14vmin;
    position: absolute;
    font-size: 3.5vw;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  #restartOpen, #openSettings, #start, #startMobile, #pause, #pauseMobile{
    width: 5.5vw;
    height: 5.5vw;
    border-radius: 1.7vw;
    outline: none;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  #restartOpen{
    background: #483D8B;
    border: 3px solid #61dede;
    margin-bottom: 1vmin;
  }
  #openSettings{
    background: #543964;
    border: 3px solid #EA8DF7;
    margin-bottom: 1vmin;
  }
  #start, #startMobile{
    background: #00693E;
    border: 3px solid #00FF7F;
    margin-bottom: 1vmin;
  }
  #pause, #pauseMobile{
    background: #00693E;
    border: 3px solid #00FF7F;
  }
  #startPauseDiv{
    position: absolute;
    top: 30%;
    left: 22vw;
  }
  .restartClass, #pauseSvg, #startSvg{
    width: 2.6vw;
    height: 2.6vw;
  }
  #settingsSvg{
    width: 2.2vw;
    height: 2.2vw;
  }
  .infoControl{
    position: absolute;
    top: 89vh;
    left: 5.5vw;
    color:#fff;
    opacity: 0.7;
    font-size: 1.3vw;
  }
  .oldControl{
    z-index: 10;
    top: 74%;
    left: 6vw;
    position: absolute;
  }
  .newControl button, .oldControl button, .newRotate, .fakeBlock{
    width: 5.5vw;
    height: 5.5vw;
    border-radius: 2vw;
    border: 3px solid #ffdc76;
    outline: none;
    background: #804d3b;
  }
  .fakeBlock{
    opacity: 0;
    visibility: hidden;
  }
  .newRotateDiv{
    margin-bottom: 5px;
  }
  .rotateSvg, .LeftSvg, .DownSvg, .RightSvg{
    width: 3.2vw;
    height: 3.2vw;
  }
  #newControlImg{
    width: 12vmin;
    height: 12vmin;
  }
  #secondRadio{
    margin-left: 35px;
  }
  #firstRadio{
    margin-left: 110px;
  }
  #scoreDiv{
    display: flex;
    position: absolute;
    top: 20%;
    left: 78%;
  }
  #recordDiv{
    position: absolute;
    top: 34%;
    left: 78%;
  }
  .score_h3, .record_h3{
    margin-left: -10vmin;
    font-size: 2.5vw;
  }
  .score_h3, .record_h3{
    border-radius: 0.5vw;
    color: #00FF7F;
    width: 15vw;
    height: 5vw;
    background: #003a1d;
    border: 0.2vw solid #00FF7F;
  }
  #score, #record{
    width: 5vw;
    height: 5vw;
    border-radius: 0.5vw;
    color: #00FF7F;
    background: #003a1d;
    border: 0.2vw solid #00FF7F;
    margin-left: 10px;
    font-size: 2.5vw;
  }
  #scoreDiv, #pauseSvg, .centerDiv, .dialogDiv, #recordDiv, 
  .h1_textCenter, .score_h3, .record_h3, #score, #record{
    display: flex;
    align-items: center;
    justify-content: center;
  }
  #oldControlImg{
    width: 115px;
    height: 75px;
    margin-left: 20px;
  }
  #mainStart{
    margin-top: 110%;
    margin-left: 40%;
    background: #00693E;
    border: 2px solid #00FF7F;
    outline: none;
    border-radius: 10px;
    width: 10vmin;
    height: 10vmin;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  #mainStartSvg, #startSvg, #pauseSvg, #setDialog button{
    fill: #f1ececee;
  }
  #mainStartSvg{
    width: 5vmin;
    height: 5vmin;
  }
  
  #setDialog{
    display: none;
    border: 0; outline: none;
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    padding-left: 50px;
    border-radius: 10px;
    width: 300px;
    background: #363232;
    color: #f4f4f4;
    z-index: 115;
  }
  #setDialog p {
    font-size: 18px;
    text-align: center;
    margin-left: -35px;
    font-family: 'Montserrat', sans-serif;
  }
  #startInPause{
    background: #00693E;
    outline: none; 
    border: 2px solid #00FF7F;
    border-radius: 8px;
    margin-top: 10px;
    margin-left: 5px;
    margin-right:15px;
    margin-bottom: 30px;
    width: 110px;
    height: 45px;
    color: #f4f4f4;
    font-size: 2.5vmin;
  }
  #restart{
    background: rgb(20, 123, 192);
    border: 2px solid #7adede;
    outline: none;
    border-radius: 8px;
    margin-top: 10px;
    margin-left: 20px;
    width: 45px;
    height: 45px;
    color: #f4f4f4;
    font-size: 14px;float: left;
  }
  #restartSvg{
    width: 21px;
    height: 21px;
    fill: #f1ececee;
  }
  #startInPauseSvg{
    width: 24px;
    height: 24px;
    fill: #f1ececee;
  }
  .absolute{
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0.6;
    position: absolute;
    display: none;
    z-index: 99;
  }
  #continText{
    margin-top: 1vmin;
  }
.showEnd{
    width: 250px;
    height: 280px;
    background: #2e2d2d;
    z-index: 1100;
    border-radius:8px;
    position: absolute;
    margin-left: 25px;
    margin: 0;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%) 
}
.showEnd p{
    font-size: 16px;
    margin-top: 30px;
    text-align: center;
    color: #f3e7e7;
}
.showEnd h1{
    margin-top: 15px;
    font-size: 50px;
    text-align: center;
    color: #51e651;
}
.showEnd button{
    color: #E5E5E5;
    border: 0; outline: none;
    border-radius: 5px;
    width: 110px;
    height: 35px;
    font-size: 15px;
    background: rgb(20, 123, 192);
}
#startMobile, #pauseMobile, .h1DivCenter, .mainStartCenter{
  display: none;
}
#startMobile, #pauseMobile{
  opacity: 0;
}
.crossBtn{
  position: absolute; 
  margin-left: 205px;
  cursor: pointer;
}
.mainText_label, .record_label, .score_label{
  margin-right: 5px;
}

@media (max-width: 1100px) {
  #startPauseDiv{
    left: 20vw;
  }
  #scoreDiv,#recordDiv{
    left: 80%;
  }
  .oldControl{
    left: 4vw;
  }
  .allNew{
    left: 6vw;
  }
}
@media (max-width: 1000px) {
  #startPauseDiv{
    left: 18vw;
  }
  #scoreDiv,#recordDiv{
    left: 81%;
  }
  .oldControl{
    left: 2vw;
  }
  .allNew{
    left: 4vw;
  }
}
@media (max-width: 900px) {
  #startPauseDiv{
    left: 16vw;
  }
  #scoreDiv,#recordDiv{
    left: 80%;
  }
  .oldControl{
    left: 1.5vw;
  }
  .allNew{
    left: 2vw;
  }
}
@media (min-width: 800px) {
  @media (max-height: 500px) {
    .h1_text{
      width: 50vh;
      height: 10vh;
      font-size: 7vh;
      margin-top: 18vh;
    }
    .newControl button, .oldControl button, .newRotate, .fakeBlock{
      width: 12vh;
      height: 12vh;
      border-radius: 4vh;
      border: 0.8vh solid #ffdc76;
      outline: none;
      background: #804d3b;
    }
    .rotateSvg, .LeftSvg, .DownSvg, .RightSvg{
      width: 7vh;
      height: 7vh;
    }
    .score_h3, .record_h3{
      color: #00FF7F;
      width: 35vh;
      height: 12vh;
      background: #003a1d;
      border: 0.5vh solid #00FF7F;
      font-size: 6vh;
    }
    #score, #record{
      width: 12vh;
      height: 12vh;
      border-radius: 1vh;
      color: #00FF7F;
      background: #003a1d;
      border: 0.5vh solid #00FF7F;
      margin-left: 10px;
      font-size: 6vh;
    }
    .record_h3, #record{
      margin-top: 2vh;
    }
    #restartOpen, #openSettings, #start, #startMobile, #pause, #pauseMobile{
      width: 13vh;
      height: 13vh;
      border-radius: 4vh;
    }
    .restartClass, #pauseSvg, #startSvg{
      width: 4.7vh;
      height: 4.7vh;
    }
    #settingsSvg{
      width: 4.1vh;
      height: 4.1vh;
    }
    #scoreDiv{
      display: flex;
      position: absolute;
      top: 20%;
      left: 75%;
    }
    #recordDiv{
      position: absolute;
      top: 34%;
      left: 75%;
    }
  }
  @media (max-height: 380px) {
    .h1_text{
      width: 50vh;
      height: 10vh;
      font-size: 7vh;
      margin-top: 18vh;
    }
    .newControl button, .oldControl button, .newRotate, .fakeBlock{
      width: 15vh;
      height: 15vh;
      border-radius: 5vh;
      border: 3px solid #ffdc76;
      outline: none;
      background: #804d3b;
    }
    .rotateSvg, .LeftSvg, .DownSvg, .RightSvg{
      width: 9vh;
      height: 9vh;
    }
    .score_h3, .record_h3{
      color: #00FF7F;
      width: 40vh;
      height: 15vh;
      background: #003a1d;
      border: 0.5vh solid #00FF7F;
      font-size: 7vh;
    }
    #score, #record{
      width: 15vh;
      height: 15vh;
      border-radius: 1vh;
      color: #00FF7F;
      background: #003a1d;
      border: 0.5vh solid #00FF7F;
      margin-left: 10px;
      font-size: 7vh;
    }
    .record_h3, #record{
      margin-top: 5vh;
    }
    #restartOpen, #openSettings, #start, #startMobile, #pause, #pauseMobile{
      width: 15vh;
      height: 15vh;
      border-radius: 1.7vw;
    }
    .restartClass, #pauseSvg, #startSvg{
      width: 5vh;
      height: 5vh;
    }
    #settingsSvg{
      width: 4.5vh;
      height: 4.5vh;
    }
  }
}
@media (max-width: 800px) {
      canvas , .fakeCanvas{
        width: 45vh;
        height: 77vh;
        border: 5px solid #A6B2EC;
        margin-top: 1vh;
        transform: translateX(0);
        margin-left: 0;
        position: relative;
      }
      
      .canvasCenter, .allNewCenter, .h1DivCenter, .oldControlCenter,
      .allNewCenter, .mainStartCenter{
        display: flex;
        align-items: center;
        justify-content: center;
      }
      #mainStartSvg{
        width: 4.5vh;
        height: 4.5vh;
      }
      .mainStartMobile{
        position: absolute;
        background: #00693E;
        border: 2px solid #00FF7F;
        outline: none;
        border-radius: 2.5vh;
        width: 9vh;
        height: 9vh;
        margin-top: -30vh;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .fakeCanvas, .infoControl, .h1_text{
        display: none;
      }
      .allNew{
        position: relative;
        top: 5px;    
        left: 0;
        transform: translateX(0%);
      }
      .h1_mobile{
        color: #00693E;
        position: absolute;
        margin-top: 12vh;
        font-size: 4vh;
        z-index: 50;
      }
      .mobilePanel{
        position: absolute;
        top: 0;
        margin-top: 2.6vh;
        left: 50%;
        transform: translateX(-50%);
      }
      .static{
        position: absolute;
        left: 50%;
        margin-right: -50%;
        transform: translate(-50%, -50%);
        margin-top: 5vh;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .score_h3, .record_h3{
        width: 0;
        height: 0;
      }
      .record_h3{
        margin-left: 5vh;
      }
      #record{
        margin-left: 25vh;
      }
      #score{
        margin-left: -16vh;
      }
      .score_h3{
        margin-left: -30vh;
      }
      #score, #record{
        width: 0;
        height: 0;
        position: absolute;
      }
      #scoreDiv{
        position: relative;
        top: -70vh;
      }
      #recordDiv{
        top: -70vh;
        position: relative; 
      }
      #startPauseDiv{
        display: none;        
      }
      .mobilePanel button{
        position: relative;
        z-index: 50;
      }
      #startMobile, #pauseMobile{
        border: 1px solid #00FF7F;
        width: 5.5vh;
        height: 5.5vh;
        border-radius: 1vh;
        margin-left: 35vh;
        opacity: 1;
      }
      #restartOpenMobile{
        margin-right: 0.5vh;
      }
      .restartClass, #settingsSvg{
        width: 2.5vh;
        height: 2.5vh;
      }
      #startSvg, #pauseSvg{
        width: 2.8vh;
        height: 2.8vh;
      }
      #oldControlImg{
        width: 95px;
        height: 65px;
        margin-left: 35px;
      }
      #newControlImg{
        margin-left: 10px;
        width: 60px;
        height: 60px;
      }
      #setDialog #textCont, #setDialog .sounds_p{
        margin-left: 0px;
      }
      .music_label, .effects_label{
        font-size: 16px;
      }
      #continText{
        margin-top: 2px;
        font-size: 12px;
      }
      #startInPause{
        margin-bottom: 20px;
        font-size: 3vh;
      }
      .score_h3, .record_h3, #score, #record{
        font-size: 3.4vh;
        border: 0px solid #003a1d; background: #ffffff00;
        color: #00693E;
      }
      .crossBtn{
        margin-left: 180px;
      }
      .oldControl{
        position: relative;
        top: 2.3vh;    
        left: 0;
        transform: translateX(0%);
        margin-left: 0;
      }
      .newControl button, .newRotate, .fakeBlock, .oldControl button{
        width: 9vh;
        height: 9vh;
        border-radius: 3vh;
      }
      .newControl button, .newRotate, .fakeBlock{
        width: 8.4vh;
        height: 8.4vh;
      }
      .rotateSvg, .LeftSvg, .DownSvg, .RightSvg{
        width: 5vh;
        height: 5vh;
      }
      #setDialog{
        padding-left: 25px;
        width: 250px;
      }
      #setDialog p{
        font-size: 15px;
      }
      .turnRecord{
        margin-right: 10px;
      }
}