@font-face{
  font-family: Dogica;
  src: url("fonts/dogica.otf");
}
body{
  font-family: "Dogica", "Courier New", monospace;
  background-color: #acbafc;
}
#notebook{
  background-color: #acbafc;
  width: 900px;
  padding: 40px 40px 0px;
  margin: 0px auto;
  height: 60px;
  background-image: url("assets/binding.png");
  background-size: cover;
}
#game{
  width: 900px;
  padding: 40px 40px 0px;
  position: relative;
  margin: 0px auto;
  background-image: url("assets/noteBg.png");
  background-size: cover;
}
#footer{
  height: 50px;
}
#header{
  height: 100px;
  position: relative;
  width: 900px;
  margin: 0px auto;
}
canvas{
  border: 2px black solid;
  margin: 0px;
}
#schoolgame{
  display: inline-block;
  width: 124px;
  padding: 5px;
}
#schoolgame p{
  text-align: center;
  line-height: 25px;
}
#workgame{
  display: inline-block;
  width: 124px;
  padding: 5px;
}
#workgame p{
  text-align: center;
  line-height: 25px;
}
#mentalgame{
  display: inline-block;
  width: 124px;
  padding: 5px;
}
#mentalgame p{
  text-align: center;
  line-height: 25px;
}
#bars{
  float: right;
  display: inline;
}
.clear{
  clear: both;
}
#level{
  width: 300px;
  position: absolute;
  top: 210px;
  left: 70px;
  z-index: 3;
}
#cloud{
  width: 400px;
  position: absolute;
  left: 30px;
  top: 200px;
}
#helpbox{
  width: 700px;
  height: 300px;
  border: 5px black solid;
  padding: 20px;
  display: block;
  z-index: 4;
  position: absolute;
  left: 115px;
  top: 100px;
  background-color: white;
}
#helpbox h2{
  text-align: center;
}
#winbox{
  width: 700px;
  height: 350px;
  border: 5px black solid;
  padding: 20px;
  z-index: 4;
  position: absolute;
  left: 100px;
  right: 100px;
  top: 100px;
  background-color: white;
  display: none;
}
#losebox{
  width: 700px;
  height: 350px;
  border: 5px black solid;
  padding: 20px;
  z-index: 4;
  position: absolute;
  left: 100px;
  right: 100px;
  top: 100px;
  background-color: white;
  display: none;
}
#losetext{
  font-size: 14px;
  line-height: 19px;
}
#okbutton{
  width: 125px;
  position: absolute;
  left: 290px;
  bottom: 20px;
}
#okbutton_win{
  width: 125px;
  position: absolute;
  left: 290px;
  bottom: 20px;
}
#okbutton_lose{
  width: 125px;
  position: absolute;
  left: 290px;
  bottom: 20px;
}
#title{
  width: 450px;
  position: absolute;
  left: 225px;
}