@charset "UTF-8";

body {
  background-color: rgb(255, 206, 206);
}

.red {
  position: absolute;
  text-align: center;
  top: 15%;
  left: 20%;
  transform: translate(-50%, -50%);
  background-color: rgb(255, 0, 0);
  color: rgb(255, 0, 0,0);
  width: 100px;
  height: 100px;
  border-radius: 50%;
  padding: 7%;
  animation: fadeInOut 2s infinite alternate;
  animation-delay: 0.1s;
  transition: opacity 0.3s, background-color 0.3s;
}
@keyframes fadeInOut {
  0% {
    opacity: 0.3;
  }
  100% {
    opacity: 1;
  }
}

.red:hover {
  background-color: red;
  color: rgb(178, 0, 0);
  font-size: 30px;
  padding: 8.5%;
  transition: 0.4s;
  z-index: +1;
  opacity: 1;
  animation: none;


}

.blue {
  position: absolute;
  text-align: center;
  top: 43%;
  left: 9%;
  transform: translate(-50%, -50%);
  background-color: rgb(0, 68, 255);
  color: rgb(0, 68, 255,0);
  width: 100px;
  height: 100px;
  border-radius: 50%;
  padding: 7%;
  opacity: 50%;
  animation: fadeInOut 2s infinite alternate;
  transition: opacity 0.3s, background-color 0.3s;
}
@keyframes fadeInOut {
  0% {
    opacity: 0.3;
  }
  100% {
    opacity: 1;
  }
}

.blue:hover {
  background-color: rgb(0, 68, 255);
  color: rgb(0, 39, 147);
  font-size: 30px;
  padding: 8.5%;
  transition: 0.4s;
  z-index: +1;
  opacity: 1;
  animation: none;

}

.orange {
  position: absolute;
  text-align: center;
  top: 80%;
  left: 12%;
  transform: translate(-50%, -50%);
  background-color: rgb(255, 68, 0);
  color: rgb(255, 68, 0,0);
  width: 100px;
  height: 100px;
  border-radius: 50%;
  padding: 7%;
  opacity: 50%;
  animation: fadeInOut 2s infinite alternate;
  transition: opacity 0.3s, background-color 0.3s;
}
@keyframes fadeInOut {
  0% {
    opacity: 0.3;
  }
  100% {
    opacity: 1;
  }
}

.orange:hover {
  background-color: rgb(255, 68, 0);
  color:rgb(172, 46, 0);
  font-size: 30px;
  padding: 8.5%;
  transition: 0.4s;
  z-index: +1;
  opacity: 1;
  animation: none;

}

.yellow {
  position: absolute;
  text-align: center;
  top: 50%;
  left: 25%;
  transform: translate(-50%, -50%);
  background-color: rgb(255, 255, 0);
  color: rgb(255, 255, 0,0);
  width: 100px;
  height: 100px;
  border-radius: 50%;
  padding: 7%;
  opacity: 50%;
  animation: fadeInOut 2s infinite alternate;
  animation-delay: 0.2s;
  transition: opacity 0.3s, background-color 0.3s;
}
@keyframes fadeInOut {
  0% {
    opacity: 0.3;
  }
  100% {
    opacity: 1;
  }
}

.yellow:hover {
  background-color: rgb(255, 255, 0);
  color:rgb(169, 169, 0);
  font-size: 30px;
  padding: 8.5%;
  transition: 0.4s;
  z-index: +1;
  opacity: 1;
  animation: none;

}

.green {
  position: absolute;
  text-align: center;
  top: 45%;
  left: 47%;
  transform: translate(-50%, -50%);
  background-color: rgb(0, 223, 0);
  color: rgb(0, 223, 0, 0);
  width: 100px;
  height: 100px;
  border-radius: 50%;
  padding: 7%;
  opacity: 50%;
  animation: fadeInOut 2s infinite alternate;
  transition: opacity 0.3s, background-color 0.3s;
}
@keyframes fadeInOut {
  0% {
    opacity: 0.4;
  }
  100% {
    opacity: 1;
  }
}

