p {
  color: white;
  font-size: 1em;
  font-family: serif;
}

span {
  font-size: 3em;
  font-family: monospace;
  display: flex;
  justify-content: center;
}

.test {
  font-size: 1em;
}

html {
  background-image: url(https://sozaino.site/wp-content/uploads/2022/12/game2202-.png);
}

html {
  background-size: cover;
}

.container {
  height: 300px;
  width: 500px;
  position: relative;
}

.image {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  opacity: 0;
  background-size: cover;
  background-position: center center;

  animation: image-switch-animation 10s infinite;
}

.src1 {
  background-image: url(https://estclub.co.jp/wp-content/themes/est/assets/images/school/badminton/img_hero.jpg);
}

.src2 {
  background-image: url(https://www.kurume-it.ac.jp/future/wp-content/uploads/2022/06/AdobeStock_398376730-900x600.jpeg);
}

@keyframes image-switch-animation {
  0% {
    opacity: 0;
  }

  5% {
    opacity: 1;
  }

  25% {
    opacity: 1;
  }

  30% {
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}

.image:nth-of-type(1) {
  animation-delay: 0s;
}

.image:nth-of-type(2) {
  animation-delay: 2s;
}

p {
  animation-duration: 3s;
  animation-name: slidein;
}

@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%;
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}

div {
  color: gold;
  font-size: x-large;
}