/*      */
/*      */
/* BODY */
/*      */
/*      */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
  scrollbar-color: var(--card-color) var(--background-color);
}

span {
  font-family: 'system-ui', sans-serif;
  line-height: 1;
}

body {
  /* GENERAL */
  font-family: 'system-ui', sans-serif;
  background-color: var(--background-color);
  color: var(--text-color);
  font-weight: 400;
  line-height: 1;
  overflow-x: hidden;
  transition: var(--transition-delay);
  overscroll-behavior: none;

  --banner-text: #1d1d1d;

  /* RESPONSIVENESS */
  --transition-delay: 0.4s;
  --mapbox-zoom: 11.45;
  --mapbox-icon-size: 0.25;
  --mobile-device: 0;

  /* LIGHT MODE VARIABLES */
  --text-color: #1d1d1d;
  --card-color: #ffffff;
  --scroll-bar-thumb: #ababab;
  --alternative-text-color: #6e6e6e73;
  --card-opacity: 15%;
  --background-color: #f5f5f5;
  --filter-background-color: #ebebeb;
  --filter-text-color-on-hover: #6e6e6e;
  --filter-active-color: #ffffff;
  --nav-button-color: #ffffff;
  --toggle-icon-color: #e36577;
  --toggle-background: #ffffff;
  --toggle-box-shadow: inset 0 0.2rem 6rem rgba(0, 0, 0, 0.1),
    inset 0 0.2rem 0.8rem rgba(0, 0, 0, 0.1),
    inset 0 -0.4rem 0.4rem rgba(0, 0, 0, 0.05);
  --toggle-transition: 0.3s;
  --switch-position-left: 4.5px;
  --switch-background: linear-gradient(to bottom, #eaeaea, #f9f9f9);
  --switch-box-shadow: 0 0.8rem 2rem rgba(0, 0, 0, 0.1),
    inset 0 0.4rem 0.4rem rgba(255, 255, 255, 1),
    inset 0 -0.4rem 0.4rem rgba(255, 255, 255, 1);
  --subheading-color: #6e6e6e;
  --primary-button-border: linear-gradient(45deg, #e36577, #f6edb2);
  --primary-button-color: #ffffff; /* CTA */
  --secondary-button-border: #ebebeb;
  --secondary-button-color: #ffffff; /* CTA */
  --tertiary-button-border: transparent;
  --tertiary-button-color: transparent; /* CTA */
}

body.dark {
  --banner-text: #1d1d1d;

  /* DARK MODE VARIABLES */
  --text-color: #fafafa;
  --card-color: #2c2c2e;
  --scroll-bar-thumb: #2c2c2e;
  --alternative-text-color: #6e6e6e73;
  --card-opacity: 10%;
  --background-color: #1c1c1e;
  --filter-background-color: rgba(0, 0, 0, 0.4);
  --filter-text-color-on-hover: #6e6e6e;
  --filter-active-color: #2c2c2e;
  --nav-button-color: #1c1c1e;
  --toggle-icon-color: #f6edb2;
  --toggle-background: #111112;
  --toggle-box-shadow: inset 0 0.8rem 6rem rgba(0, 0, 0, 0.1),
    inset 0 0.8rem 0.8rem rgba(0, 0, 0, 0.1),
    inset 0 -0.4rem 0.4rem rgba(0, 0, 0, 0.1);
  --toggle-transition: 0.3s;
  --switch-position-left: 26.5px;
  --switch-background: linear-gradient(to bottom, #2c2c2e, #1c1c1e);
  --switch-box-shadow: 0 0.8rem 4rem rgba(0, 0, 0, 0.5),
    inset 0 0.1rem 0.4rem rgba(255, 255, 255, 0.1),
    inset 0 -0.1rem 0.4rem rgba(255, 255, 255, 0.1);
  --subheading-color: rgba(250, 250, 250, 0.6);
  --primary-button-border: linear-gradient(45deg, #e36577, #f6edb2);
  --primary-button-color: #1c1c1e; /* CTA */
  --secondary-button-border: #1c1c1e;
  --secondary-button-color: #1c1c1e; /* CTA */
  --tertiary-button-border: transparent;
  --tertiary-button-color: transparent; /* CTA */
}

/*           */
/*           */
/* SCROLLBAR */
/*           */
/*           */

::-webkit-scrollbar {
  width: 16px;
}

::-webkit-scrollbar-thumb {
  height: 56px;
  border-radius: 8px;
  border: 4px solid transparent;
  background-clip: content-box;
}

::-webkit-scrollbar-thumb {
  height: 56px;
  border-radius: 8px;
  border: 4px solid transparent;
  background-clip: content-box;
  background-color: var(--scroll-bar-thumb);
}

/*      */
/*      */
/* TEXT */
/*      */
/*      */

.heading-secondary {
  font-size: 30px;
  font-weight: 700;
  margin-bottom: 24px;
}

.heading-secondary-helper {
  margin-left: -1px;
}

.subheading {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.75px;
  text-transform: uppercase;
  color: var(--subheading-color);
  margin-bottom: 4px;
  pointer-events: none;
}

.margin-left {
  margin-left: 13px;
  /* display: flex;
  align-items: center;
  justify-content: center; */
}

.margin-bottom {
  margin-bottom: 12px;
}

/*                  */
/*                  */
/* FILTER CONTAINER */
/*                  */
/*                  */

.filter,
.filter-secondary {
  cursor: pointer;
  border-radius: 100px;
  transition: all 0.3s;
}

.filter {
  padding: 8px 16px;
}

.filter-secondary {
  padding: 6px 12px;
}

.filter:hover,
.filter-secondary:hover {
  color: var(--filter-text-color-on-hover);
}

.filter.active,
.filter-secondary.active {
  background-color: var(--filter-active-color);
}

.filter.active:hover,
.filter-secondary.active:hover {
  color: var(--text-color);
  cursor: default;
}

/*               */
/*               */
/* FILTER LAYOUT */
/*               */
/*               */

/*           */
/* CARD--ALL */
/*           */
#card--intro--all {
  grid-column: 1/3;
  grid-row: 1/2;
  /* grid-column: 2/4;
  grid-row: 2/3; */
}
#card--map--all {
  grid-column: 2/4;
  grid-row: 2/3;
  /* grid-column: 1/3;
  grid-row: 1/2; */
}
#card--photos--all {
  grid-column: 3/4;
  grid-row: 1/2;
}
#card--running--all {
  grid-column: 1/2;
  grid-row: 2/4;
}
#card--learning--all {
  grid-column: 4/5;
  grid-row: 1/3;
}
#card--spotify--all {
  grid-column: 3/5;
  grid-row: 3/4;
}
#card--rotation--all {
  grid-column: 1/3;
  grid-row: 4/5;
}
#card--github--all {
  grid-column: 1/2;
  grid-row: 5/6;
}
#card--twitter--all {
  grid-column: 2/4;
  grid-row: 6/7;
}
#card--linkedin--all {
  grid-column: 2/3;
  grid-row: 5/6;
}
#card--instagram--all {
  grid-column: 1/2;
  grid-row: 6/7;
}
#card--youtube--all {
  grid-column: 4/5;
  grid-row: 6/7;
}
#card--ryos--all {
  grid-column: 3/4;
  grid-row: 4/6;
}
#card--recipely--all {
  grid-column: 4/5;
  grid-row: 4/6;
}
#card--donate--all {
  grid-column: 2/3;
  grid-row: 3/4;
}

