:root {
  /* default colors */
  --main--background: #e8e8e8;
  --main--text: #1d1d1d;
  /* info colors */
  --info--background: #DAC3AD;
  --info--text: #0A130A;
  /* dollop colors */
  --dollop--background: #f1e4d1;
  --dollop--text: #e10b03;
  /* all seasons colors */
  --as--background: #e3dcc9;
  --as--text: #006e50;
  /* sociologists of mn colors */
  --som--background: #acd8ac;
  --som--text: #4a4847;
  /* itsthereal colors */
  --itr--background: #2C5879;
  --itr--text: #fff2dc;
  /* comidaz cruz colors */
  --cruz--background: #E2C8BE;
  --cruz--text: #ce3738;
  /* voyageur colors */
  --voyageur--background: #606548;
  --voyageur--text: white;
  /* dmj colors */
  --dmj--background: #0f0f0f;
  --dmj--text: #ffc663;
  /* rosie colors */
  --rosie--background: #F4E4CD;
  --rosie--text: #387b4c;
  /* wayne woodworking colors */
  --wayne--background: #e83738;
  --wayne--text: #faf6cd;
  /* xfctr colors */
  --xfctr--background: #11202c;
  --xfctr--text: #5697b8;
  /* sunrise colors */
  --sunrise--background: #b12f7d;
  --sunrise--text: white;
  /* mgk colors */
  --mgk--background: #8dc63f;
  --mgk--text: #2c4622;
  /* six dot colors */
  --six--background: #409ed7;
  --six--text: white;
  /* local sports colors */
  --ls--background: #0a130a;
  --ls--text: #dac3ad;
  /* logos colors */
  --logo--background: #1d1d1d;
  --logo--text: #e8e8e8;
  /* mdt colors */
  --mdt--background: #170f5f;
  --mdt--text: #DDE0F3;
}

.hover-home-sa {
  transition: 0.7s;
}
.hover-home-sa:hover {
  background-color: var(--as--background);
  color: var(--as--text);
  transition-duration: 200ms;
}

.hover-home-som {
  transition: 0.7s;
}
.hover-home-som:hover {
  background-color: var(--som--background);
  color: var(--som--text);
  transition-duration: 200ms;
}

.hover-home-dollop {
  transition: 0.7s;
}
.hover-home-dollop:hover {
  background-color: var(--dollop--background);
  color: var(--dollop--text);
  transition-duration: 200ms;
}

.hover-home-itr {
  transition: 0.7s;
}
.hover-home-itr:hover {
  background-color: var(--itr--background);
  color: var(--itr--text);
  transition-duration: 200ms;
}

.hover-home-cruz {
  transition: 0.7s;
}
.hover-home-cruz:hover {
  background-color: var(--cruz--background);
  color: var(--cruz--text);
  transition-duration: 200ms;
}

.hover-home-voyageur {
  transition: 0.7s;
}
.hover-home-voyageur:hover {
  background-color: var(--voyageur--background);
  color: var(--voyageur--text);
  transition-duration: 200ms;
}

.hover-home-dmj {
  transition: 0.7s;
}
.hover-home-dmj:hover {
  background-color: var(--dmj--background);
  color: var(--dmj--text);
  transition-duration: 200ms;
}

.hover-home-dmj {
  transition: 0.7s;
}
.hover-home-dmj:hover {
  background-color: var(--dmj--background);
  color: var(--dmj--text);
  transition-duration: 200ms;
}

.hover-home-rosie {
  transition: 0.7s;
}
.hover-home-rosie:hover {
  background-color: var(--rosie--background);
  color: var(--rosie--text);
  transition-duration: 200ms;
}

.hover-home-wayne {
  transition: 0.7s;
}
.hover-home-wayne:hover {
  background-color: var(--wayne--background);
  color: var(--wayne--text);
  transition-duration: 200ms;
}

.hover-home-xfctr {
  transition: 0.7s;
}
.hover-home-xfctr:hover {
  background-color: var(--xfctr--background);
  color: var(--xfctr--text);
  transition-duration: 200ms;
}

.hover-home-sunrise {
  transition: 0.7s;
}
.hover-home-sunrise:hover {
  background-color: var(--sunrise--background);
  color: var(--sunrise--text);
  transition-duration: 200ms;
}

.hover-home-mgk {
  transition: 0.7s;
}
.hover-home-mgk:hover {
  background-color: var(--mgk--background);
  color: var(--mgk--text);
  transition-duration: 200ms;
}

.hover-home-six {
  transition: 0.7s;
}
.hover-home-six:hover {
  background-color: var(--six--background);
  color: var(--six--text);
  transition-duration: 200ms;
}

.hover-home-ls {
  transition: 0.7s;
}
.hover-home-ls:hover {
  background-color: var(--ls--background);
  color: var(--ls--text);
  transition-duration: 200ms;
}

.hover-home-mdt {
  transition: 0.7s;
}
.hover-home-mdt:hover {
  background-color: var(--mdt--background);
  color: var(--mdt--text);
  transition-duration: 200ms;
}

.hover-home-logo {
  transition: 0.7s;
}
.hover-home-logo:hover {
  background-color: var(--logo--background);
  color: var(--logo--text);
  transition-duration: 200ms;
}

/* fonts */

@font-face {
    font-family: "commit";
    src:
        local("Commit"),
        url("fonts/CommitMono-400-Regular.otf") format("opentype") tech(color-COLRv1),
        url("fonts/CommitMono-400-Regular.otf") format("opentype"),
  }

  .commit { font-family: 'Commit', courier, monospace; }

  @font-face {
    font-family: "jakob";
    src:
        local("jakob"),
        url("fonts/jakob.otf") format("opentype") tech(color-COLRv1),
        url("fonts/jakob.otf") format("opentype"),
  }

  .jakob { font-family: 'jakob', Helvetica, sans-serif; }

  @font-face {
    font-family: "exetegue";
    src:
        local("exetegue"),
        url("fonts/Exetegue-Bold.otf") format("opentype") tech(color-COLRv1),
        url("fonts/Exetegue-Bold.otf") format("opentype"),
  }

  .exetegue { font-family: 'exetegue', Helvetica, sans-serif; font-weight: bold; text-transform: uppercase; text-box-trim: trim-both; }

  @font-face {
    font-family: "univers";
    src:
        local("univers"),
        url("fonts/UniversLTStd.otf") format("opentype") tech(color-COLRv1),
        url("fonts/UniversLTStd.otf") format("opentype"),
  }

  .univers { font-family: 'univers', Helvetica, sans-serif; }

  /* Adding my own paragraph size */

  p { font-size: .875rem; }

  /* fonts */

  .project-list {
    display: flex;
    flex-direction: column;
    gap: 2rem;
  }

  .project-divider {
    height: 1px;
    width: 100%;
  }

  .gap-3 {
    gap: 1rem;
  }