@font-face {
    font-family: Arciform Sans cyr-lat; /* Имя шрифта */
    src: url(../fonts/Arciform.otf); /* Путь к файлу со шрифтом */
   }
* {
  margin: 0;
  padding:0;
}
body {
  background: url(../img/fon.jpg);
  background-position: center;
  height: 100vh;
  width: 100vw;
  background-position: bottom;
  background-size: cover;
  margin: 0;
}

.logo {
    background: url(../img/logo.png) center no-repeat;
    width: 100vw;
    height: 60vh;
    margin: auto;
}

.main {
  text-align: center;
  padding-top: 5vh;
}

.main-field {
  width: 100vw;
  height: 100vh;
  margin:auto;
}

svg {
  border: solid 4px #092b6e;
  margin-top: 5vh;
  width: 700px;
  height: 550px;
}

.list-block {
  margin:auto;
}

.list {
  list-style: none;
  margin-top: -5vh;
}

.list li {
  padding: .1vw;
  width: 40vw;
  margin: auto;
  text-align: center;
}

.buttons {
  width: 40vw;
  max-width: 260px;
  height: 6vh;
  background-color: transparent;
  border: none;
  font-size: 4vh;
  font-family: Arciform Sans cyr-lat;
}
.buttons:hover {
  color: #e11930;
}

.main-menu-bottom{
  position: absolute;
  top: 10vh;
  left: 1vh;
}

.new-game-bottom {
  position: absolute;
  top: 20vh;
  left: 1vh;
  display: none;
}


.game-over{
  position: absolute;
  top: 30vh;
  left: 0;
  right: 0;
  margin: auto;
  margin:auto;
  font-size: 6vh;
  font-family: Arciform Sans cyr-lat;
  display: none;
}
 .game-over p{
   display:inline-block;
   width: 60vw;
   height: 10vh;
   padding-top: 3vh;
   background: gold;
   border: 2px solid red;
 }

 .records {
   text-align: center;
   font-family: Arciform Sans cyr-lat;
   font-size: 6vh;
   padding-top: 5vh;
 }

 .table {
   width: 40vw;
   text-align: center;
   font-family: Arciform Sans cyr-lat;
   margin: auto;
   margin-top: 5vh;
 }

 td {
   border: solid 2px black;
 }

 td:last-child,td:first-child  {
   width: 10vw;
   min-width: 5vw;
 }

 .save-record {
   width: 60vw;
   height: 50vh;
   position: absolute;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
   margin:auto;
   background-color: #dfdfe2;
   text-align: center;
   font-family: Arciform Sans cyr-lat;
   font-size: 6vh;
 }
 .save-record  span {
   display: block;
   padding: 4vh;
 }

 .name-field {
   font-size: 5vh;
   width: 55vw;
   height: 6vh;
 }

 .record-button{
   background-color: gold;
   border: solid 2px black;
   padding-top: 6vh;
   font-family: Arciform Sans cyr-lat;
   padding:0 5px;
   font-size: 6vh;
 }

 .record-background {
   display: none;
   position: absolute;
   width: 100vw;
   height: 100vh;
   background: grey;
   top: 0;
 }

 .new-level {
   display: none;
   position: absolute;
   width: 100%;
   height: 100vh;
   background-color: #dadada;
   text-align: center;
 }

 .new-level span{
   display: inline-block;
   margin-top: 40vh;
   font-family: Arciform Sans cyr-lat;
   font-size: 5vh;
   color: #e11930;
 }

.rotate-to-portrait {
   width: 100vw;
   height: 100vh;
   display: none;
   text-align: center;
   background-color: #dadada;
  }
  .rotate-to-portrait span{
    display: inline-block;
    margin-top: 40vh;
    font-size: 5vh;
    font-family: Arciform Sans cyr-lat;
  }

  .rules {
    text-align: center;
    padding-top: 30vh;
    font-size: 3vh;
    font-family: Arciform Sans cyr-lat;
  }

  .rules .title {
    font-size: 5vh;
    padding: 3vh;
  }

 @media screen and (orientation: portrait) and (max-width: 750px) {
   .logo {
       width: 100vw;
       height: 50vh;
       min-height: 350px;
       margin: auto;
       background-size: contain;
   }
   .list li {
     padding: .3vw;
     width: 50vw;
     margin: auto;
   }

   .buttons {
     width: 50vw;
     height: 5vh;
     background-color: transparent;
     border: none;
     font-size: 4vh;
     font-family: Arciform Sans cyr-lat;
   }

   .table {
     width: 90vw;
     font-size: 3vh;
   }

   .main-menu-bottom {
     top: 0;
     left: 0;
     right: 0;
     margin:auto;
   }

   .new-game-bottom {
     top: 50vh;
     left: 0;
     right: 0;
     margin:auto;
   }


   svg {
     width: calc(100vw - 20px);;
     height: calc(100vh - 50px);
     max-height: 550px;
   }

   .list li {
    padding-top: 1.5vh;
   }

   .save-record {
     width: 80vw;
     height: 22vh;
   }
}

@media screen and (orientation: landscape) and (max-width: 700px) {
  .logo {
    background: url(../img/logo-mobile.png) center no-repeat;
 }

   .buttons[value="New Game"] {
     display: none;
   }

}