html, body{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  width: 260px;
}
.fortunetellerroom{
  background-image: url('https://nmhanhh.github.io/devhank_neocities_resource/wallpaper/fortunetellerroom.png');
  background-size: cover;
  background-position: center;
}
#tellerNote{
  color: aqua;
}
#topic{
  color: crimson;
  text-shadow: 1px 1px seagreen;
  background-image: url('https://nmhanhh.github.io/devhank_neocities_resource/wallpaper/bluebraceletstones.png');
  background-size: cover;
  background-position: center;
  padding: 10px;
  width: 220px;
  max-width: 220px;
}
#ballreflects{
  margin: 10px 0;
  width: 200px;
  max-width: 200px;
}
#showAdvice{
  color: lavender;
  text-shadow: 1px 1px brown;
}
.urreading{
  display: none;  
}
.urresult{
  display: none;  
}
#urQuestion{
  color: rebeccapurple;
  text-shadow: 1px 1px 1px pink;
}
#urReflection{
  color: palegreen;
  text-shadow: 1px 1px 1px fuchsia;
}
#tellerAnswer{
  color: lemonchiffon;
  text-shadow: 1px 1px 1px royalblue;
}
#resultNote{
  color: greenyellow;
  text-shadow: 1px 1px hotpink;
}
#displayedQuestion{
  color: deepskyblue;
  text-shadow: 1px 1px palegoldenrod;
}
#displayedReflection{
  color: midnightblue;
  text-shadow: 1px 1px springgreen;
}
#displayedAnswer{
  color: darkorchid;
  text-shadow: 1px 1px burlywood;  
}
#copyNote{
  color: cornsilk;
  text-shadow: 1px 1px violet; 
}
#copyCrystalball{
  background-image: url('https://nmhanhh.github.io/devhank_neocities_resource/wallpaper/tarottable1.png');
  background-size: cover;
  background-position: center;
}
#copiedCrystalBallMsg{
  text-shadow: 1px 1px cornflowerblue; 
}
.container{
  padding: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.hidden{
  display: none;
}
.spin{
  animation: reflectSpin 1s ease-in-out;  
}
@keyframes reflectSpin{
  0%{
    transform: rotate(0deg);
  }
  50%{
    transform: rotate(360deg);
  }
  100%{
    transform: rotate(0deg);
  }
}