body {
  margin: 0;
  line-height: normal;
  font-family: var(--font-open-sans);
}

:root {
  /* fonts */
  --font-open-sans: "Open Sans";

  /* font sizes */
  --font-size-2xl: 21px;
  --font-size-4xl: 23px;
  --font-size-6xl: 25px;
  --font-size-8xl: 27px;
  --font-size-11xl: 30px;
  --font-size-9xl: 28px;
  --font-size-31xl: 50px;
  --font-size-3xl: 22px;
  --font-size-21xl: 40px;
  --font-size-5xl: 24px;
  --font-size-16xl: 35px;

  /* Colors */
  --color-gainsboro: #eae8e8;
  --color-dimgray-100: #707070;
  --color-dimgray-200: #636363;
  --color-darkslategray: #373737;
  --color-white: #fff;
  --color-olivedrab: #68ad47;
  --color-teal-100: #138090;
  --color-teal-200: #128090;
  --color-paleturquoise: #95e9f5;
  --color-darkgreen-100: #0c6f24;
  --color-darkgreen-200: #0b6f24;
  --color-aquamarine: #baf8c3;
  --color-gray-100: #111112;
  --color-gray-200: #111;
  --color-whitesmoke-100: #f8f8f8;
  --color-whitesmoke-200: #f5f5f5;
  --color-darkorange: #f69222;
  --color-sandybrown: #fdbb6d;
  --color-dodgerblue: #0995f5;
  --color-powderblue: #c4f1ff;
  --color-cornflowerblue: #21a1ef;
  --color-darkgray: #a0a0a0;
  --color-honeydew: #cae2ce;

  /* Border radiuses */
  --br-mini: 15px;
  --br-6xl: 25px;
  --br-5xs: 8px;
  --br-3xs: 10px;
  --br-16xl: 35px;
  --br-11xl: 30px;
}