html {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  /* display: flex; */
  /* justify-content: center; */
}

#initial-page {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--blue);
  background-size: 5px 5px, 100% 100%;
}

#initial-page input {
  width: 220px;
  height: 40px;
  border: none;
  position: absolute;
  left: 41.4%;
  right: 38.54%;
  top: 41.5%;
  bottom: 48.73%;

  background: var(--input-background);
  border-radius: 10px;

  font-family: Poppins;
  font-style: normal;
  font-weight: bold;
  font-size: 20px;
  display: flex;
  align-items: center;
  text-align: center;
}

#initial-page input::placeholder {
  font-family: Poppins;
  font-style: normal;
  font-weight: bold;
  font-size: 18px;

  display: flex;
  align-items: center;
  text-align: center;

  color: var(--placeholder);
}

textarea:focus,
input:focus {
  outline: none;
}

#green_vector {
  width: 100%;
  height: 50%;
  position: absolute;
  left: 0%;
  right: 0%;
  top: 53.42%;
  bottom: 0%;
}

#play_button {
  width: 150px;
  height: 150px;
  position: absolute;
  left: 44%;
  top: 64%;
  transform: scale(1);
  transition: transform 0.1s ease;
  filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
}

#play_button:hover {
  cursor: pointer;
  transform: scale(1.1);
}

#name_validation {
  font-family: Poppins;
  font-style: normal;
  font-weight: bold;
  font-size: 14px;

  color: var(--name-validation);
  position: absolute;
  bottom: 47.5%;
  left: 41.25%;
}

h1 {
  font-family: "Londrina Solid", cursive;
  font-style: normal;
  font-weight: bold;
  font-size: 80px;
  color: var(--white);

  position: absolute;
  left: 35%;
}

@media screen and (max-width: 600px) {
}