body.dark {
  --slt-grey: rgb(15, 15, 15);
  --lt-grey-s: 55, 55, 55;
  --lt-grey: rgb(var(--lt-grey-s));
  --grey-s: 105, 105, 105;
  --grey: rgb(var(--grey-s));
  --d-grey-s: 220, 215, 210;
  --d-grey: rgb(var(--d-grey-s));
  --lt-blue-s: 75, 136, 234;
  --lt-blue: rgb(var(--lt-blue-s));
  --d-blue: rgb(var(--d-blue-s));
  --d-blue-s: 27, 69, 137;
  --lt-yellow-s: 236, 189, 7;
  --lt-yellow: rgb(var(--lt-yellow-s));
  --d-yellow: rgb(137, 116, 24);
  --lt-green-s: 114, 216, 67;
  --lt-green: rgb(var(--lt-green-s));
  --d-green: rgb(23, 109, 27);
  --red-s: 229, 44, 27;
  --red: rgb(var(--red-s));
  --d-red-s: 195, 35, 20;
  --d-red: rgb(var(--d-red-s));
  --green-s: 50, 130, 35;
  --green: rgb(var(--green-s));
  --gold-s: 173, 162, 36;
  --gold: rgb(var(--gold-s));
  --purp-s: 105, 56, 140;
  --purp: rgb(var(--purp-s));
  --plum-s: 140, 56, 137;
  --plum: rgb(var(--plum-s));
  --teal-s: 0, 128, 98;
  --teal: rgb(var(--teal-s));
  --turq-s: 8, 200, 181;
  --turq: rgb(var(--turq-s));
  --d-turq-s: 8, 170, 155;
  --d-turq: rgb(var(--d-turq-s));
  --white-s: 0, 0, 0;
  --white: rgb(var(--white-s));
  --black-s: 255, 255, 255;
  --black: rgb(var(--black-s));
  --orange-s: 227, 121, 34;
  --orange: rgb(var(--orange-s));
  --d-orange-s: 171, 90, 36;
  --d-orange: rgb(var(--d-orange-s));
  --ease-out: cubic-bezier(0.17, 0.57, 0.43, 1);
  --primary: var(--lt-blue);
  --primary-s: var(--lt-blue-s);
  --d-primary: var(--d-blue);
  --d-primary-s: var(--d-blue-s);
  font-family: 'Lato', sans-serif;
  color: var(--black);
}

.display-none {
  display: none
}

#overlay-layer {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 400;
  height: 100%;
  width: 100%;
  opacity: 0;
  pointer-events: none;
  transition: all 300ms var(--ease-out);
  background-color: rgba(var(--black-s), 0.2);
}

body.show-overlay #overlay-layer {
  opacity: 100%;
  pointer-events: all;
}

div.main-scroll {
  height: 100%;
  width: 100%;
  overflow: auto;
  overflow: overlay;
  transition: transform 300ms var(--ease-out);
}

body.show-overlay div.main-scroll {
  filter: blur(6px);
  transform: scale(1.02);
}

div.main-grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(500px, 900px));
  grid-template-rows: 530px;
  grid-gap: 1em;
  background-color: var(--white);
  padding: 1em;
  justify-content: center;
}

body.dark div.main-grid {
  background-color: var(--lt-grey);
}

div.project-card {
  height: 530px;
  min-width: 800px;
  border: 1px solid var(--col);
  border-radius: 4px;
  box-shadow: 0 0 5px 0 rgba(0,0,0,0.3);
  display: flex;
  flex-direction: column;
  --col: var(--primary);
  --text-col: white;
  overflow: hidden;
  background: var(--col);
  transition: box-shadow 400ms var(--ease-out);
  cursor: pointer;
}

div.project-card:hover {
  box-shadow: 0 0 18px 0 rgba(0,0,0,0.5);
  z-index: 200;
}

body.dark div.project-card:hover {
  box-shadow: 0 0 22px 0 rgba(0,0,0,0.9);
}

div.project-card > :not(.title) {
  background-color: rgba(var(--white-s), 80%);
  font-size: 13pt;
}

div.project-card :where(strong, b) {
  color: var(--col);
}

div.project-card strong-w {
  display: inline-block;
  font-weight: bold;
}

div.project-card p:first-of-type {
  margin-top: 0;
}

div.project-card p:last-child {
  margin-bottom: 0.5em;
}

div.project-card p > img {
  width: 100%;
}

