body {
  background-color: #c4ffff;
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  font-weight: normal;
  line-height: 1.2em;
  margin: 15px;
}
h1 , .st, .end, .back {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  margin: 0;
  position: absolute;
}

h1, p {
  top: 0;
  left: 0;
  padding-left: 30px;
  padding-top: 40px;
  height: 100px;
  width: 100%;
  color: #c4ffff;
  background-color: #4d1f08;
  font-size: 50px;

}
.canvas {
  margin: 200px auto;
  background-color: #edfff9;
  width: 800px;
  height: 600px;
}

canvas {
  width: 100%;
  height: 100%;
  margin: 0;
}

#sample_container_id {
  width: 100%;
  height: 400px;
  position: relative;
  border: 1px solid #ccc;
  background-color: #fff;
}

#sample_text_id {
  font-size: 24pt;
  text-align: center;
  margin-top: 140px;
}

.disappear {
  display: none;
}

.st {
  top: 250px;
  left: 300px;
  width: 300px;
  height: 100px;
  padding-top: 40px;
  padding-left: 0;
  border-radius: 10px;
  border: 3px dashed #c4ffff;
  background-color: #4d1f08;
  font-size: 40px;
  text-align: center;
  color: #c4ffff;
  z-index: 3;
}

.back {
  top: 235px;
  left: 280px;
  width: 340px;
  height: 130px;
  border-radius: 10px;
  background-color: #4d1f08;
  z-index: 2;
}

.st:hover {
  background-color: #61331c;
  border-color: #edffff;
  color: #edffff;
}

.back_cover {
  background-color: #61331c;
}

.end {  
  top: 300px;
  width: 100%; 
  text-align: center;
  color: white;
  font-size: 100px;
  text-shadow: 0 1px 0 #ccc,
               0 2px 0 #c9c9c9,
               0 3px 0 #bbb,
               0 4px 0 #b9b9b9,
               0 5px 0 #aaa,
               0 6px 1px rgba(0,0,0,.1),
               0 0 5px rgba(0,0,0,.1),
               0 1px 3px rgba(0,0,0,.3),
               0 3px 5px rgba(0,0,0,.2),
               0 5px 10px rgba(0,0,0,.25),
               0 10px 10px rgba(0,0,0,.2),
               0 20px 20px rgba(0,0,0,.15);
  animation: over 0.2s ease;
  -webkit-animation: over 0.6s;
}

@keyframes over {
from    {font-size: 0px;}
to      {font-size: 100px;}
}

@-webkit-keyframes over {
from    {font-size: 0px;}
to      {font-size: 100px;}
}