*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto;
  font-size: var(--font-size);
}

html,
body {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  width: 100vw;
  margin: 0;
  padding: 0;
  overflow: hidden;
  overscroll-behavior-y: none;
  background: var(--background);
  color: var(--text-color);
  accent-color: var(--sf-color);
  -webkit-font-smoothing: antialiased;
}

@media (prefers-reduced-motion) {
  
  *,
  *::before,
  *::after {
    animation-duration: 0s !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

a {
  color: var(--sf-color);
  font-weight: 600;
  text-underline-offset: 3px;
  text-decoration-color: var(--sf-color-light);
}

html {
  color-scheme: light dark;
}

:root {
  --sf-color: light-dark(#0071E3, #0071E3);
  --text-color: CanvasText;
  --text-dimmed: light-dark(#838383, #bebebe);
  --delimiter: light-dark(#e3e2e2, #353535);
  --background: light-dark(#F2F2F7, #000000);
  --box-background: light-dark(#FFFFFF, #161617);

  --top-gradient: linear-gradient(90deg, light-dark(#3F85C6, #0E54FF) 16%, light-dark(#A568D0, #38C7FF) 41%, light-dark(#D9519C, #9939FF) 63%, light-dark(#EF5525, #FF6B90) 100%);
  --top-gradient-filter: linear-gradient(270deg, light-dark(rgba(245, 245, 247, 0.50), rgba(0, 0, 0, 0.50)) 0%,
      light-dark(rgba(245, 245, 247, 0.00), rgb(0, 0, 0)) 26%, light-dark(rgba(245, 245, 247, 0.00), rgba(0, 0, 0, 0.00)) 77%, light-dark(rgba(245, 245, 247, 0.50), rgba(0, 0, 0, 0.50)) 100%), linear-gradient(2
70deg, light-dark(rgba(245, 245, 247, 0.25), rgba(0, 0, 0, 0.25)) 0%, light-dark(rgba(245, 245, 247, 0.00), rgba(0, 0, 0, 0.00)) 10%, light-dark(rgba(245, 245, 247, 0.00), gba(0, 0, 0, 0.00)) 91%, light-dark(rg
ba(245, 245, 247, 0.25), rgba(0, 0, 0, 0.25)) 100%);

  --padding: 10px;
  --padding-thicker: calc(var(--padding) * 1.5);
  --padding-double: calc(var(--padding) * 2);
  --form-element-height: 30px;
  --border-radius: 6px;
  --border-radius-large: 20px;

  --font-family: system-ui, -apple-system, "Segoe UI", Roboto;
  --font-size: 14px;

  --ease-out-cubic: cubic-bezier(0.16, 1, 0.29, 0.99);
  --ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
}

body {
  position: relative;
  min-block-size: 100%;
  overflow-y: auto;
  
  &::after {
    content: "";
    position: absolute;
    opacity: 0.5;
    z-index: 0;
    top: -150px;
    left: 50%;
    translate: -50%;
    filter: blur(50px);
    inline-size: 920px;
    block-size: 254px;
    border-radius: 450px / 130px;
    background-repeat: no-repeat;
    background-image: var(--top-gradient);
  }
  
  &::before {
    content: "";
    position: absolute;
    opacity: 0.75;
    z-index: 1;
    top: 0;
    left: 50%;
    translate: -50%;
    inline-size: 1180px;
    block-size: 200px;
    background-repeat: no-repeat;
    background-image: var(--top-gradient-filter);
  }
}

main {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  inline-size: 700px;
  max-inline-size: 90%;
  margin: auto;
}

a {
  display: flex;
  align-items: center;
  gap: 5px;
  block-size: var(--form-element-height);
  margin-top: 20px;
  padding-inline: 20px;
  border: none;
  border-radius: 20px;
  font-size: calc(var(--font-size) + 1px);
  font-weight: 500;
  color: white;
  text-decoration: none;
  letter-spacing: -0.22px;
  background: var(--sf-color);

  sf-symbol {
    top: -3px;
  }
}


button {
  display: flex;
  align-items: center;
  gap: 5px;
  block-size: var(--form-element-height);
  margin-top: 20px;
  padding-inline: 20px;
  border: none;
  border-radius: 20px;
  font-size: calc(var(--font-size) + 1px);
  font-weight: 500;
  color: white;
  letter-spacing: -0.22px;
  background: var(--sf-color);
  
  sf-symbol {
    top: -3px;
  }
}

h1 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  font-size: 48px;
  font-weight: 600;
  color: var(--text-color);
  letter-spacing: -0.14px;
  text-align: center;
  line-height: 48px;
  
  @media (max-width: 500px) {
    font-size: 40px;
  }
  
  img {
    inline-size: 144px;
    margin-top: 40px;
  }
}

h2 {
  font-size: 17px;
  font-weight: 500;
  color: var(--text-dimmed);
  letter-spacing: 0.23px;
  text-align: center;
  line-height: 25px;
  
  @media (max-width: 500px) {
    font-size: 18px;
  }
}

footer {
  opacity: 0.8;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: auto;
  padding-block: var(--padding-double);
  font-size: calc(var(--font-size));
  color: var(--text-dimmed);
  font-weight: 500;
}