h1 { text-shadow:2px 2px 2px #023020; color:black ; } 



body { 
	background-color:#8A8F91; 

#beat{ border-radius: 30px;  background: #2A7B9B;
background: linear-gradient(360deg,rgba(42, 123, 155, 1) 0%, rgba(87, 199, 133, 1) 62%, rgba(255, 255, 255, 1) 100%); box-shadow: 2px 2px 2px #001430;} 
  
a:link {
	color: blue;
}
a:visited {
	color: white;
}
a:hover {
	color: black;
}

  
  
  
.box { border-radius: 30px;
  padding: 15px;
  margin-bottom: 20px;
  border: 2px solid black;
  text-align: center;}
  
  #boom{border-radius: 30px;  background: #2A7B9B;
background: linear-gradient(360deg,rgba(42, 123, 155, 1) 0%, rgba(87, 199, 133, 1) 62%, rgba(255, 255, 255, 1) 100%); box-shadow: 2px 2px 2px #001430;}
    100%);
  
  
  
}
#circle {
 width: 50px;
 height: 50px;
 border-radius:100%;
  box-shadow:5px 5px 5px;
 background-color: black;
  position: relative;
  animation-name: color-change;
  animation-duration: 5s; 
  animation-iteration-count: infinite;}
@keyframes color-change {
0% {background-color: white; left: 0; top: 0;}
  25% {background-color: grey; left: 175px; top: 25px;}
  50% {background-color:  black; left: 330px; top: 0;}
  75% {background-color:  blue; left: 175px; top: 25px;}
  100% {background-color: green; left: 0; top: 0;}
  
}

#wazam{background: #2A7B9B;
background: linear-gradient(360deg,rgba(42, 123, 155, 1) 0%, rgba(87, 199, 133, 1) 62%, rgba(255, 255, 255, 1) 100%); box-shadow: 2px 2px 2px #001430;}