* {
  box-sizing: border-box;
  font-family: Roboto, Arial, sans-serif;
  margin: auto;
  background: blue;
}

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 99vw;
  margin: auto;
  height: 98vh;
  /* background-color: black; */
  background: transparent;
  background: radial-gradient(circle, rgb(0, 0, 0) 0%, rgb(255, 0, 0) 35%, rgb(0, 0, 0) 0%);
  /* background: radial-gradient(circle, rgb(0, 0, 0) 5%, rgb(150, 0, 0) 20%, rgb(0, 0, 0) 0%); */
  /* background: radial-gradient(circle, rgb(0, 0, 0) 10%, rgb(160, 0, 0) 35%, rgb(0, 0, 0) 70%); */
  animation: shake 1.25s;
  animation-iteration-count: infinite;
}

h1 {
  text-align: center;
  color: white;
  font: normal 1.0em/2em Verdana, Arial, Helvetica, Tahoma, sans-serif;
  letter-spacing: 0.3em;
  background: transparent;
}

/* img:hover {
  animation: shake 0.5s;
  animation-iteration-count: infinite;
} */

@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}