body {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  /* font-family: Tahoma, Arial, Helvetica, sans-serif; */
  font-size: 3.6vh;
  background: #001 url(../images/hubble-friday.jpg);
  cursor: none;
}
section {
  box-sizing: border-box;
  height: 33.33333vh;
  width: 33.33333%;
  line-height: 7.7vh;
  padding: 1vh 2% 2vh;
  text-align: center;
  overflow: hidden;
  /* text-overflow: ellipsis; */
  color: rgba(221, 221, 221, 0.75);
  text-shadow: rgba(221, 221, 221, 0.95) 0 0 7px;
  animation: fading 10s infinite ease-in-out;
}

section:nth-child(1) {
  background: rgba(12, 8, 59, .95);
  animation-delay: 11s;
}
section:nth-child(2) {
  background: rgba(0, 0, 0, .95);
  color: rgba(217, 235, 190, 0.75);
  animation-delay: 15s;
}
section:nth-child(3) {
  background: rgba(13, 138, 96, .95);
  animation-delay: 9s;
}
section:nth-child(4) {
  background: rgba(184, 235, 102, .95);
  color: rgba(12, 8, 59, .95);
  text-shadow: rgba(0, 0, 37, 0.9) 0 0 4px;
  animation-delay: 10s;
}

/* central sun panel */
section:nth-child(5) {
  background: rgb(2, 0, 12, .85) url(../images/sun/sun-eclipsed.gif) no-repeat;
  /* https://css-tricks.com/almanac/properties/b/background-size/ */
  background-size: 103% auto cover;
  background-position: 50% 50%;
  color: rgba(4, 4, 51, .95);
  font-weight: bold;
  line-height: 1em;
  animation: none;
  opacity: .85;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
section:nth-child(5) p {
  margin: 0.25em;
}
section:nth-child(5) .impact {
  font-size: .6em;
  padding: 0;
}
section:nth-child(5) .scale {
  white-space: nowrap;
}
section:nth-child(5) .severity {
  margin-top: 1.75em;
}
/* /central sun panel */

section:nth-child(6) {
  background: rgba(0, 3, 48, .95);
  animation-delay: 13s;
}
section:nth-child(7) {
  background: rgba(182, 25, 130, .95);
  animation-delay: 14s;
}
section:nth-child(8) {
  background: rgba(221, 221, 221, .95);
  color: rgba(143, 21, 102, .95);
  text-shadow: rgba(0, 0, 17, 0.9) 0 0 4px;
  animation-delay: 8s;
}
section:nth-child(9) {
  background: rgba(86, 38, 219, .95);
  animation-delay: 12s;
}

/* animations */

@keyframes fading {
  0%,100% { opacity: 0.1 }
  50% { opacity: 0.9 }
}




/*
1 white water
2 black earth
3 green wood
4 light green wood
5 dull yellow earth
6 white metal
7 red metal
8 white earth
9 purple fire

8:one 8s, 3:two 9s, 4:three 10s, 1:four 11s, 5:five, 9:six 12s, 6:seven 13s, 7:eight 14s, 2:nine 15s
1:four 11s, 2:nine 15s, 3:two 9s, 4:three 10s, 5:five, 6:seven 13s, 7:eight 14s, 8:one 8s, 9:six 12s
*/