html, body {
  padding:0;
  margin:0;
  font-family: Verdana;
}

animation-world {
  display:block;
  margin: 0 auto;
  max-width:1000px;
  border:2px solid black;
}

animation-world nav {
  padding:1em;
  border-bottom:2px solid black;
  background:#eee;
}

animation-world .list {
  display:grid;
  grid-template-columns: 33% 33% 34%;
  grid-template-rows: 33% 33% 34%;
  height:1000px;
}
animation-world .record {
  line-height:333px;
  text-align:center;
  font-weight: bold;
  font-size:50px;
  vertical-align: middle;
}

.record-1 { color:white; background: green;}
.record-2 { color:white; background: red;}
.record-3 { color:white; background: blue;}
.record-4 { color:white; background: orange;}
.record-5 { color:white; background: purple;}
.record-6 { color:white; background: black;}
.record-7 { color:white; background: silver;}
.record-8 { color:white; background: teal;}
.record-9 { color:white; background: pink;}

@keyframes fadeInOut {
  from { opacity: 0; background: white; }
  33% { opacity: 1; background: black; }
  66% { opacity: 0.5; background: black; }
  100% { opacity: 1 }
}
