@charset "UTF-8";
html {
  width: 100%;
  height: 100%;
}

body {
  height: 100%;
  width: 730px;
  margin: 0 auto;
}

h1 {
  margin: 0;
  padding: 10px;
  background-color: pink;
  line-height: 1em;
  text-align: center;
}

h2,
h3 {
  margin: .5em 0 0 0;
}

p, ul {
  margin: 0.3em 0;
}

.rainbow {
  animation-name: rainbow;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes rainbow {
  /* 虹アニメーション */
  from {
    color: #fd3838;
  }
  14% {
    color: #ff7f2b;
  }
  29% {
    color: #ffc513;
  }
  43% {
    color: #28b731;
  }
  57% {
    color: #4bd9ea;
  }
  71% {
    color: #5e7dff;
  }
  86% {
    color: #aa6dca;
  }
  to {
    color: #fd3838;
  }
}