/** @format */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

h1 {
  text-align: center;
  display: flex;
  justify-content: center; /* Centers horizontally */
  align-items: center; /* Centers vertically */
  height: 10vh; /* Sets the container height to the full viewport height */
  width: 10%; /* Ensures container spans full width */
}

@import url("https://fonts.googleapis.com/css2?family=Sansita+Swashed:wght@600&display=swap");
body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: linear-gradient(45deg, rgb(133, 10, 1), rgb(255, 150, 30));
  font-family: "Sansita Swashed", cursive;
}

/* Layout */

.middle {
  margin: 0 auto;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: xx-large;
  text-align: center;
  display: flex;
  justify-content: center; /* Centers horizontally */
  align-items: center; /* Centers vertically */
  height: 100vh; /* Sets the container height to the full viewport height */
  width: 100%; /* Ensures container spans full width */
}

[type="text"] {
  text-align: center;
}

.label {
  text-align: center;
  display: flex;
  justify-content: center; /* Centers horizontally */
  align-items: center; /* Centers vertically */
  height: 100vh; /* Sets the container height to the full viewport height */
  width: 100%; /* Ensures container spans full width */
}

#nameInput {
  width: 175px;
}

.container {
  text-align: center;
  display: flex;
  justify-content: center; /* Centers horizontally */
  align-items: center; /* Centers vertically */
  height: 100vh; /* Sets the container height to the full viewport height */
  width: 100%; /* Ensures container spans full width */
}

input[type="text"] {
  /* Optional: centers the *text* inside the input box as well */
  text-align: center;
}
[class="confirm-button"] {
  text-align: center;
  display: flex;
  justify-content: center; /* Centers horizontally */
  align-items: center; /* Centers vertically */
  margin: 0 auto;
}

p {
  width: 4000px;
}