body {
  color: #fff;
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;

  .navbar {
    margin-top: 5vh;
    display: flex;
    width: 485px;
    height: 63px;
    justify-content: space-around;
    text-align: center;
    align-items: center;
    background: #f36214;
    border-radius: 93px;

    p {
      height: 20px;
      font-family: "Poppins";
      font-size: 16px;
      line-height: 20px;
      text-align: center;
      color: #fff;
      cursor: pointer;
      transition: 0.1s ease-in-out;

      &:hover {
        color: #e2e2e2;
      }
    }

    .language {
      display: flex;
      align-items: center;
      height: 21px;

      .flag {
        width: 51px;
        height: 21px;
      }
    }

    .line {
      border: 1px solid #fff;
      height: 22px;
    }
  }

  .box {
    margin-top: 15vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #1b120e;
    padding: 0 120px 20px;
    border: 1px solid #f36214;
    border-radius: 51px;

    h1 {
      margin: 44px 0 0 0;
      font-family: "ClashDisplay-Semibold";
      font-size: 36px;
      font-weight: 600;
      color: #f36214;
    }

    h3 {
      margin-top: 10px;
      font-family: Poppins;
      font-weight: 400;
      font-size: clamp(14px, 3vw, 16px);
      line-height: 100%;
      letter-spacing: 0%;
      text-align: center;
      color: #945833;
    }

    .boxInput {
      width: 100%;

      p {
        font-family: Poppins;
        font-size: 16px;
        color: #fff;
        margin-bottom: 6px;
      }

      input {
        background-color: #150d0a;
        color: #945833;
        border-radius: 73px;
        height: 42px;
        width: 454px;
        padding: 2px 20px;
        border: 0;
        outline: none;

        &::placeholder {
          color: #945833;
        }
      }
    }

    .boxOption {
      width: 100%;
      display: flex;
      justify-content: space-between;

      .rememberme,
      .forgotpassword {
        display: flex;
        align-items: center;
        margin: 10px 0 30px;
        cursor: pointer;

        p {
          font-family: 'Poppins';
          font-size: 14px;
          color: #fff;
        }
      }

      .rememberme {
        .neon-checkbox {
          --primary: #b66330;
          --primary-dark: #663c22;
          --primary-light: #d36c2c;
          --size: 20px;
          margin-right: 5px;
        }

        p {
          margin: 0;
        }
      }

      .forgotpassword {
        p {
          text-decoration: underline;
        }
      }
    }

    .button {
      font-family: 'Poppins';
      font-weight: 600;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 0 24px;
      gap: 4px;
      width: 457px;
      height: 44px;
      background: #f36214;
      border-radius: 43px;
    }

    .box-p {
      font-family: 'Poppins';
      font-size: 14px;
      text-align: center;
      color: #f36214;

      a {
        color: #fff;
      }
    }
  }

  .glow {
    position: fixed;
    width: 1561px;
    height: 1561px;
    left: -243px;
    top: -725px;
    background: radial-gradient(50% 50% at 50% 50%, #42281a 0%, rgba(15, 11, 10, 0) 100%);
    z-index: -1;
  }

  /* Tablet (max 1024px) */
  @media (max-width: 1024px) {
    .navbar {
      width: 400px;
    }

    .box {
      padding: 0 80px 20px;

      .boxInput input,
      .button {
        width: 380px;
      }
    }
  }

  /* Mobile (max 767px) */
  @media (max-width: 767px) {
    .navbar {
      width: 90%;
      height: auto;
      padding: 3px 11px;
    }

    .box {
      width: 90%;
      padding: 0 35px 20px;
      margin-top: 12vh;
      border-radius: 30px;

      h1 {
        font-size: 28px;
        margin: 30px 0 0;
      }

      .boxInput input,
      .button,
      .boxInput {
        width: 100%;
      }

      .boxOption {
        flex-direction: column;
        gap: 10px;
      }
    }
  }
}