body {
  background: url('images/backgroundcropped.gif') no-repeat center center;
  background-repeat: repeat;
  background-size: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  margin: 0;
}


@media (max-width: 600px) {
  #sizzle-reel {
    display: block;
    width: 45vh;
    height: 34vh;
    max-height: 50vh;
    box-sizing: border-box;
  }
  #sizzle-reel video, #sizzle-reel img {
    width: 46vh;
    height: 35vh;
    object-fit: contain;
  }


}
@media (max-width: 600px) {
  #icon-bar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    width: 70vw;
    max-width: 550px;
    gap: 6vw 2vw;
    justify-items: center;
    align-items: center;
  }
  #icon-bar > * {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
  }
}

#icon-bar {
  display: flex;
  margin-top: 40px; flex-wrap: wrap;
  justify-content: space-evenly;
  gap: 48px; transition: filter 0.1s linear;
}
@keyframes moveButton {
  0% { transform: translate(0, 0); }
  25% { transform: translate(5px, -5px); }
  50% { transform: translate(-5px, 5px); }
  75% { transform: translate(5px, 5px); }
  100% { transform: translate(0, 0); }
}

#photo:not(:active),
#video:not(:active),
#info:not(:active),
#blog:not(:active) {
  animation: moveButton 0.6s steps(4) infinite;
}
#photo:active {
  filter: hue-rotate(-67deg);
}

#video:active {
  filter: hue-rotate(-67deg);
}

#info:active {
  filter: hue-rotate(-67deg);
}

#blog:active {
  filter: hue-rotate(-67deg);
}