@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Sora:wght@100..800&display=swap");

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

:root {
  --shadow: 0px 20px 30px 0px rgba(0, 0, 0, 0.03),
    0px 8px 12px 0px rgba(0, 0, 0, 0.08);
  --font-family: "Poppins", system-ui;

  /* Font size */
  --heading-size: 48px;
  --subheading-size: 20px;
  --placeholder-size: 16px;
  --button-size: 16px;
  --helper-size: 14px;

  /* Font weight */
  --header-weight: 600;
  --subheader-weight: 400;
  --placeholder-weight: 600;
  --button-weight: 600;
  --helper-weight: 400;

  /* Colors */
  --primary: #f9fafb;
  --white: #ffffff;
  --black: #000000;
  --input-bg: #e5e7eb;
  --subheading-color: #6c727f;
  --input-placeholder: #6c727f;
  --button-color: #284bce;

  --radius: 16px;

  font-family: var(--font-family);
}

button {
  font-size: var(--button-size);
}

h1 {
  font-size: var(--heading-size);
  font-weight: var(--header-weight);
  line-height: 1.25;
}

h2 {
  font-size: var(--subheading-size);
  font-weight: var(--subheader-weight);
  color: var(--subheading-color);
  line-height: 1.75;
}

body {
  background-color: var(--primary);
  min-height: 100dvh;
  align-content: center;

  header {
    text-align: center;
    max-width: 700px;
    margin: auto;
    margin-bottom: 60px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;

    .logo {
      width: 100%;
      max-width: 64px;
    }
  }

  main {
    align-content: center;
    margin: auto;
    max-width: 600px;
    background-color: var(--white);
    box-shadow: var(--shadow);
    border-radius: var(--radius);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 32px;

    form {
      margin: auto;
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: 32px;

      .input {
        padding: 20px;
        text-align: center;
        border-radius: var(--radius);
        width: 100%;
        border: 1px solid rgba(0, 0, 0, 0.15);
        background-color: var(--primary);
        font-size: var(--placeholder-size);
        font-weight: var(--placeholder-weight);
        outline: none;

        &::placeholder {
          color: var(--input-placeholder);
          font-size: var(--placeholder-size);
          font-weight: var(--placeholder-weight);
        }
      }

      .button {
        background-color: var(--button-color);
        color: var(--white);
        padding: 20px;
        border-radius: var(--radius);
        cursor: pointer;
        transition: background-color 0.15s;
        width: 100%;
        border: 1px solid var(--button-color);
        font-size: var(--button-size);
        font-weight: var(--button-weight);

        &:hover {
          background-color: #1f3d9e;
        }
      }
    }

    .helper {
      text-align: center;
      font-size: var(--helper-size);
      font-weight: var(--helper-weight);
      color: var(--subheading-color);
    }
  }
}