html {
  height: 100%;
  width: 100%;

}

*{
  margin: auto;
  padding: 0;
  box-sizing: border-box;
}

body{
  background-color: #f2f2f2; 
  overscroll-behavior-y: none; 
}

.input{
  position: absolute; 
  text-align: center;
  width: 100%; 
  margin: 100px 0;
  padding-top: 0px;
  top: 100px; 
  z-index: 99;
}


input[type="text"]{
  height: 75px;
  width: 400px;
  background: #85c395;
  font-family: 'Red Hat Display', sans-serif;
  font-size: 20px;
  padding: 20px 35px;
  border: none;
  border-radius: 50px;
  outline: none;
  color: white;
  transition: 0.3s; 
}
::placeholder{
  color: white;
  font-size: 20px;
}

input[type=text]:focus{
  background: #8bb297;     /* oranges! yey */
  transition: 0.3s; 
}


input[type="submit"]{
    height:75px;
  padding-right: 20px;
  padding-left: 20px;
  width: 50px; 
  border-radius: 50px; 
  background-color: #85c395; 
  font-size: 25px;
  color: white; 
  border: none; 
  z-index: 99;
  
  transition: 0.3s;
}
input[type="submit"]:hover{
  background-color: #8bb297;
  cursor: pointer; 
  transition-duration: 0.7s;
}



.display{
  text-align: center;
  color: #517a5e;
}

p{
  font-family: 'Red Hat Display', sans-serif;
  font-size:25px;
  padding: 0px 10% 0px 10%;
  line-height: 1.8;
}
h2{
  font-size: 30px;
  color: #517a5e;
  font-family: 'Red Hat Display', sans-serif; 
}
#myCanvas{
  display: show;
}