body { 
  font-family: "Henny Penny", system-ui;
  font-size: 40px;
  background-color: #97dffc;
}


.text {
  z-index: 2;
  text-align: center;
  margin-top: 300px;
  color: #131313;
  position: relative;
}

.hint-text {
  font-size: 18px;
  text-align: center;
  margin-top: 70px;
}


.typewriter {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  animation: typewriter 2s steps(20);
}

@keyframes typewriter {
  from {
    width: 0%;
  }
  to {
    width: 100%;
  }
}

.cloud {
  position: absolute;
  z-index: 1;
}

.click-cloud:hover {
   opacity: 0.7;
}

.x-mark {
  position: absolute;
  opacity: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  
  font-size: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.5s;
}

.cloud:hover .x-mark {
  opacity: 1;
}