/* CSS files add styling rules to your content */

:root {
  --grey-10: #fafbfc;
  --grey-20: #f2f5f7;
  --grey-30: #ebf0f3;
  --grey-40: #c4ccd3;
  --grey-50: #adb5bd;
  --grey-60: #7a848d;
  --grey-70: #434e58;
  --grey-80: #2d3741;
  --grey-90: #182931;

  --blue-lighter: #e6f8fc;
  --blue-light: #71d3ec;
  --blue: #04b2e1;
  --blue-dark: #00759c;
  --blue-darker: #003842;
  --red-lighter: #ffebeb;
  --red-light: #ff8487;
  --red: #ff282d;
  --red-dark: #c20105;
  --red-darker: #850003;
  --magenta-lighter: #ffe4f4;
  --magenta-light: #d6799a;
  --magenta: #af3354;
  --magenta-dark: #8b134d;
  --magenta-darker: #471438;
  --green-lighter: #e4fff4;
  --green-light: #7af7d1;
  --green: #23e0a8;
  --green-dark: #008765;
  --green-darker: #004735;
  --orange-lighter: #fff1dd;
  --orange-light: #fcd293;
  --orange: #fca119;
  --orange-dark: #ad5309;
  --orange-darker: #723216;

  --font: "Inter", sans-serif;
  --text-sm: 500 0.8rem/150% var(--font);
  --text-md: 500 1rem/150% var(--font);
  --text-lg: 500 1.25rem/140% var(--font);
  --text-xl: 500 1.562rem/140% var(--font);

  --h1-special: 800 3.052rem/125% var(--font);
  --h1: 800 2.441rem/125% var(--font);
  --h2: 800 1.953rem/125% var(--font);
  --h3: 800 1.563rem/125% var(--font);
  --h4: 800 1.25rem/125% var(--font);
  --h5: 700 1rem/125% var(--font);
  --h6: 700 0.8rem/125% var(--font);
}

@media (min-width: 992px) {
  :root {
    --h1-special: 800 3.815rem/125% var(--font);
    --h1: 800 3.052rem/125% var(--font);
    --h2: 800 2.441rem/125% var(--font);
    --h3: 800 1.953rem/125% var(--font);
    --h4: 800 1.563rem/125% var(--font);
    --h5: 800 1.25rem/125% var(--font);
    --h6: 700 1rem/125% var(--font);
  }
}

@font-face {
  font-family: "Inter";
  src: url("/assets/inter-var.woff2")
      format("woff2 supports variations"),
    url("/assets/inter-var.woff2")
      format("woff2-variations");
  font-weight: 100 900;
  font-style: oblique 0deg 10deg; /* for compatibility with italics */
  font-display: swap;
}

html {
  font-size: 15px;
  font-weight: 500;
}

body {
  font-family: helvetica, arial, sans-serif;
  margin: 0;
  font: var(--text-xl);
}

h1 {
  font: var(--h1);
  text-align: center;
}

h2 {
  font: var(--h2);
  margin-top: 6rem;
}

a {
  color: var(--blue-dark);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}


main {
  max-width: 672px;
  margin: 3rem 1.5rem 6rem;
  min-height: 47vh;
  word-break: break-word;
}
@media (min-width: 992px) {
  main {
    margin: 6rem auto;
  }
}

.header {
  padding: 2rem 2rem 1rem;
  background: var(--grey-20);
}

.footer {
  background: var(--magenta-darker);
  color: white;
  padding: 6rem 0;
  font: var(--text-md);
}
.footer-inner {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 64px;
  margin: 0 1.5rem;
  max-width: 672px;
}
@media (min-width: 992px) {
  .footer-inner {
    margin: 0 auto;
  }
}

.footer a {
  color: white;
}
.footer-links {
  margin: 0;
  padding: 0;
  list-style: none;
}
.footer-links li {
  margin-bottom: 2rem;
}

.social-links {
  list-style: none;
  padding: 0;
  margin: 1rem 0 0;
  display: flex;
  justify-content: space-between;
}
.social-links li {
  display: inline-block;
}
.social-links a {
  color: white;
}
.copyright {
  font: var(--text-sm);
  line-height: 2rem;
}


.arrow-link {
  position: relative;
  padding-right: 38px;
  font: var(--text-md);
}
.arrow-link::after {
  content: "";
  mask: url("/assets/Button-Arrow.svg");
  mask-size: cover;
  -webkit-mask: url("/assets/Button-Arrow.svg");
  -webkit-mask-size: cover;
  background-color: currentColor; /* match color from <a> */
  position: absolute;
  top: 50%;
  right: 0;
  width: 13px;
  height: 13px;
  transform: translate(-1rem, -50%);
}