.green:hover {
  background-color: rgb(0, 223, 0);
  color: rgb(0, 155, 0);
  font-size: 30px;
  padding: 8.5%;
  transition: 0.4s;
  z-index: +1;
  opacity: 1;
  animation: none;

}

.indigo {
  position: absolute;
  text-align: center;
  top: 25%;
  left: 40%;
  transform: translate(-50%, -50%);
  background-color: rgb(75, 0, 130);
  color: rgb(75, 0, 130, 0);
  width: 100px;
  height: 100px;
  border-radius: 50%;
  padding: 7%;
  opacity: 50%;
  animation: fadeInOut 2s infinite alternate;
  transition: opacity 0.3s, background-color 0.3s;
}
@keyframes fadeInOut {
  0% {
    opacity: 0.3;
  }
  100% {
    opacity: 1;
  }
}

.indigo:hover {
  background-color: rgb(75, 0, 130);
  color:rgb(39, 0, 66);
  font-size: 30px;
  padding: 8.5%;
  transition: 0.4s;
  z-index: +1;
  opacity: 1;
  animation: none;

}

.violet {
  position: absolute;
  text-align: center;
  top: 27%;
  left: 60%;
  transform: translate(-50%, -50%);
  background-color: rgb(238, 130, 238);
  color: rgb(238, 130, 238, 0);
  width: 100px;
  height: 100px;
  border-radius: 50%;
  padding: 7%;
  opacity: 50%;
  animation: fadeInOut 2s infinite alternate;
  animation-delay: 0.1s;
  transition: opacity 0.3s, background-color 0.3s;
}
@keyframes fadeInOut {
  0% {
    opacity: 0.4;
  }
  100% {
    opacity: 1;
  }
}

.violet:hover {
  background-color: rgb(238, 130, 238);
  color: rgb(180, 69, 180);
  font-size: 30px;
  padding: 8.5%;
  transition: 0.4s;
  z-index: +1;
  opacity: 1;
  animation: none;

}

.gray {
  position: absolute;
  text-align: center;
  top: 25%;
  left: 75%;
  transform: translate(-50%, -50%);
  background-color: rgba(212, 205, 205);
  color: rgba(212, 205, 205, 0);
  width: 100px;
  height: 100px;
  border-radius: 50%;
  padding: 7%;
  opacity: 50%;
  animation: fadeInOut 2s infinite alternate;
  transition: opacity 0.3s, background-color 0.3s;
}
@keyframes fadeInOut {
  0% {
    opacity: 0.3;
  }
  100% {
    opacity: 1;
  }
}

.gray:hover {
  background-color: rgba(212, 205, 205);
  color: rgb(123, 123, 123);
  font-size: 30px;
  padding: 8.5%;
  transition: 0.4s;
  z-index: +1;
  opacity: 1;
  animation: none;

}

.pink {
  position: absolute;
  text-align: center;
  top: 25%;
  left: 92%;
  transform: translate(-50%, -50%);
  background-color:  rgb(255, 0, 128);
  color: rgba(202, 60, 141, 0);
  width: 100px;
  height: 100px;
  border-radius: 50%;
  padding: 7%;
  opacity: 50%;
  animation: fadeInOut 2s infinite alternate;
  transition: opacity 0.3s, background-color 0.3s;
}
@keyframes fadeInOut {
  0% {
    opacity: 0.4;
  }
  100% {
    opacity: 1;
  }
}

.pink:hover {
  background-color: rgb(255, 0, 128);
  color: rgb(159, 0, 79);
  font-size: 30px;
  padding: 8.5%;
  transition: 0.4s;
  z-index: +1;
  opacity: 1;
  animation: none;

}


