body, html {
padding: 0;
margin: 0;

}

#field {
    background-image: url("images/field.gif");
    background-size: 20px 20px;
    background-repeat: repeat;
    background-clip: padding-box;
    background-origin: padding-box;
    position: relative;
    border-width: 20px;
    border-style: solid;
    border-color: rgba(42, 42, 42, 0.8);
    text-align:center;
    vertical-align: middle;
    margin: 50px auto;
    
}

    #field::before {
    content:"";
    height: 100%;
    display: inline-block;
    vertical-align: middle;
    }

.wall {
position: absolute;
background: green linear-gradient(0deg, rgba(42, 42, 42, 0.8),  rgba(128, 128, 128, 0.63));
}

.food {
background: green url("images/food.png") 0% / 20px no-repeat;
position: absolute;
}

.snake-head.snake {
    background: url("images/head.png") 0% / 20px no-repeat;
    z-index: 1;
    
}

.snake-tail.snake {
     background: url("images/tail.png") 0% / 20px no-repeat;
}


.snake {
    position: absolute;
    background: url("images/body.png") 0% / 20px no-repeat;
    -webkit-transition: left 1s linear, top 1s linear;
    transition: left 1s linear, top 1s linear;
}


.snake-tail[data-direction="top"], .snake-head[data-direction="top"] {
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
}

.snake-tail[data-direction="bottom"], .snake-head[data-direction="bottom"] {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
}

.snake-tail[data-direction="left"], .snake-head[data-direction="left"] {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}

.win, .fail, .round-completed {
display: inline-block;
font-size: 3rem;
line-height: 4.5rem;
z-index:10;
position: relative;
padding: 20px;
width: calc(100% - 40px);
}

.win {
color: gold;
text-shadow: 2px 2px 5px rgba(128, 128, 128, 0.83);
background: linear-gradient(0deg, rgb(141, 23, 69), rgba(203, 26, 95, 0.86));

}

.fail {
color: black;
text-shadow: 2px 2px 5px rgba(128, 128, 128, 0.83);
background: linear-gradient(0deg, rgba(122, 174, 178, 0.8), rgba(112, 184, 189, 0.76));

}

.round-completed  {
color: darkviolet;
text-shadow: 2px 2px 5px rgba(128, 128, 128, 0.83);
background: linear-gradient(0deg, rgba(209, 244, 14, 0.86), rgba(209, 246, 8, 0.67));

}


.controls.hide {
display: none;
}

.controls, #cont {
     text-align:center;
     margin: -20px 0 10px 0;
     white-space: nowrap;

}

 .controls button {
    font-size: 3.5rem;
    padding: 5px 10px;
    
    background-color: aquamarine;
    color: rebeccapurple;
    border-radius: 15px;
    text-shadow: 2px 2px 5px rgba(128, 128, 128, 0.83);
    box-shadow:  2px 2px 5px rgba(128, 128, 128, 0.83);
    display: inline-block;
    vertical-align: middle;
    outline: none;

    
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
 
  }

    .controls button:active {
    background-color: rgb(34, 218, 155);
    }

.controls #incSpeedBtn {
    margin-left: 5px;
    margin-right: 20px;
}

.controls #leftBtn {
    margin-left: 3px;
    margin-right: 10px;
}

.controls #rightBtn {
     margin-left: 10px;
    margin-right: 3px;
}




    .controls .arr {
    color: rgba(42, 42, 42, 0.8);
    display: inline-block;
    font-size: 3rem;
    vertical-align: middle;
    }

 .controls .arr.left {
       transform: rotate(-90deg);
       -webkit-transform: rotate(-90deg);
        }

 .controls .arr.right {
      -webkit-transform: rotate(90deg);
      transform: rotate(90deg);
        }

    .controls .pause {
    margin-right: auto;
    margin-left: 15px;
    font-weight: bold;
    line-height: 3.5rem;
    font-size: 3rem;
    }

     .controls .pause.on {
     background-color: rgb(34, 218, 155);    
        }

    #cont button, #coverDiv button {
    font-size: 2rem;
     padding: 5px 10px;
     font-weight: bold;
    border-radius: 15px;
    text-shadow: 1px 1px 3px rgba(128, 128, 128, 0.83);
    box-shadow:  2px 2px 5px rgba(128, 128, 128, 0.83);
    vertical-align: middle;
    outline: none;
    background-color: rgb(176, 138, 231);
    color: rgb(195, 36, 71);
    outline: none;

    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    }

    #cont button:active, #coverDiv button:active {
        background-color: rgb(152, 121, 198);
        }

#cont.hide  {
display: none;
}

#coverDiv {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 9999;
text-align: center;
display: flex;
align-items: center;
justify-content: center;

}

#coverDiv button {
flex: 0 1 auto;
padding: 15px;

    }