* {box-sizing:border-box; font-family: Arial, Helvetica, sans-serif;
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
}
body { margin: 0; overflow: hidden;
      background-image: url("gamewall.jpg"); background-repeat: repeat-x repeat-y ;
	  font-family: Arial, sans-serif;
}
#header {height: 5vh; background-color:#ffc373; /* #F4A460; */
  margin:0px ; font-size: 3vh; padding: 0 1vw 0 0 ;
}
.menuitem {display: inline-block; height:5vh; float:right; position:relative;
/*  border: 1px solid yellow; */
}
#header>div:first-child {float:left; position: relative; }
#header a {display: inline-block; height:100%; padding: 0 1vw 0 1vw; 
  color: black; text-decoration: none; line-height:5vh;
}
#select, #load, #save {font-size: 3vh; }
/* #select {position: relative; } */
#gamelist {display: none; position:absolute; top:100%; left:0; background-color: #ffc373; /* #F4A460; */
  z-index: 5; padding:0; margin:0;
  width: 40vw; height: 95vh;
  overflow: auto;
}
::-webkit-scrollbar {width: 0;
}
#gamelist a {display: block;  line-height:5vh; font-size: 3vh;
  width: 100%; height: 5vh; border-top: 1px solid black; cursor:pointer;
/*background-color: green; */
}
a:hover {background-color: lightgreen; }
#gamelist a.selected {background-color: yellow; }
#header a:active:not(	 .selected) {background-color: #a6f202; }
#gamelist span {color: rgb(0,0,0,0); }

#footer {position: relative ; width:90%; margin: auto ;  /* #F4A460;  ffc373  height:100%; text-align: center; */
  margin-top:2vh; 
}
label {position: absolute; background-color: #ffc373;  border-radius: 1.5vh; padding:0.6vh; 
  border: 2px solid #000000; line-height:3vh;
}
#footer input {display:none;}
#footer label, #footer span {color:black; font-size: 3vh;    margin: 0 0.5vw 0 0.5vw ; 
}

#game { width: 70vw; height:70vw; margin: auto; margin-top:2vh; position: relative; 
/*  background-image: url("game_pic.jpeg");*/ background-size: contain; background-origin: border-box;
  background-image: url("how_to_solve/example.jpeg");
}
.box {float: left; margin: 1.26% 0 0 1.26%; width: 31.7%; height:31.7%; 

}
.cell {float: left; width: 33.33%; height:33.33%; 
  line-height: 6.6vw; text-align: center; font-size: 6.5vw; padding:2%
}
.dot {float:left;  display: block; text-align: center;
  width:32% ; height:32%; line-height:2.6vw; font-size:2.6vw; font-weight: bold;
}
#choice {position: absolute; top:70%; left:0; text-align:center; display: none;
   border:none; z-index:5;
}
.digit {width: 8vw; height: 8vw;   border: 0.05vw solid black; border-radius: 50%;
  margin: 0.5vw; background-color: lightgreen; font-size: 7vw; display: inline-block;
}
.cancel {height: 6.5vw;  font-size:4vw; margin: 0.5vw; border: 0.05vw solid black;
  background-color: lightgreen; border-radius: 10%; display: inline-block;
}

#message {position: absolute; top:30%; right:0; width: 44vw; height: 24vw; text-align:center;
  background-color: lightblue; transition-duration: 2s; z-index: 5;
}
@media screen and (max-width: 700px) {
  #game {width: 100vw; height: 100vw; }
  .cell {line-height: 10vw; font-size: 9vw; }
  .digit {width: 14vw; height: 14vw; font-size: 10vw; }
  #gamelist {width: 50vw; }
  #footer label, #footer span {font-size: 2.5vh;
  }
  #footer {width:98%;
  }
  #header span {font-size: 2vh; }
  #select, #load, #save {font-size: 2.5vh; }
/* 
  #header {font-size: 2vw;
  }

@media screen and (max-width: 1000px) {
 #header>ul>li:not(last-child) {display: none; }
  #header>ul>li:last-child {display: inline-block; }
  .side {display: none}
  #center, #game {width:100%; }
*/
/*  a:hover {background-color: lightgreen;} */

}