:root {
	--primary: rebeccapurple; 
}

body {
	background: rgb(250,173,255);
	background: linear-gradient(209deg, rgba(250,173,255,1) 9%, rgba(211,173,255,1) 33%, rgba(173,255,185,1) 53%, rgba(255,248,0,1) 75%, rgba(255,248,0,0) 100%);
  background-repeat: no-repeat;
}
#container {
	width: 100%;
  max-width: 1200px;
  margin: auto 0;
  background-color: var(--primary);
}

#head,
#main {
	padding: 1em;
}

.text-center {
	text-align: center;
}
.shadow {
  /*
  	horizontal offset, vertical offset, blur, color
  */
	text-shadow: 2px 2px 5px rebeccapurple, 12px 12px 12px blue, 5px 5px 5px red;  
}
.box-shadow {
	box-shadow: -15px 5px 5px black;
}

#blue-box {
	width: 50px;
  height: 50px;
  /* if you want movement in your animaiton, the position of the animation element should be set to "relative" */
  position: relative;
  background-color: orangered;
  border-radius: 50%;
  /* the name of the animation to apply to the element */
  animation-name: color-change;
  /* how long the animation should take */
  animation-duration: 10s;
  /* how many times the animaiton through run */
  animation-iteration-count: infinite;
  /* how smooth the animation should be */
  animation-timing-function: linear;
}

#head {
	position: absolute;
  animation-name: head-move;
  animation-duration: 5s;
  animation-iteration-count: infinite;
}

#pause-head,
#pause-ball {
	position: relative;
  z-index: 1;
  cursor: pointer;
}

/* 
	@keyframes is the css function that actually creates the animation 
	@keyframes is followed by the name of the animation itself
*/
@keyframes color-change {
  /* 
  	the percentages represent the timing of the animation	
  	i.e. "25%" represents 1/4 through the animation
  */
  0% {
    left: 0;     
    transform: scale(1);
  }
  25% {
    transform: scale(2);
  }
  50% {
    left: 90%; 
    transform: scale(1);
  }
  75% {
    transform: scale(2);
  }
  100% {
    left: 0; 
    transform: scale(1);
  }
}
@keyframes head-move {
  0% {top: 0; transform: rotate(90deg);}
  50% {top: 50%; transform: rotate(180deg);}
  100% {top: 0; transform: rotate(90deg);}
}

.hex1 {
    width: 0;
    border-bottom: 30px solid #6C6;
    border-left: 52px solid transparent;
    border-right: 52px solid transparent;
}
.hex2 {
    width: 104px;
    height: 60px;
    background-color: #6C6;
}
.hex3 {
    width: 0;
    border-top: 30px solid #6C6;
    border-left: 52px solid transparent;
    border-right: 52px solid transparent;
}