body {
  height: 100%;
}

body {
  animation: disco 12s infinite;
  opacity: 50%;
}

@keyframes disco {
0% { background-color: crimson; }
11% {background-color:blue;}
22% {background-color: yellow;}
33% {background-color: blueviolet;}
44% {background-color: aqua;}
55% {background-color: fuchsia;}
66% {background-color: chartreuse;}
77% {background-color: indigo;}
88% {background-color:gold;}
100% {background-color: crimson;}
}

.dance-floor{
  display: grid;
  grid-template-rows: 200px 200px 200px 200px;
  grid-template-columns: 200px 200px 200px 200px 200px 200px 200px;
  padding: 25px;
}

.dance1 {
animation: dance1 4s infinite;
grid-area: 1 / 1 / 2 / 2;
}

@keyframes dance1 {
  0% {rotate: -45deg;}
  25% {rotate: 0deg;}
  50% {rotate: 45deg;}
  75% {rotate: 0deg;}
  100% {rotate: -45deg;}
}
.dance2{
animation: dance2 2s infinite;
grid-area: 1 / 6 / 2 / 7;
}

@keyframes dance2 {
  0% {transform: scaleY(1);}
  50% {transform: scaleY(1.5);}
  100% {transform: scaleY(1);}
}
.dance3{
  animation: dance3 8s infinite;
  grid-area: 2 / 1 / 3 / 2;
}

@keyframes dance3 {
  0% {rotate: -60deg}
  13% {rotate: -30deg}
  26% {rotate: -60deg}
  52% {rotate: 60deg}
  65% {rotate: 30deg}
  78% {rotate: 60deg}
  100% {rotate: -60deg}
} 
.dance4{
  animation: dance4 4s infinite;
  grid-area: 2 / 6 / 3 / 7;
}
@keyframes dance4{
  0% {rotate: -45deg}
  25% {rotate: -45deg; transform: translate(50px, 0px)}
  50% {rotate: 45deg; transform: translate(50px, 20px)}
  75% {rotate: 45deg; transform: translate(0px, 20px)}
  100%{rotate:-45deg}
}
h1{
    color: black;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
    position:static;
    text-align:center;
}