* {
    text-align: center;
}
body {
  margin: 0;
  padding: 0;
}

body {
  display: grid;
  grid-template-areas:
    "brain brain"
    "hzom hbie"
    "human zombie";
}

h2, p {
  margin: 10px;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: #333333;
  display: flex;
}

ul li a {
  display: block;
  color: white;
  padding: 14px 16px;
  text-decoration: none;
}

ul li a:hover {
  background-color: #111111;
}

#div1 {
  background-color: yellow;
  padding: 20px;
}

@media screen and (min-width: 0px) and (max-width: 599px) {
  ul {flex-direction: column;}
  #div1 {display: none;}
  body {font-size: 0.5em;}
  img {width: 70px; height: 70px;}
}

@media screen and (min-width: 600px) and (max-width: 1199px) {
 #div1 {
  width: 100px;
  height: 100px;
  transition: width 2s;
 }

 #div1:hover {width: 560px;}
 body {font-size: 0.75em;}
 img {width: 100px; height: 100px;}
}

@media screen and (min-width: 1200px) {
 body {
    font-size: 1.5em;
    animation-name: spin;
    animation-duration: 10s;
    animation-timing-function: linear;
    animation-delay: 1s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
 }
 @keyframes spin {
  0%   { transform: rotate(0deg); background-color: white; }
  25%  { transform: rotate(-15deg); background-color: orange; }
  50%  { transform: rotate(15deg); background-color: green; }
  75%  { transform: rotate(-8deg); background-color: blueviolet; }
  100% { transform: rotate(8deg); background-color: navy; }
 }
 img {width: 200px; height: 200px;}
}