html, body{
  width:100%;
  height:100%;
  margin:0;
  padding:0;
  display:flex;
  justify-content:center;
  align-items:center;
  background:black;
}
.main{
  position:relative;
  width:1024px;
  height:768px;
  margin:2vh auto 0 auto;
  background:#f3f3f3;
  border:10px ridge #654321;
  border-radius:10px;
  overflow:overflow;
  box-sizing:border-box;
  background-image:url('blackboard.jpg');
  background-size:100% 100%;
  background-repeat:no-repeat;
}
.splash{
  position:absolute;
  width:1024px;
  height:768px;
  margin:2vh auto 0 auto;
  background:#f3f3f3;
  border:10px ridge #654321;
  border-radius:10px;
  overflow:hidden;
  box-sizing:border-box;
  background-image:url('blackboard.jpg');
  background-size:100% 100%;
  background-repeat:no-repeat;
  font-family:'Comic Sans MS',script;
  justify-content:center;
  align-items:center;
  text-align:center;
}
.addcarrycells{
  position:absolute;
  width:30px;
  height:30px;
  font-size:30px;
  text-align:center;
  border:1px solid white;

  font-family:'Comic Sans MS', cursive;
  color:yellow;
  user-select:none;
  z-index:500;
  
}
.cells{
  position:absolute;
  width:80px;
  height:70px;
  font-size:60px;
  text-align:center;
  border:0px solid white;
  font-family:'Comic Sans MS', cursive;
  color:white;
  user-select:none;
}
.dragchars{
  position:absolute;
  width:80px;
  height:70px;
  font-size:60px;
  text-align:center;
  cursor:grab;
  font-family:'Comic Sans MS', cursive;
  color:yellow;
  z-index:10;
  user-select:none;
}
.but{
 font-size:30px;
}