body {
  display: flex;
  flex-direction: column;
  width: 640px;
  margin: auto;
  background: teal;
  border-left: 2px dotted maroon;
}

main,
header {
  word-wrap: break-word;
  padding: 10px;
  position: relative;
}

main::before {
  content: '';
  display: block;
  height: 15px;
  top: 0;
  left: 0;
  right: 0;
  background-image: url('/_index/img/banner.gif');
}

.quote-wrapper {
  color: gold;
}

h1 {
  position: relative;
  color: maroon;
  text-decoration: underline;
  animation: blink 0.5s infinite step-start;
  transform-origin: center center;
}

h1::before,
h1::after {
  content: '';
  background: white url('/_index/img/new.gif');
  display: block;
  width: 49px;
  height: 15px;
  position: absolute;
  top: 0;
}

h1::before {
  left: 0;
}

h1::after {
  right: 0;
}

h3 {
  animation: blink-colors 1s infinite steps(5, jump-none);
}

section {
  margin: 10px 0;
}

header {
  text-align: center;
}

header img {
  content: url('/_index/img/frog.gif');
  animation: fun-random 0.5s steps(3, jump-none) infinite alternate;
}

.quote-wrapper {
  font-style: italic;
}

#person::before,
#person::after {
  content: ' • ';
}

/* blink animation */

@keyframes blink {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* translate, rotate, fun animation */

@keyframes fun-random {
  0% {
    transform: translate(-20px, 0px) rotate(4deg);
  }
  100% {
    transform: translate(0px, 20px) rotate(-6deg);
  }
}

/* blink with colors */

@keyframes blink-colors {
  0% {
    color: red;
  }
  50% {
    color: yellow;
  }
  100% {
    color: blue;
  }
}