#message-box{
	background-color:#f0ebeb;
	position:absolute;
	top:20%;
	left:18%;
	width:40%;
	/*color:green;*/
	text-align:center;
	padding:5px;
    font-size:25px;
	font-weight:800;
	border-radius:2rem;
	display:none;
	
}


#body:fullscreen {
    background-color: white;
}
#body:-webkit-full-screen {
    background-color: white;
}
#body:-moz-full-screen {
    background-color: white;
}
html, *:fullscreen, *:-webkit-full-screen, *:-moz-full-screen {
    background-color: white !important;  
}

#box {
    height: 400px;
    width: 800px;
    border: 10px solid gray;
    position: absolute;
    top :32%;
    left: 12%;
   /* overflow: hidden;*/
    background-color: black;
/*    background-color: red;*/
}
.snake_part{
    height: 10px;
    width: 10px;
    position: absolute;
    background-color: #fcfbf7;
    border: .1px solid #757574;
}
.food_gen{
   border-radius : 50%;
   background-color: orange;
   height: 10px;
   width: 10px;
   position: absolute;
}
audio{
    display: none;
}
.level_achieve_image,.game_over_image{
    position: absolute;
	height: 350px;
    width: 350px;
     top:37%;
	left:27%;
    display: none;
    z-index: 10;

}

.game_over_imagef{
	 position: absolute;
	height: 350px;
    width: 350px;
     top:37%;
	left:27%;
    display: none;
    z-index: 10;
}
#board-back{
    background-color: #51a0f5;
    height: 300px;
    width: 400px;
    position: absolute;
    right:  1%;
    top: 1%;
    border:  2px solid black;
}
#board{
    height: 170px;
    width: 300px;
    position: absolute;
    top: 10%;
    left: 12.5%;
    background-color: #464f5e;
}
#board-handle{
    height: 100px;
    width: 25px;
    position: absolute;
    top: 66.33%;
    left: 47%;
    background-color: #464f5e;
    z-index: 10; 
}
.score-board{
    height: 100px;
    width: 100px;
    position: absolute;
    bottom: 4px;
    border: 4px solid #3e4247;
   perspective: 2000px;
    transform-style: preserve-3d;
    background-color: transparent;
}
#current-div,#need-div{
   height: inherit;
    width: inherit;
    position: absolute;
    perspective: 2000px;
    transform-style: preserve-3d;
        /*transition: transform 1s linear;
        transition-duration: 1s,0s,0s,0s,0s;*/
 /*   transition-delay: 0s;*/
}
#current-div>div,#need-div>div{
   height: inherit;
   width: inherit;
   position: absolute;
 /*  background-color: #464f5e;*/
    color: white;
    font-weight: 600;
    font-size: 65px;
    text-align: center;
    perspective: 2000px;
    transform-style: preserve-3d;
   /*  background-color: green;*/
}
#current-div>div{
    background-color: green;
}
#need-div>div{
    background-color: orange;
}
.addTransition{
    transition: transform .4s ease-in-out;
}
.addDelayTransition{
    transition: transform 2s ease-in-out;
}
#current-back,#need-back{
    transform: rotateY(180deg);
}
#need{
    right: 4px;
     /* background-color: orange;*/
  /*  color: white;
    font-weight: 600;
    font-size: 65px;
    text-align: center;*/

}

.name{
    height : 50px;
    width: 108px;
font-family: fantasy;
 position: absolute;
 margin: 4px;
 text-align: center;
 padding-top: 5%;
 font-size: 25px;
 color: white;

}
#current-name{
  left: 0px;
}
#max-name{
  right : 0px;
}
#level-head{
    position: absolute;
    height: 30px;
    width: 60px;
    left: 120px;
    top : 62px;
    text-align: center;
    color: white;
    font-family: fantasy;
    font-size: 25px;
}
#level{
    height: 50px;
    width: 50px;
    background-color: black;
    position: absolute;
    left: 125px;
    top: 95px;
    overflow: hidden;
}
#level>div{
    height: inherit;
    width: inherit;
    color:  white;
    text-align: center;
    font-family: fantasy;
    font-size: 30px;
    box-sizing: border-box;
    padding-top: 8px;
    position: absolute;
    left: 0px;
}
.down_pos{
    top : 50px; 
}
.middle_pos{
    top : 0px;
}
.up_pos{
    top : -50px;
}
.addLevelTransition{
     transition : 2s ease-in-out;
}
/*#volume{
    position: absolute;
}
#volume i{
    color: cyan; 
    font-size: 25px;
    position: absolute;
}*/
.display{
    display: none;
}
#level-lock{
    background-color: #6b675d;
    width: 400px;
    height: 200px;
    padding : 8px;
    border : 2px solid gray;
    position: absolute;
    top : 400px;
    right : 1%;
    box-sizing: border-box;
}
.row{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: space-around;
    margin-bottom: 10px;
}
.col{
    background-color: #72d8e8;
    height: 50px;
    width: 50px;
    position: relative;
    border-radius: 50%;
    border : 3px solid #dae4e6;
}
.col-value{
    height: inherit;
    width: inherit;
    position: absolute;
    border-radius: 50%;
    border: none;
    text-align: center;
    color:  white;
    padding-top: 2%;
    box-sizing: border-box;
    font-size: 35px;
    font-weight: 700;
    font-family: fantasy;
    opacity: 0;
}
.lock-div{
    height: auto;
    width: auto;
    position: absolute;
    top: .6px;
    left: 5px;
    /*color: #303642;*/
    color: #3c4352;
}
i{
    font-size: 45px;
}
#creator span{
      color: red;    
}
#creator-image{
	border-radius:50%;
	border:5px solid silver;
	height:100px;
	width:100px;
}