/*             */
/* CARD--ABOUT */
/*             */
#card--intro--about {
  grid-column: 1/3;
  grid-row: 1/3;
}
#card--map--about {
  grid-column: 3/5;
  grid-row: 1/2;
}
#card--photos--about {
  grid-column: 3/4;
  grid-row: 2/3;
}
#card--running--about {
  grid-column: 2/3;
  grid-row: 6/8;
  opacity: var(--card-opacity);
}
#card--learning--about {
  grid-column: 1/2;
  grid-row: 6/8;
  opacity: var(--card-opacity);
}
#card--spotify--about {
  grid-column: 3/5;
  grid-row: 4/5;
  opacity: var(--card-opacity);
}
#card--rotation--about {
  grid-column: 1/3;
  grid-row: 5/6;
  opacity: var(--card-opacity);
}
#card--github--about {
  grid-column: 2/3;
  grid-row: 4/5;
  opacity: var(--card-opacity);
}
#card--twitter--about {
  grid-column: 2/4;
  grid-row: 3/4;
}
#card--linkedin--about {
  grid-column: 4/5;
  grid-row: 3/4;
}
#card--instagram--about {
  grid-column: 1/2;
  grid-row: 3/4;
}
#card--youtube--about {
  grid-column: 4/5;
  grid-row: 2/3;
}
#card--ryos--about {
  grid-column: 4/5;
  grid-row: 5/7;
  opacity: var(--card-opacity);
}
#card--recipely--about {
  grid-column: 3/4;
  grid-row: 5/7;
  opacity: var(--card-opacity);
}
#card--donate--about {
  grid-column: 1/2;
  grid-row: 4/5;
  opacity: var(--card-opacity);
}

