:root {
  /* ---- Color ---- */
  --navy: #091015;
  --hello-dribbble: #311029;
}

h1,
h2,
h3,
h4,
h5 {
  color: var(--fog-grey);
}

p {
  color: var(--light-grey);
}

:root {
  /* ---- Color ---- */
  --sec-bkgrd-project-color: var(--golden);
  --sec-bkgrd-project-color-light: rgba(175, 64, 52, 0.1);

  --project-main-color: var(--brand-color-pink);
  --project-button-color: var(--brand-color-pink);
  --project-progress-bar-btm: 1px solid rgba(255, 116, 116, 0.2);
  --project-progress-bar-top: 1px solid rgba(255, 116, 116, 0.7);
}

#navScroll {
  height: 29vh;
  top: 40.5vh;
}

.iconography-wrapper {
  max-width: 800px;
}

.light-grey-text {
  color: var(--fog-grey);
}




/* ==========================================
Change Background Color on Scroll Citation:
https://codepen.io/daveredfern/pen/zBGBJV
=========================================== */

/* Setting fade transition and default settings */
body {
  background-color: var(--navy);
  transition: background-color 1s ease;
}

/* panel styles */
.panel {
  /* min height incase content is higher than window height */
  /* min-height: 100vh; */
  display: flex;
  justify-content: space-around;
  align-items: center;
  font-family: sans-serif;
  /* outline: 10px solid hotpink; */
  /* turn above on to see the edge of panels */
}

/* colours */
.color-navy {
  background-color: var(--navy);
}
.color-hello-dribbble {
  background-color: var(--hello-dribbble);
}
.color-404-not-found {
  background-color: #130B3E;
}
.color-taiyaki {
  background-color: #46424E;
}
.color-merry-xmas {
  background-color: #2A7A61;
}
.color-up {
  background-color: #5D608D;
}
.color-foodie {
  background-color: #CE9F53;
}
.color-tv-bumper {
  background-color: #6a7280;
}

.color-dog {
  background-color: #34583e;
}

.color-light-grey {
  background-color: var(--fog-grey);
}

.dark-text,
.dark-text h2,
.dark-text h3,
.dark-text p {
  color: var(--dark-grey);
}