@import url("https://fonts.googleapis.com/css2?family=Delius&family=Geologica:wght@100..900&family=Lugrasimo&family=Ysabeau+SC:wght@1..1000&display=swap");

/* Variables */
* {
  --primary-colour: #60aebf;
  --primary-dark-colour: #203a40;

  --closed-colour: #500400;

  --h1-colour: var(--webpage);
  --font-colour: var(--primary-dark-colour);
  --background-colour: #f4f2ed;

  --navbar-color: #407480;
  --navbar-links: var(--webpage);
  --scrollbar-bar: var(--primary-colour);

  --card-border: solid var(--primary-dark-colour) 5px;
  --button-border: solid var(--webpage) 5px;
  --socials-shadow: 2px 2px 2px black;

  /* Socials */
  --inactive-socials: var(--navbar-color);
  --facebook: #5e80bf; 
  --twitter: #00acee; 
  --x-twitter: black;
  --pintrest: #e60023;
  --email: #ea4335; 
  --webpage: #fbbc05;
  --socials-hover: #8af9f7;

  /* Fonts */
  --font-body: "Ysabeau SC", sans-serif;
  --font-headings: "Lugrasimo", cursive;
  --font-mission-stmt: "Delius", cursive;
}

:root {
  --bar-width: 60px;
  --bar-height: 8px;
  --hamburger-gap: 6px;

  --foreground: var(--primary-dark-colour);
  --background: white;
  --hamburger-margin: 68px;
  --animation-timing: 200ms ease-in-out;
  --hamburger-height: calc(var(--bar-height) * 3 + var(--hamburger-gap) * 2);
}