div.project-card > .title {
  font-size: 2rem;
  padding: 8px 13px;
  color: var(--text-col);
}

div.project-card > .content {
  flex: 1;
  height: 100%;
  overflow: hidden;
  width: 100%;
  border: 1px solid var(--lt-grey);
  border-width: 0 0 1px 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 350ms var(--ease-out);
}

div.project-card.inspect > .content {
  flex: 0 0 auto;
  height: 0%;
}

div.project-card > .details {
  position: relative;
  flex 0;
  padding: 0 2em 0 1em;
  height: 0px;
  overflow: auto;
  transition: all 350ms var(--ease-out);
  scrollbar-color: var(--col) var(--lt-grey);
}

.details::-webkit-scrollbar-thumb {
  background: var(--col); 
}

div.project-card.inspect > .details {
  flex: 1;
  padding: 1em 2em 1em 1em;
}

.content > .overlay {
  z-index: 300;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(0deg, rgba(var(--white-s), 0.7), transparent 140px);
}

div.project-card > .content > iframe {
  height: 100%;
  width: 100%;
}

div.project-card > .description {
  padding: 8px;
}

div.project-card > .link {
  padding: 8px;
  text-decoration: underline;
  transition: color 150ms var(--ease-out);
}

div.project-card > .link:hover {
  color: var(--col);
}

.project-card.span-all {
  grid-column: 1 / -1;
}

.content .icon {
  fill: white;
  height: 180px;
  width: 180px;
}

carousel {
  width: 100%;
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template: 'margin-left content margin-right' var(--height)
                 'gutter       gutter gutter' 14px /
                 min-content 1fr min-content;
  align-items: center;
  justify-content: center;
  --index: 0;
  --height: 250px;
  --width: calc(var(--height) * 1.4);
}

div.project-card carousel + p {
  padding-top: 0.5em;
}

carousel div.content {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
  position: relative;
  grid-column: 1 / -1;
  grid-row: 1 / 2;
  --grad-extent: calc(calc(100% - var(--width)) / 2);
  --mask-image: linear-gradient(90deg, transparent 0, black var(--grad-extent), black calc(100% - var(--grad-extent)), transparent 100%);
  mask-image: var(--mask-image);
  -webkit-mask-image: var(--mask-image);
}

carousel div.fixed-width {
  position: absolute;
  top: 0;
  bottom: 0;
  width: var(--width);
  transform: translate3d(calc(-100% * var(--index)), 0, 0);
  transition: transform 300ms var(--ease-out);
}

carousel div.fixed-width > div.container {
  display: flex;
  height: 100%;
  width: min-content;
}

carousel div.container > div.wrapper {
  height: 100%;
  width: var(--width);
  position: relative;
  overflow: hidden;
  background-color: rgba(var(--black-s), 0.15);
  padding: 2px;
  transition: all 150ms var(--ease-out);
  cursor: pointer;
}

carousel div.container > div.wrapper:hover {
  background-color: rgba(var(--black-s), 0.55);
}

carousel div.container > div.wrapper > img {
  object-fit: cover;
  height: 100%;
  width: 100%;
}

carousel.image-fit div.container > div.wrapper > img {
  object-fit: contain;
}

carousel div.dot-container {
  grid-area: gutter;
  display: flex;
  justify-content: center;
  align-items: center;
}

div.dot-container > div.dot {
  height: 10px;
  width: 10px;
  border: 1px solid var(--d-grey);
  border-radius: 100%;
  margin: 3px;
  box-shadow: 0 0 0px 1px rgba(var(--white-s), 0.7);
  transition: all 300ms var(--ease-out);
}

div.dot-container > div.dot:first-child {
  margin-left: auto;
}

div.dot-container > div.dot:last-child {
  margin-right: auto;
}

div.dot-container > div.dot.selected {
  background-color: rgba(var(--black-s), 0.3);
}

div.round-button {
  --size: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--size);
  width: var(--size);
  border-radius: 100%;
  margin: 4px;
  background-color: rgba(var(--black-s), 0.2);
  border: 1px solid rgba(var(--white-s), 0.5);
  z-index: 100;
  transition: all 150ms var(--ease-out);
  cursor: pointer;
}

div.round-button:hover {
  background-color: rgba(var(--black-s), 0.4);
}

div.round-button svg.icon {
  --size: 24px;
  width: var(--size);
  height: var(--size);
  stroke: var(--black);
  stroke-width: 2px;
  stroke-linecap: round;
}

a {
  color: var(--col)
}