* {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}


body {
  height: 2394px;
}

.ring-1, .ring-2, .ring-3, .ring-4 {
  width: 200px;
  height: 200px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

.mandala {
  width: 200px;
  height: 200px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

.word {
  font-family: Monaco;
  font-size: 50px;
  text-align: center;
  position: absolute;
  width: 100%;
  top: 50%;
  left: 50%;
}

.black { color: #000000; transition: 0.3s ease; }
.darkgrey { color:  #4d4d4d; transition: 0.3s ease; }
.grey { color: #999999; transition: 0.3s ease; }
.lightgrey { color: #e6e6e6; transition: 0.3s ease; }

.word {
  transform: translate(-50%,-50%);
}

.poem {
  position: fixed;
  display: none;
  bottom: 0px;
  left: 0px;
  width: 350px;
  height: 30px;
  color: white;
  font-family: Monaco;
  font-size: 20px;
  background-color: black;
  margin-left: 10px;
  margin-bottom: 10px;
  padding: 5px;
  text-align: center;
  transition: 0.3s ease;
  z-index: 10;
}

.arrow {
  position: fixed;
  right: 10;
  bottom: 10;
  display: hidden;
}