* {
  box-sizing: border-box;
}

:root {
  --primary: #9761FA;
  --secondary: #2DCB89;
  --tertiary: #1ED6D6;
  --background: #E6E5E5;

  --card: #FFFFFF;
  --card-alt: #f3f6f6;

  --default-radius: 30px;
  --default-radius-2: 20px;

  --button-text: #FFFFFF;

  --main-image-size: 250px;
  --main-image-offset: calc(var(--main-image-size) / 2);

  @media (prefers-color-scheme: dark) {
    --background: #1a1a1a;

    --card: #111111;
    --card-alt: #212425;
  }
}

html {
  height: 100dvh;
  height: 100vh;
  height: 100%;

  & body {
    height: 100dvh;
    height: 100vh;
    height: 100%;

    margin: 0;
    padding: 0;
    font-family: 'Roboto', sans-serif;
    background-color: var(--background);
    color: var(--primary);

    & .card {
      background-color: var(--card);
      border-radius: var(--default-radius);
    }

    & button {
      height: 54px;
      width: 100%;
      font-size: 1.2rem;
      background: linear-gradient(40deg, var(--secondary), var(--tertiary));
      color: var(--button-text);
      border-radius: var(--default-radius);
      border: none;
    }
  }
}