.turquoise {
  position: absolute;
  text-align: center;
  top: 83%;
  left: 32%;
  transform: translate(-50%, -50%);
  background-color: rgba(64,224,208);
  color: rgba(137, 175, 204, 0);
  width: 100px;
  height: 100px;
  border-radius: 50%;
  padding: 7%;
  opacity: 50%;
  animation: fadeInOut 2s infinite alternate;
  animation-delay: 0.2s;
  transition: opacity 0.3s, background-color 0.3s;
}
@keyframes fadeInOut {
  0% {
    opacity: 0.3;
  }
  100% {
    opacity: 1;
  }
}

.turquoise:hover {
  background-color: rgb(64,224,208);
  color: rgb(38, 138, 128);
  font-size: 30px;
  padding: 8.5%;
  transition: 0.4s;
  z-index: +1;
  opacity: 1;
  animation: none;

}

.black {
  position: absolute;
  text-align: center;
  top: 84%;
  left: 52%;
  transform: translate(-50%, -50%);
  background-color: rgb(0, 0, 0);
  color: rgba(86, 90, 86, 0);
  width: 100px;
  height: 100px;
  border-radius: 50%;
  padding: 7%;
  opacity: 50%;
  animation: fadeInOut 2s infinite alternate;
  transition: opacity 0.3s, background-color 0.3s;
}
@keyframes fadeInOut {
  0% {
    opacity: 0.3;
  }
  100% {
    opacity: 1;
  }
}

.black:hover {
  background-color: rgb(26, 27, 26);
  color: rgb(137, 137, 137);
  font-size: 30px;
  padding: 8.5%;
  transition: 0.4s;
  z-index: +1;
  opacity: 1;
  animation: none;

}

.white {
  position: absolute;
  text-align: center;
  top: 97%;
  left: 70%;
  transform: translate(-50%, -50%);
  background-color: rgba(255, 255, 255);
  color: rgba(198, 198, 198, 0);
  width: 100px;
  height: 100px;
  border-radius: 50%;
  padding: 7%;
  opacity: 50%;
  animation: fadeInOut 2s infinite alternate;
  transition: opacity 0.3s, background-color 0.3s;
}
@keyframes fadeInOut {
  0% {
    opacity: 0.4;
  }
  100% {
    opacity: 1;
  }
}

.white:hover {
  background-color: rgba(255, 255, 255);
  color: rgb(174, 174, 174);
  font-size: 30px;
  padding: 8.5%;
  transition: 0.4s;
  z-index: +1;
  opacity: 1;
  animation: none;

}

.darkblue {
  position: absolute;
  text-align: center;
  top: 60%;
  left: 70%;
  transform: translate(-50%, -50%);
  background-color: rgba(0,0,128);
  color: rgba(130, 146, 238, 0);
  width: 100px;
  height: 100px;
  border-radius: 50%;
  padding: 7%;
  opacity: 50%;
  animation: fadeInOut 2s infinite alternate;
  animation-delay: 0.1s;
  transition: opacity 0.3s, background-color 0.3s;
}
@keyframes fadeInOut {
  0% {
    opacity: 0.3;
  }
  100% {
    opacity: 1;
  }
}

.darkblue:hover {
  background-color: rgb(0,0,128);
  color: rgb(0, 0, 76);
  font-size: 30px;
  padding: 8.5%;
  transition: 0.4s;
  z-index: +1;
  opacity: 1;
  animation: none; 

}

.darkgreen {
  position: absolute;
  text-align: center;
  top: 73%;
  left: 87%;
  transform: translate(-50%, -50%);
  background-color: rgba(2, 72, 27);
  color: rgba(85, 78, 78, 0);
  width: 100px;
  height: 100px;
  border-radius: 50%;
  padding: 7%;
  opacity: 50%;
  animation: fadeInOut 2s infinite alternate;
  transition: opacity 0.3s, background-color 0.3s;
}
@keyframes fadeInOut {
  0% {
    opacity: 0.4;
  }
  100% {
    opacity: 1;
  }
}

.darkgreen:hover {
  background-color: rgba(2, 72, 27);
  color:  rgb(0, 37, 13);
  font-size: 30px;
  padding: 8.5%;
  transition: 0.4s;
  z-index: +1;
  opacity: 1;
  animation: none;

}