*,
*::before,
*::after {
  user-select: none;
  box-sizing: border-box;
}

body {
  background-color: #000000;
  color: #ffffff;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  overflow: hidden;
  
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.heading {
  text-align: center;
  font-weight: 300;
  font-size: clamp(2.8rem, 8vw, 6rem);
  letter-spacing: 0.2em;
  line-height: 1;
  word-break: break-word;
}

.heading span:nth-child(1) { color: #878787; }
.heading span:nth-child(2) { color: #d7d7d7; }
.heading span:nth-child(3) { color: #afafaf; }
.heading span:nth-child(4) { color: #5f5f5f; }
.heading span:nth-child(5) { color: #ffffff; }
.heading span:nth-child(6) { color: #373737; }

.container {
  flex: 1 1 auto;
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
}

.countdown {
  font-weight: 200;
  font-size: 6rem;
  font-variant-numeric: tabular-nums;
  font-family: 'Courier New', monospace;
  letter-spacing: 0.1em;
}

.container h2 {
  font-weight: 200;
}

.container input {
  font-size: 16px;
  padding: 10px 20px;
  color: #ffffff;
  background-color: #504f4f95;
  width: 640px;
  outline: none;
  transition: all 0.2s ease-in-out;
  border: 1px solid #ffffff25;
  border-radius: 12px;
}

.container input:hover {
  background-color: #5e5e5e98;
  border-color: #ffffff50;
}

.container input:focus {
  border-color: #ffffff;
  scale: 1.01;
}

.fatal-container, .success-container {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
}

.fatal-container h1, .success-container h1 {
  font-weight: 300;
  font-size: 5rem;
}

.fatal-container p, .success-container p {
  font-size: 22px;
}