/*colors: https://coolors.co/ffffff-81f4e1-56cbf9-ff729f-d3c4d1 */
@import url('https://fonts.googleapis.com/css?family=Quicksand');
body{
  margin: 0;
  background-color: #fff;
  
  color: #565556;
  font-family: 'Quicksand', sans-serif;
}

h1{
  display: block;
  max-width: 500px;
  text-align: center;
  margin: 30px auto;
  font-size: 4rem;
  color: #FF729F;
}

.info{
  display: block;
  text-align: center;
  max-width: 500px;
  margin: 0 auto;
  font-size: 20px;
}

#input, #output{
  display: blocK;
  max-width: 600px;
  min-width: 20px;
  margin: 15px auto;
  text-align: center;
  padding: 20px;
  font-size: 32px;
  outline: none;
}

button{
  display: block;
  margin: 20px auto 0 auto;
  background-color: #FF729F;
  border: none;
  color: #fff;
  font-family: 'Quicksand', sans-serif;
  font-weight: bold;
  font-size: 20px;
  padding: 10px 25px;
  border-radius: 1000px;
  outline: none;
  cursor: pointer;
}

#messageback{
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 100;
  background-color: #56CBF9;
}

.white{
  color: #fff !important;
}