body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  color: white;
}

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;

  background-image: url(wave-haikei.svg);
  background-position: bottom center;
  background-repeat: no-repeat;
  background-size: cover;
}

.card {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding-inline: 20px;

  /* From https://css.glass */
  background: rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

button {
  cursor: pointer;
  padding: 8px 16px;
  background-color: lightblue;
  border-radius: 80px;
}

input {
  border-radius: 80px;
  padding: 8px 16px;
}

#reload {
  margin: 20px;
}

fieldset {
  display: contents;
}

.field {
  position: relative;
}

.field label {
  position: absolute;
  left: 12px;
  top: 12px;
  color: #585858ff;
  background: transparent;
  pointer-events: none;
  padding: 0px 4px;
  transition: 0.2s;
}

.field input:focus {
  outline: none;
}

.field input:focus + label {
  top: -4px;
  font-size: 12px;
  color: #333;

  /* From https://css.glass */
  background: rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}

#hNumber {
  max-width: 25px;
}

#hNumber:focus {
  outline: none;

  /* From https://css.glass */
  background: rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

input {
  background: transparent;
  border-radius: 16px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

#guess {
  max-width: 80px;
}

#h2 {
  margin: 0;
  height: 32px;
}

.span p {
  font-size: 20px;
  font-weight: bold;
}

/* Chrome, Edge, Safari */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield; /* modern */
}

/* Glass Buttons */
.glass-button {
  padding: 10px 24px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 26px;
  color: #ffffff;
  font-size: 0.95em;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
}

.glass-button:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
  box-shadow: 0 12px 40px 0 rgba(31, 38, 135, 0.5);
}

.glass-button:active {
  transform: translateY(0);
  box-shadow: 0 4px 20px 0 rgba(31, 38, 135, 0.3);
}

.glass-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}