html {
  --activist-aqua: #51c0a7;
  --youth-yellow-1: #ffe09d;
  --youth-yellow-2: #ffc03a;
  --youth-yellow-3: #eba000;
  --bold-black: #000000;
  --witty-white: #ffffff;

  --text-color: black;
  --bg-color: var(--activist-aqua);
  --fg-color: var(--witty-white);
  --accent-color: var(--youth-yellow-2);

  --rainbow-red: #d02c28;
  --rainbow-orange: #f19221;
  --rainbow-yellow: #fbed1f;
  --rainbow-green: #74bf44;
  --rainbow-blue: #07a8df;
  --rainbow-purple: #854e9e;

  --text-font: "Zilla Slab", serif;
  --header-font: "Poppins", sans-serif;
  --handwriting: var(--crudex);

  --round-edge: 10px;
  --shadow: drop-shadow(0 35px 35px rgba(0, 0, 0, 0.35));

  --shadow-light: drop-shadow(0 35px 35px rgba(0, 0, 0, 0.125));
}

html,
body {
  padding: 0;
  margin: 0;
  background: var(--bg-color);
  font-family: var(--text-font);
}

h1,
h2,
h3 {
  font-family: var(--header-font);
}

a {
  text-decoration: none;
}

p > a {
  text-decoration: underline;
  color: var(--accent-color);
}

a:visited {
  color: inherit;
  text-decoration: inherit;
}