@import url('https://fonts.googleapis.com/css2?family=New+Tegomin&display=swap');
 * {
     padding: 0;
     margin: 0;
 }
 
 body {
     background-color: cornflowerblue;
     background-image: url("../img/op.jpg");
     /*background-image: linear-gradient(45deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);*/
     background-repeat: no-repeat;
     background-size: cover;
 }
 
 .body {
     min-height: 96vh;
     background-size: 100vw 150vh;
     background-repeat: no-repeat;
     display: flex;
     justify-content: center;
     align-items: center;
     overflow-y: hidden;
 }
 
 #scoreBox {
     color: aliceblue;
     position: absolute;
     top: 40px;
     left: 20px;
     font-size: 30px;
     font-weight: bold;
     font-family: 'New Tegomin', serif;
 }
 
 #highscoreBox {
     color: aliceblue;
     position: absolute;
     top: 80px;
     left: 20px;
     font-size: 30px;
     font-weight: bold;
     font-family: 'New Tegomin', serif;
 }
 
 #board {
     background: linear-gradient(rgb(9, 201, 9), rgb(9, 201, 9));
     width: 90vmin;
     height: 92vmin;
     border: 4px solid yellow;
     border-radius: 5px;
     display: grid;
     grid-template-rows: repeat(18, 1fr);
     grid-template-columns: repeat(18, 1fr);
     position: absolute;
 }
 
 .head {
     background: linear-gradient(rgb(240, 124, 124), rgb(228, 228, 129));
     border: 2px solid rgb(34, 4, 34);
     transform: scale(1.02);
     border-radius: 7px;
 }
 
 .snake {
     background-color: purple;
     border: .25vmin solid white;
     border-radius: 12px;
 }
 
 .food {
     background: linear-gradient(red, purple);
     border: .25vmin solid black;
     border-radius: 8px;
 }
 /* arrow buttons */
 
 .btn {
     visibility: hidden;
     height: 60px;
     text-align: center;
     position: absolute;
     bottom: 80px;
 }
 
 button {
     padding: 15px;
     background-color: black;
     color: whitesmoke;
 }
 
 .arrow {
     border: solid rgb(255, 255, 255);
     border-width: 0 4px 4px 0;
     display: inline-block;
     padding: 3px;
 }
 
 .right {
     transform: rotate(-45deg);
     -webkit-transform: rotate(-45deg);
 }
 
 .left {
     transform: rotate(135deg);
     -webkit-transform: rotate(135deg);
 }
 
 .up {
     transform: rotate(-135deg);
     -webkit-transform: rotate(-135deg);
 }
 
 .down {
     transform: rotate(45deg);
     -webkit-transform: rotate(45deg);
 }
 /*media */
 
 @media (max-device-width: 1024px) {
     #highscoreBox,
     #scoreBox {
         left: 20px;
     }
     .btn {
         visibility: visible;
     }
 }