/*                */
/* CARD--PROJECTS */
/*                */
#card--intro--projects {
  grid-column: 3/5;
  grid-row: 1/2;
}
#card--map--projects {
  grid-column: 3/5;
  grid-row: 4/5;
  opacity: var(--card-opacity);
}
#card--photos--projects {
  grid-column: 4/5;
  grid-row: 5/6;
  opacity: var(--card-opacity);
}
#card--running--projects {
  grid-column: 4/5;
  grid-row: 2/4;
}
#card--learning--projects {
  grid-column: 1/2;
  grid-row: 5/7;
  opacity: var(--card-opacity);
}
#card--spotify--projects {
  grid-column: 1/3;
  grid-row: 4/5;
  opacity: var(--card-opacity);
}

#card--rotation--projects {
  grid-column: 2/4;
  grid-row: 3/4;
}
#card--github--projects {
  grid-column: 3/4;
  grid-row: 2/3;
}
#card--twitter--projects {
  grid-column: 2/4;
  grid-row: 5/6;
  opacity: var(--card-opacity);
}
#card--linkedin--projects {
  grid-column: 2/3;
  grid-row: 6/7;
  opacity: var(--card-opacity);
}
#card--instagram--projects {
  grid-column: 3/4;
  grid-row: 6/7;
  opacity: var(--card-opacity);
}
#card--youtube--projects {
  grid-column: 4/5;
  grid-row: 6/7;
  opacity: var(--card-opacity);
}
#card--ryos--projects {
  grid-column: 1/2;
  grid-row: 1/3;
}
#card--recipely--projects {
  grid-column: 2/3;
  grid-row: 1/3;
}
#card--donate--projects {
  grid-column: 1/2;
  grid-row: 3/4;
}

/*          */
/* TEMPLATE */
/*          */
/* #card--intro-- {
  grid-column: /;
  grid-row: /;
}
#card--map-- {
  grid-column: /;
  grid-row: /;
}
#card--photos-- {
  grid-column: /;
  grid-row: /;
}
#card--running-- {
  grid-column: /;
  grid-row: /;
}
#card--learning-- {
  grid-column: /;
  grid-row: /;
}
#card--spotify-- {
  grid-column: /;
  grid-row: /;
}
#card--rotation-- {
  grid-column: /;
  grid-row: /;
}
#card--github-- {
  grid-column: /;
  grid-row: /;
}
#card--twitter-- {
  grid-column: /;
  grid-row: /;
}
#card--linkedin-- {
  grid-column: /;
  grid-row: /;
}
#card--instagram-- {
  grid-column: /;
  grid-row: /;
}
#card--youtube-- {
  grid-column: /;
  grid-row: /;
}
#card--ryos-- {
  grid-column: /;
  grid-row: /;
}
#card--recipely-- {
  grid-column: /;
  grid-row: /;
}
#card--donate-- {
  grid-column: /;
  grid-row: /;
} */