@font-face {
  font-family: "ClashGrotesk";
  src: url("./assets") format("woff2"),
    url("./assets/fonts/ClashGrotesk/ClashGrotesk-Extralight.woff")
      format("woff"),
    url("./assets/fonts/ClashGrotesk/ClashGrotesk-Extralight.ttf")
      format("truetype"),
    url("./assets/fonts/ClashGrotesk/ClashGrotesk-Extralight.eot")
      format("embedded-opentype");
  font-weight: 200;
  font-style: normal;
}

@font-face {
  font-family: "ClashGrotesk";
  src: url("./assets/fonts/ClashGrotesk/ClashGrotesk-Light.woff2")
      format("woff2"),
    url("./assets/fonts/ClashGrotesk/ClashGrotesk-Light.woff") format("woff"),
    url("./assets/fonts/ClashGrotesk/ClashGrotesk-Light.ttf") format("truetype"),
    url("./assets/fonts/ClashGrotesk/ClashGrotesk-Light.eot")
      format("embedded-opentype");
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: "ClashGrotesk";
  src: url("./assets/fonts/ClashGrotesk/ClashGrotesk-Regular.woff2")
      format("woff2"),
    url("./assets/fonts/ClashGrotesk/ClashGrotesk-Regular.woff") format("woff"),
    url("./assets/fonts/ClashGrotesk/ClashGrotesk-Regular.ttf")
      format("truetype"),
    url("./assets/fonts/ClashGrotesk/ClashGrotesk-Regular.eot")
      format("embedded-opentype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "ClashGrotesk";
  src: url("./assets/fonts/ClashGrotesk-Medium.woff2") format("woff2"),
    url("./assets/fonts/ClashGrotesk-Medium.woff") format("woff"),
    url("./assets/fonts/ClashGrotesk-Medium.ttf") format("truetype"),
    url("./assets/fonts/ClashGrotesk-Medium.eot") format("embedded-opentype");
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: "ClashGrotesk";
  src: url("./assets/fonts/ClashGrotesk/ClashGrotesk-Semibold.woff2")
      format("woff2"),
    url("./assets/fonts/ClashGrotesk/ClashGrotesk-Semibold.woff") format("woff"),
    url("./assets/fonts/ClashGrotesk/ClashGrotesk-Semibold.ttf")
      format("truetype"),
    url("./assets/fonts/ClashGrotesk/ClashGrotesk-Semibold.eot")
      format("embedded-opentype");
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: "ClashGrotesk";
  src: url("./assets/fonts/ClashGrotesk/ClashGrotesk-Bold.woff2")
      format("woff2"),
    url("./assets/fonts/ClashGrotesk/ClashGrotesk-Bold.woff") format("woff"),
    url("./assets/fonts/ClashGrotesk/ClashGrotesk-Bold.ttf") format("truetype"),
    url("./assets/fonts/ClashGrotesk/ClashGrotesk-Bold.eot")
      format("embedded-opentype");
  font-weight: bold;
  font-style: normal;
}

:root {
  --primary: #78c2b4;
  --primary-hover: #5a9187;
  --secondary: #e88591;
  --secondary-hover: #c75b6e;
  --tertiary: #c8a5d9;
  --tertiary-hover: #a76b9c;
  --background: #ffffff;

  --on-primary: #ffffff;
  --on-secondary: #ffffff;
  --on-tertiary: #2b2b2b;
  --on-background: #3d3d3d;

  --primary-container: #eff6f5;
  --primary-container-hover: #d1e3e1;
  --secondary-container: #fde5e7;
  --secondary-container-hover: #f8d0d5;
  --tertiary-container: #f3e9fa;
  --tertiary-container-hover: #e1c6e9;
  --surface: #f8f9fa;

  --on-primary-container: #4b9890;
  --on-secondary-container: #c85d6d;
  --on-tertiary-container: #9b72b4;
  --on-surface: #3d3d3d;

  --success: #86d19e;
  --error: #eb7676;
  --surface-container-high: #d9dadf;
  --surface-container: #edeef3;

  --on-success: #3d3d3d;
  --on-error: #ffffff;
  --on-surface-container-high: #404346;
  --on-surface-container: #43484e;

  --outline: #e1e1e1;
  --disabled: #cccccc;
  --placeholder: #b0b0b0;
  --subtext: #6a6a6a;

  --text: #697077;

  --primary-dark: #78c2b4;
  --primary-hover-dark: #5a9187;
  --secondary-dark: #e88591;
  --secondary-hover-dark: #c75b6e;
  --tertiary-dark: #c8a5d9;
  --tertiary-hover-dark: #a76b9c;
  --background-dark: #121212;

  --on-primary-dark: #003731;
  --on-secondary-dark: #4a151d;
  --on-tertiary-dark: #3d2a47;
  --on-background-dark: #e1e1e1;

  --primary-container-dark: #005049;
  --primary-container-hover-dark: #007d7a;
  --secondary-container-dark: #651e29;
  --secondary-container-hover-dark: #8c2a34;
  --tertiary-container-dark: #563766;
  --tertiary-container-hover-dark: #7a4b8c;
  --surface-dark: #1e1e1e;

  --on-primary-container-dark: #a3ded4;
  --on-secondary-container-dark: #fbcdd1;
  --on-tertiary-container-dark: #f3e2fb;
  --on-surface-dark: #eaeaea;

  --success-dark: #86d19e;
  --error-dark: #eb7676;
  --surface-container-high-dark: #383838;
  --surface-container-dark: #2a2a2a;

  --on-success-dark: #1f3a2a;
  --on-error-dark: #3c1010;
  --on-surface-container-high-dark: #ffffff;
  --on-surface-container-dark: #d1d1d1;

  --outline-dark: #434343;
  --disabled-dark: #666666;
  --placeholder-dark: #999999;
  --subtext-dark: #aaaaaa;

  --text-dark: #697077;
}

* {
  box-sizing: border-box;
  font-family: "ClashGrotesk", sans-serif !important;
}
html,
body {
  height: 100%;
}
body {
  margin: 0;
  font-family: var(--font-system);
  color: var(--on-background);
}

::selection {
  background-color: var(--primary);
  color: var(--on-primary);
}

.app {
  display: flex;
  min-height: 100vh;
}

.left,
.right {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.left {
  padding-inline: 1rem;
  background: var(--on-background);
}
.left__text {
  text-align: center;
  color: var(--on-primary);
  font-size: 42px;
  font-weight: 600;
  line-height: 140%;
}

.right {
  background: var(--primary-container);
  flex-direction: column;
  gap: 45px;
  display: none;
}
@media (min-width: 768px) {
  .right {
    display: flex;
  }
}

.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 20px;
  width: 100%;
}
.hero h1 {
  color: var(--on-primary-container);
  font-weight: 600;
  font-size: 40px;
  margin: 0;
}
.hero p {
  color: var(--on-background);
  font-size: 18px;
  max-width: 500px;
  margin: 0;
}

.hero__img {
  width: 50%;
  height: auto;
  display: block;
}