body {
  margin: 0;
  padding: 0;
  background-color: #006af8;
  font-family: "Noto Sans JP", sans-serif;
  overflow: hidden;
}

header {
  align-items: center;
  text-align: center;
  padding: 20px;
}

header img {
  max-width: 100%;
  height: auto;
}

#typing-welcome,
#typing-additional {
  color: white;
}

main {
  text-align: center;
  margin: 20px auto;
}

.neon-tail,
.neon-explosion {
  position: fixed;
}

.neon-tail {
  width: 4px;
  height: 4px;
  background-color: yellow;
  border-radius: 50%;
  transform-origin: center;
  transform: scale(0);
  transition: transform 0.3s ease-out;
}

.neon-explosion {
  width: 10px;
  height: 10px;
  background-color: yellow;
  border-radius: 50%;
  transform-origin: center;
  animation: explode 0.5s ease-out;
  pointer-events: none;
}

@keyframes explode {
  to {
    transform: scale(2);
    opacity: 0;
  }
}

button {
  background-color: white;
  color: black;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
}

button:hover {
  background-color: black;
  color: white;
}

@media only screen and (max-width: 600px) {
  header img {
    max-width: 40%;
  }

  h1 {
    font-size: 18px;
  }

  p {
    font-size: 14px;
  }
}