@import url('https://fonts.googleapis.com/css2?family=Carter+One&family=Libre+Baskerville:ital,wght@0,400..700;1,400..700&family=Monoton&family=Mr+Dafoe&family=Pacifico&family=Playfair+Display+SC:ital,wght@0,400;0,700;0,900;1,400;1,700;1,900&family=Rubik+Doodle+Triangles&family=Sora:wght@100..800&display=swap');


:root {
  --color-white: white;
  --color-black: black;
  --color-blue: blue;
  --color-blue-dark: rgb(1, 1, 207);
  --color-blue-darkest: rgb(26, 2, 185);
  --color-text: rgba(0, 0, 0, 0.8);
  --color-white-dimmed: rgba(255, 255, 255, 0.4);
  --color-gold: rgb(255, 196, 0);
  --color-grey-light: rgba(169, 169, 169, 0.05);
  --color-purple-light: rgb(166, 100, 253);
  --color-blue-light: rgba(99, 208, 255, 0.613);
  --color-semilight-grey: rgba(168, 168, 168, 0.15);
  --color-navy: rgb(4, 1, 106);
  --color-navy-light: rgb(4, 1, 106, 0.9);
  --color-navy-lightest: rgb(4, 1, 106, 0.8);
  --color-navy-light-bck: rgb(4, 1, 106, 0.3);
  --color-grey-dark: rgba(39, 30, 109, 0.681);
  --color-black-dimmed: rgba(40, 37, 42, 0.9);
  --color-orange: rgb(255, 107, 2);
  --color-orange-dim: rgba(255, 107, 2, 0.9);
  --color-cream: rgb(224, 180, 92);
  --color-muted-sage-green: rgb(1, 85, 60);
  --color-burgundy: rgb(134, 2, 13);


  --font-text: normal normal 400 16px/1.5 "Libre Baskerville", serif;
  --font-text-sec: normal normal 400 16px/1.5 "Sora", serif;
  --font-stylish-bold: normal normal 400 16px/1.5 "Carter One", system-ui;
  --font-italic-bold: normal normal 400 16px/1.5 "Pacifico", sans-serif;
  --font-all-capital: normal normal 400 16px/1.5 "Playfair Display SC", serif;
  --font-lins: normal normal 400 16px/1.5 "Monoton", sans-serif;
  --font-mesh: normal normal 400 16px/1.5 "Rubik Doodle Triangles", system-ui;
  --font-mehran: normal normal 400 16px/1.5 "Mr Dafoe", sans-serif;
}

html * {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  font: var(--font-text);
}

.btn {
  border: none;
  border-radius: 2em;
  color: var(--color-black);
  background-color: var(--color-white);
  cursor: pointer;
  padding: 1em;
}

.link {
  text-decoration: none;
  background-color: var(--color-white);
  color: var(black);
  cursor: pointer;
  border-radius: 2em;
}