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

:root {
  --content-primary: #FFFFFF;
  --content-secondary: #C7C9CC;
  --content-tertiary: #D9D9D9;
  --content-brand: #C58DE7;
  --color-inverse: #030203;

  --bg-primary: #020202;
  --bg-secondary: #111012;
  --bg-tertiary: #24222E;
  --bg-brand: #C58DE7;
  --bg-gray: #3D3D3D;

  --accent-pink: #D586ED;
  --accent-blue: #91A1FA;
  --accent-green: #77CC0A;
  --accent-lime: #D1DC97;
  --accent-red: #E9A9B3;

  --gradient-main-color: #77C0AF, #D1DC97 , #E9A9B3, #D586E0, #91A1FA, #77C0AF;

  --gradient-background: linear-gradient(to right, #77CC0A 0%, #D1DC97 100%);
  --gradient-border: linear-gradient(to right, #77CC0A 0%, #D1DC97 100%);
  --gradient-content: linear-gradient(to right, #91A1FA 0%, #C58DE7 100%);

  --ff-sora: 'Sora', sans-serif;
  --sora-lg-size: 72px;
  --sora-lg-lh: 150%;
  --sora-lg-lw: 800;

  --sora-md-size: 40px;
  --sora-md-lh: 130%;
  --sora-md-lw: 800;

  --sora-sm-size: 32px;
  --sora-sm-lh: 130%;
  --sora-sm-lw: 700;

  --ff-roboto-mono: 'Roboto Mono', monospace;
  --roboto-mono-overline-size: 16px;
  --roboto-mono-overline-lh: 150%;
  --roboto-mono-overline-lw: 700;

  --ff-roboto-flex: 'Roboto Flex', sans-serif;
  --roboto-flex-md-size: 16px;
  --roboto-flex-md-lh: 150%;
  --roboto-flex-md-lw: 500;

  --roboto-flex-p-md-size: 14px;
  --roboto-flex-p-md-lh: 130%;
  --roboto-flex-p-md-lw: 500;

  --roboto-flex-p-sm-size: 12px;
  --roboto-flex-p-sm-lh: 150%;
  --roboto-flex-p-sm-lw: 500;

  --roboto-flex-label-md-size: 20px;
  --roboto-flex-label-md-lh: 150%;
  --roboto-flex-label-md-lw: 700;

  --roboto-flex-label-sm-size: 16px;
  --roboto-flex-label-sm-lh: 150%;
  --roboto-flex-label-sm-lw: 700;
}

body {
  margin: 0;
  min-height: 100vh;
  background-color: var(--bg-primary);
  background-image:
    linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, transparent 160%),
    url(assets/background.png);

  display: flex;
  justify-content: center;
  align-items: center;
}

.subtitle {
  font-family: var(--ff-roboto-mono);
  font-weight: var(--roboto-mono-overline-lw);
  font-size: var(--roboto-mono-overline-size);
  line-height: var(--roboto-mono-overline-lh);
  background-image: linear-gradient(to right, var(--content-secondary), var(--bg-gray));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

h2 {
  font-family: var(--ff-sora);
  font-weight: var(--sora-lg-lw);
  font-size: var(--sora-md-size);
}

h3 {
  font-family: var(--ff-roboto-flex);
  font-weight: var(--roboto-flex-label-md-lw);
  font-size: var(--roboto-flex-label-md-size);
  line-height: var(--roboto-flex-label-md-lh);
}

.description {
  font-family: var(--ff-roboto-flex);
  font-weight: var(--roboto-flex-p-md-lw);
  font-size: var(--roboto-flex-p-md-size);
  line-height: var(--roboto-flex-p-md-lh);
  color: var(--content-tertiary);
}

#home {
  width: 390px;
  height: 957px;
}

.number-logo {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-block: 2.75rem;
}

.title {
  color: var(--content-primary);
  margin-inline: 2.2rem;
}

.draw-number {
  color: var(--content-primary);
  margin-inline: 2.2rem;
  margin-top: 2.2rem;
}

.numbers-input-section {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

label {
  font-family: var(--ff-roboto-flex);
  font-weight: var(--roboto-flex-label-md-lw);
  line-height: var(--roboto-flex-label-md-lh);
  font-size: var(--roboto-flex-label-sm-size);
  color: var(--content-secondary);
}

.input-group {
  display: flex;
  flex-direction: column;
  text-align: center;
  margin-top: 2.5rem;
}

input {
cursor: pointer;
height: 3.5rem;
width: 5.4rem;
text-align: center;
color: var(--content-primary);
font-family: var(--ff-sora);
font-weight: var(--sora-md-lw);
font-size: var(--sora-sm-size);
line-height: var(--sora-lg-lh);
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border-radius: .5rem;
background-color: var(--bg-gray);
box-shadow: inset 0 0 5px var(--bg-primary);
border: none;
transition: .2s ease;
}

input:focus-visible {
  outline: none;
  transition: .2s ease;
  box-shadow: inset 0 0 5px var(--bg-primary);
}

input[type="number"]:hover {
  box-shadow: inset 0 0 15px 1px var(--bg-primary);
  transition: .2s ease;
}

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

.toggle-switch {
  display: flex;
  align-items: center;
  margin-top: 1.25rem;
}

.toggle-switch input[type="checkbox"] {
  display: none;
}

.toggle-button-container label[for="slider"] {
  position: relative;
  display: inline-block;
  width: 2rem;
  height: 1.25rem;
  background-color: var(--bg-gray);
  border-radius: 2rem;
  cursor: pointer;
  transition: background-color 0.3s ease;
  box-shadow: inset 0 0 8px var(--bg-secondary);
}

.toggle-button-container label[for="slider"]::before {
  content: '';
  position: absolute;
  top: 50%;
  left: .2rem;
  transform: translateY(-50%);
  width: .9rem;
  height: .9rem;
  background-color: var(--content-primary);
  border-radius: 50%;
  transition: all 0.3s ease;
  box-shadow: 0 0 5px 1px var(--bg-secondary);
}

.toggle-switch-text {
  font-family: var(--ff-roboto-flex);
  font-weight: var(--roboto-flex-p-md-lw);
  font-size: var(--roboto-flex-p-md-size);
  color: var(--content-secondary);
  margin-left: .5rem;
}

.toggle-button-container input[type="checkbox"]:checked + label[for="slider"] {
  transition: .2s;
  background: var(--gradient-content);
  box-shadow: 0 0 5px var(--accent-pink);
}

.toggle-button-container input[type="checkbox"]:checked + label[for="slider"]::before {
  transform: translate(.75rem, -50%);
  box-shadow: 0 0 5px var(--accent-pink);
}

.toggle-button-container :hover {
  scale: 1.1;
  transition: .2s;
}

.draw-button {
  cursor: pointer;
  margin-top: 2.5rem;
  height: 3.5rem;
  width: 20rem;
  background: var(--bg-tertiary);
  border: none;
  border-radius: .5rem;
  color: var(--content-primary);
  font-family: var(--ff-roboto-flex);
  font-weight: var(--roboto-flex-label-md-lw);
  line-height: var(--roboto-flex-label-md-lh);
  font-size: var(--roboto-flex-label-sm-size);

  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  transition: .2s ease;
}

@property --angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

.draw-button::after, .draw-button::before {
  content: '';
  position: absolute;
  height: 100%;
  width: 101.5%;
  background-image: conic-gradient(from var(--angle), transparent 80%, var(--gradient-main-color));
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  z-index: -1;
  padding: 30px;
  border-radius: .5rem;
  animation: 10s spin linear infinite;
}

.draw-button::before {
  filter: blur(.5rem);
}

@keyframes spin {
  from {
    --angle: 0deg;
  }
  to {
    --angle: 360deg;
  }
}

.draw-button::before {
  opacity: 1;
}

.draw-button:hover {
  text-shadow: 0 0 5px var(--bg-tertiary);
  box-shadow: inset 0 0 15px rgb(0, 0, 0);
}

.help {
  margin-top: 4.375rem;
}

span {
  display: flex;
  font-family: var(--ff-roboto-flex);
  font-size: var(--roboto-flex-label-p-md-size);
  font-weight: var(--roboto-flex-p-md-lw);
  line-height: var(--roboto-flex-label-p-md-lh);
  color: var(--bg-brand);
  align-items: center;
  gap: .5rem;
  margin-bottom: .3rem;
}

.tips {
  font-family: var(--ff-roboto-flex);
  font-weight: var(--roboto-flex-p-md-lw);
  font-size: var(--roboto-flex-p-md-size);
  line-height: var(--roboto-flex-p-md-lh);
  color: var(--content-tertiary);
  margin-left: 1.75rem;
}

.first-tip{
  margin-bottom: 2.25rem;
}

#result.hidden,
.initial-step.hidden {
  display: none;
}

.result-title {
  display: flex;
  font-family: var(--ff-roboto-flex);
  font-size: var(--roboto-flex-label-md-size);
  line-height: var(--roboto-flex-md-lh);
  align-items: center;
  color: var(--content-primary);
}

.result-container {
  display: flex;
  flex-direction: column;
  margin-top: 4.4rem;
  align-items: center;
  align-content: center;
}

#result .first-result-text {
  font-family: var(--ff-roboto-mono);
  font-weight: var(--roboto-mono-overline-lw);
  font-size: var(--roboto-mono-overline-size);
  line-height: var(--roboto-mono-overline-lh);
  color: var(--content-secondary);
  text-align: center;
  margin-bottom: 2.5rem;
}

.generated-numbers {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 2rem;

  width: 100%;
  padding: 1rem;
}

.generated-numbers .number-item {
  flex-basis: calc(33.33% - 1.5rem);
  display: flex;
  align-items: center;
  justify-content: center;

  padding: 1rem;
  font-family: var(--ff-roboto-mono);
  font-weight: var(--roboto-mono-overline-lw);
  font-size: 48px;
  line-height: var(--roboto-mono-overline-lh);
  color: var(--bg-brand);
  animation-delay: 1s;
  opacity: 0;
  /* transform: translateY(20px) scale(0.5); */

  transition: fadeInNumber 1s ease;
}

.box-number {
  width: 5rem;
  height: 6.125rem;
  background-color: var(--bg-gray);
  border-radius: 1rem;
  animation: fadeInScaleUp 1s ease-out forwards,
    moveRotate 1s ease-out 1s forwards;
}

@keyframes fadeInNumber {
  to {
    opacity: 1;
  }
}

@keyframes fadeInScaleUp {
  from {
    opacity: 0;
    transform: scale(0);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes moveRotate {
  from {
    transform: rotate(180deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* @keyframes slideToLeft {
  to {
    transform: translateX(-7rem);
  }
} */

.draw-again-button {
  cursor: pointer;
  margin-top: 2.5rem;
  height: 3.5rem;
  width: 20rem;
  background: var(--bg-tertiary);
  border: none;
  border-radius: .5rem;
  color: var(--content-primary);
  font-family: var(--ff-roboto-flex);
  font-weight: var(--roboto-flex-label-md-lw);
  line-height: var(--roboto-flex-label-md-lh);
  font-size: var(--roboto-flex-label-sm-size);

  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  transition: .2s ease;
  transition: transform 0.6s ease;
}

.draw-again-button::after, .draw-again-button::before {
  content: '';
  position: absolute;
  height: 100%;
  width: 101.5%;
  background-image: conic-gradient(from var(--angle), transparent 80%, var(--gradient-main-color));
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  z-index: -1;
  padding: 30px;
  border-radius: .5rem;
  animation: 10s spin linear infinite;
}

.draw-again-button::before {
  filter: blur(.5rem);
}

.draw-again-button::before {
  opacity: 1;
}

.draw-again-button:hover {
  text-shadow: 0 0 5px var(--bg-tertiary);
  box-shadow: inset 0 0 15px rgb(0, 0, 0);
}

.draw-again-button img {
  transition: transform 1s ease;
}

.draw-again-button:hover img{
  transform: rotate(360deg);
}