* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
:root {
  --fm-sora: "Sora", sans-serif;
  --fm-roboto: "Roboto Mono", monospace;
  --fm-roboto-flex: "Roboto Flex", sans-serif;
}
html {
  width: 100vw;
}
body {
  background-color: #020202;
  font-family: var(--fm-sora);
  color: white;
  background-image: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 1),
      rgba(0, 0, 0, 0)
    ),
    /* Camada 1: Gradiente */ url("assets/Shapes.png"); /* Camada 2: Imagem */
  background-repeat: no-repeat;
}

@media (width < 27.9375rem) {
  .container {
    padding: 0 2.8125rem;
  }
  header {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-top: 2.75rem;
    margin-bottom: 2.75rem;
  }
  #hero {
    display: flex;
    justify-content: start;
    flex-direction: column;
    gap: 0.5rem;
  }
  #hero p {
    font-family: var(--fm-roboto-flex);
    font-weight: 600;
    line-height: 150%;
    color: #d9d9d9;
  }
  #hero h1 {
    font-family: var(--fm-roboto-flex);
    font-weight: 900;
    line-height: 150%;
    font-size: 2.5rem;
    margin-bottom: 2.625rem;
  }

  #content h3 {
    margin-bottom: 1rem;
  }
  #content p {
    color: #d9d9d9;
    margin-bottom: 2.5rem;
  }

  #inputs-container {
    display: flex;
    justify-content: center;
    gap: 32px;
    text-align: center;
  }
  label {
    font-weight: 700;
    color: #d9d9d9;
  }

  #number,
  #range,
  #range-end {
    width: 6rem;
    height: 5.5rem;
    background-color: #0f0e0f;
    border: none;
    border-radius: 0.625rem;
    margin-top: 1rem;
    color: #ffffff;
    padding: 5px;
    font-size: 32px;
    text-align: center;
  }

  #number:hover,
  #range:hover,
  #range-end:hover {
    border: 0.1875rem solid transparent;
    background-image: linear-gradient(#242224, #242224),
      /* Fundo branco interno */
        linear-gradient(
          90deg,
          #77c0af 0%,
          #d1dc97 14.84%,
          #e9a9b3 32.15%,
          #d586e0 65.79%,
          #91a1fa 84.58%
        );
    background-origin: border-box;
    background-clip: padding-box, border-box;
  }
  #number:focus,
  #range:focus,
  #range-end:focus {
    border: 0.1875rem solid transparent;
    outline: none;
    background-image: linear-gradient(#242224, #242224),
      /* Fundo branco interno */
        linear-gradient(
          90deg,
          #77c0af 0%,
          #d1dc97 14.84%,
          #e9a9b3 32.15%,
          #d586e0 65.79%,
          #91a1fa 84.58%
        );
    background-origin: border-box;
    background-clip: padding-box, border-box;
  }
  #repeat-number,
  #label-number {
    width: 0.625rem;
  }
  .footer-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 16px;
    margin-top: 16px;
  }
  .label-repeat {
    display: flex;
    gap: 1rem;
  }
  #sortear {
    display: flex;
    width: 19.875rem;
    height: 3.5rem;
    align-items: center;
    justify-content: center;
    font-family: var(--fm-sora);
    font-weight: 700;
    background-color: #242224;
    color: white;
    gap: 16px;
    font-size: 1.5rem;
    margin-top: 2rem;
    border: none;
    border-radius: 0.625rem;
  }
  #sortear-novamente {
    display: flex;
    width: 19.875rem;
    height: 3.5rem;
    align-items: center;
    justify-content: center;
    font-family: var(--fm-sora);
    font-weight: 700;
    background-color: #242224;
    color: white;
    gap: 16px;
    font-size: 1rem;
    margin-top: 2rem;
    margin-bottom: 1.25rem;
    border: none;
    border-radius: 0.625rem;
  }
  .hero {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 0.9375rem;
  }
  .title {
    color: #c74fff;
  }
  .about {
    display: flex;
    flex-direction: column;

    margin-top: 0.3125rem;
    font-size: 0.875rem;
    color: #c7c7c7;
  }

  #content-secondary {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1rem;
  }

  .results {
    display: flex;
    justify-content: center;
    gap: 2rem;
    font-size: 1.5rem;
  }
}

#content-secondary {
  display: none;
}