#dot {
  background-color: none;
  color: white;
  text-decoration: underline;
  font-weight: bold;
  height: 50px;
  width: 80px;
  border: 1px solid white;
  vertical-align: middle;
  text-align: center;
  box-shadow: 1px 1px 1px black;
  margin: 0px;
  padding: 0px;
display: none;
  

  
  top: 0%;
  left: 0%;
  /*transform: translate(-50%, -50%);*/
  z-index: 3;
}
#wrapper {

  background-color: transparent;
  border-radius: 5px;
  text-align: center;
  height: 50px;
  width: 80px;
  position: absolute;
  /*padding: 10px;*/
  top: 50%;
  left: 50%;
  margin: 0px;
  padding: 0px;
  transform: translate(-50%, -50%);
  transition: top 0.5s, left 0.5s, color 0.8s,background-color 0.8s, transform 0.5s, border-radius 0.3s;
  
  z-index: 2;
  display: inline;
  box-shadow: 1px 1px 1px black;
}
#wrapper:hover {
  cursor: pointer;
}


body, html {
  background-color: lightblue;
  overflow: hidden;
}



body {
  animation: colorchange 70s linear infinite; /* animation-name followed by duration in seconds*/
  -webkit-animation: colorchange 70s linear infinite; /* Chrome and Safari */
  -moz-animation: colorchange 70s linear infinite;
  -o-animation: colorchange 70s linear infinite;
}

#box
{
  width: 70%;
  font-size: 40px;
  font-style: oblique;
  color: #FFF;
  text-align: center;
  margin: auto;
  box-shadow:1px 1px 1px 2px rgba(0,0,0,0.4);
 
}

h1, h2 {
  text-align: center;
  font-style: italic;
  font-strech: condensed;
  font-size: 3em;
  animation: colorchange alternate infinite;
  -webkit-animation: colorchange alternate infinite;
  -moz-animation: colorchange alternate infinite;
  -o-animation: colorchange alternate infinite;
  
  animation-duration: 10s;
  animation-iteration-count: 3;
  animation-direction: alternate;
  
}

@keyframes colorchange
{
  0%,100% {background: #1abc9c }
  5% {background: #2ecc71 }
  10% {background: #3498db }
  15% {background: #9b59b6 }
  20% {background: #34495e }
  25% {background: #16a085 }
  30% {background: #27ae60 }
  35% {background: #2980b9 }
  40% {background: #8e44ad }
  45% {background: #2c3e50 }
  50% {background: #f1c40f }
  55% {background: #e67e22 }
  60% {background: #e74c3c }
  65% {background: #ecf0f1 }
  70% {background: #95a5a6 }
  75% {background: #f39c12 }
  80% {background: #d35400 }
  85% {background: #c0392b }
  90% {background: #bdc3c7 }
  95% {background: #7f8c8d }
}

@-webkit-keyframes colorchange /* Safari and Chrome - necessary duplicate */
{
  0%,100% {background: #1abc9c }
  5% {background: #2ecc71 }
  10% {background: #3498db }
  15% {background: #9b59b6 }
  20% {background: #34495e }
  25% {background: #16a085 }
  30% {background: #27ae60 }
  35% {background: #2980b9 }
  40% {background: #8e44ad }
  45% {background: #2c3e50 }
  50% {background: #f1c40f }
  55% {background: #e67e22 }
  60% {background: #e74c3c }
  65% {background: #ecf0f1 }
  70% {background: #95a5a6 }
  75% {background: #f39c12 }
  80% {background: #d35400 }
  85% {background: #c0392b }
  90% {background: #bdc3c7 }
  95% {background: #7f8c8d }
}

@-moz-keyframes colorchange /* Firefox */
{
  0%,100% {background: #1abc9c }
  5% {background: #2ecc71 }
  10% {background: #3498db }
  15% {background: #9b59b6 }
  20% {background: #34495e }
  25% {background: #16a085 }
  30% {background: #27ae60 }
  35% {background: #2980b9 }
  40% {background: #8e44ad }
  45% {background: #2c3e50 }
  50% {background: #f1c40f }
  55% {background: #e67e22 }
  60% {background: #e74c3c }
  65% {background: #ecf0f1 }
  70% {background: #95a5a6 }
  75% {background: #f39c12 }
  80% {background: #d35400 }
  85% {background: #c0392b }
  90% {background: #bdc3c7 }
  95% {background: #7f8c8d }
}

@-o-keyframes colorchange /* Opera */
{
  0%,100% {background: #1abc9c }
  5%  {background: #2ecc71 }
  10% {background: #3498db }
  15% {background: #9b59b6 }
  20% {background: #34495e }
  25% {background: #16a085 }
  30% {background: #27ae60 }
  35% {background: #2980b9 }
  40% {background: #8e44ad }
  45% {background: #2c3e50 }
  50% {background: #f1c40f }
  55% {background: #e67e22 }
  60% {background: #e74c3c }
  65% {background: #ecf0f1 }
  70% {background: #95a5a6 }
  75% {background: #f39c12 }
  80% {background: #d35400 }
  85% {background: #c0392b }
  90% {background: #bdc3c7 }
  95% {background: #7f8c8d }
}