body {
  margin: 0;
  overflow: hidden;
}
canvas#full {
  background: rgb(246, 255, 226);
}
#resultboxOut {
  margin-top: 10%;
  visibility: hidden;
  position: absolute;
  left: 50%;
  z-index: 3;
}

#resultboxIn {
  background-color: rgb(248, 239, 227);
  position: relative;
  left: -50%;
border: 1px solid lightgrey;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}

.resultul {
  padding-left: 80px;
padding-right: 80px;
  margin-left: 20%;
  margin-right: 20%;
}

.resli {
  font-weight: 900;
  font-size: 35px;
  font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;
  font-style: italic;
  color: #ff5419;
      
}
.restext{
margin-top: 0px;
margin-bottom: 0px;
margin-left: 80px;
margin-right: 80px;
font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;
font-size: 50px;
font-weight: lighter;
}
.btn {
  margin: 10%;
background:linear-gradient(to bottom, #44c767 5%, #5cbf2a 100%);
background-color:#44c767;
border-radius:13px;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Verdana;
font-size:28px;
font-weight:bold;
padding:24px 54px;
text-decoration:none;
text-shadow:0px 2px 0px #000000;
}
.btn:hover {
background:linear-gradient(to bottom, #4b7834 5%, #8fd461 100%);
background-color:#4b7834;
}
.btn:active {
position:relative;
top:1px;
}
.overlay {
  position: fixed; /* Sit on top of the page content */
  display: none; /* Hidden by default */
  width: 100%; /* Full width (cover the whole page) */
  height: 100%; /* Full height (cover the whole page) */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.5); /* Black background with opacity */
  z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
  cursor: pointer; /* Add a pointer on hover */
}