@import url('https://fonts.googleapis.com/css2?family=Courier+Prime:ital,wght@0,400;0,700;1,400;1,700&display=swap');

body {
  background: 
   linear-gradient(rgba(255,0,0,1) 0%, rgba(255,154,0,1) 10%, rgba(208,222,33,1) 20%, rgba(79,220,74,1) 30%, rgba(63,218,216,1) 40%, rgba(47,201,226,1) 50%, rgba(28,127,238,1) 60%, rgba(95,21,242,1) 70%, rgba(186,12,248,1) 80%, rgba(251,7,217,1) 90%, rgba(255,0,0,1) 100%) 
   0 0/100% 200%;
   animation: a 10s linear infinite;
  color: black;
  font-family: "Courier Prime";
}

@keyframes a {
  to {background-position:0 -200%}
}

h1 {
  font-size: 10vw;
  text-align: center;
}

h2 {
  font-size: 5vw;
  text-align: center;
}

h3 {
  font-size: 3vw;
  text-align: center;
}

h4 {
  font-size: 0.75vw;
  text-align: center;
}

button {
  transition: 0.3s;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  background-color: yellow;
  font-family: "Courier Prime";
  padding: 5px;
  border-radius: 50px;
}

img {
  width: 100px;
  padding: 10px;
}

.begin {
  background-color: red;
  font-family: "Courier Prime";
  font-weight: bold;
  font-size: 5vw;
  padding: 2vw;
  border-radius: 100px;
}

.begin:hover {
  background-color: orange;
  cursor: pointer;
}

.begin:active {
  background-color: yellow;
}

.centered_button {
  display: flex;
  justify-content: center;
  align-items: center;
}

input {
  margin: 24px;
  min-width: 200px;
  font-family: "Courier Prime";
  font-weight: bold;
  background-color: yellowgreen;
  border-radius: 50px;
}