body {
  height: 100vh;
  overflow: hidden;
  background-color: #0f0026;
}

#container {
  display: flex; 
  margin-top: 4vh;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}

#displayImg {
  display: flex;
  justify-content: space-around;
  gap: 30px;
  z-index: 5;
  transition-duration: 1s;               
}

#displayImg img {
  width: 270px;
  margin-top: 15px;
  margin-bottom: 10px;
  border: solid #5c44d3 1px;
  border-radius: 15px;
  transition-duration: 1s;              
}

#displayImg img:hover {
  scale: 1.05;
  border:  solid #ff5ac4 3px;
  transition-duration: 1s;
}

p {
  color: #ff5ac4;
}

.hand1, .hand2 {
  position: absolute;  
  height: 55vh;
  bottom: 50px;
  z-index: 1;
  pointer-events: none;
}

.hand1 {    
  left: 70px;
}

.hand2 {   
  right: 50px;
}

.home {
  top: 20px;
  left: 20px;
  height: 13vh;
  z-index: 9;
  position: absolute;
  transition-duration: .7s;
}

.home:hover {
  scale: 1.1;
  transition-duration: .7s;
}

.bgcloud {
  position: absolute;
  width: 100vw;
  z-index: -3;
  bottom: 0;
  pointer-events: none;
}

.message {
  max-width: 580px;
  text-wrap: wrap;
}

#reset {
  display: block;
  margin: 0 auto;
  color: white;
  background-color: #5c44d3;
  border: none;
  border-radius: 3.5px;
  padding: 6px 10px;
  font-size: 16px;
  z-index: 12;
}

.resetDisplay {
  opacity: 0;
  pointer-events: none;
}

#oracleClown {
  height: 100vh;
}

.oracleClownImg {
  height: 90vh;
  transition-duration: 1s;
  cursor: pointer;
}

.oracleClownImg:hover {
  scale: 1.1;
  transition-duration: 1s;
}

.hide {
  display: none;
  pointer-events: none;
}

.question {
  position: absolute;
  width: 330px;
  left: 130px;
  top: 85px;
  line-height: 1.9em;
  letter-spacing: .25em;
  transition-duration: 1.2s; 
}

.instructions {
  position: absolute;
  width: 350px;
  left: 130px;
  top: 225px;
}

.question:hover {
  color: #130030;
  transition-duration: 1.5s; 
}

.question:hover + .instructions{
  color: #130030;
  transition-duration: 1.5s; 
}