:root {
  --lch-black: 0% 0 0;

  --lch-canvas: 100% 0.0029 264.54;

  --font-family-helvetica: 'Helvetica Neue', Sans-Serif;

  --font-size: 1.75rem;
  --font-size-small: 90%;
  --font-size-medium: 100%;
  --font-size-large: 115%;
  --font-size-x-large: 140%;
  --font-size-xx-large: 200%;
  --font-size-xxx-large: 450%;

  --space-small: 0.8em;
  --space-medium: 2em;
  --space-large: 4em;
  --space-x-large: 10em;
  --space-xx-large: 20em;

  --box-shadow:
    0 0 0.5em 0.1em oklch(var(--lch-black) / 0.08),
    0 0 2em 0.4em oklch(var(--lch-black) / 0.05)
  ;

  --transition: 0.4s cubic-bezier(0.37, 1, 0.74, 1);

  --nav-height: 14em;

  --background: linear-gradient(
    to bottom,
    #67ACB9 0%,
    #B2B4B4 100%
  );
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  background: white;
  color: black;
}

img {
  max-width: 100%;
}

@media (max-width: 720px) {
  :root {
    --font-size-x-large: 115%;
    --font-size-xx-large: 165%;
    --font-size-xxx-large: 300%;

    --space-medium: 1.25em;
    --space-large: 2.5em;

    --nav-height: 7.25em;
  }
}