:root {
  /* --primary-color: #4050a0; */
  /* --hover-background-color: #b3c3da; */
  /* #e0eaff; */
  /* --selection-background-color: #c1c6cd; */

  --primary-color: #fc8;

  --background-color: color-mix(in srgb, var(--primary-color) 30%, white 60%);

  --selection-background-color: color-mix(
    in srgb,
    var(--primary-color) 60%,
    white 40%
  );

  /* --glow-color: rgba(var(--selection-background-color), 150); */
  --glow-color: orange;
  --glow-shadow: 0 0 8px 3px var(--selection-background-color),
    0 0 16px 6px var(--glow-color);
  --no-glow-shadow: 0 0 0 0 var(--selection-background-color),
    0 0 0 0 var(--glow-color);

  --hover-background-color: color-mix(
    in srgb,
    var(--primary-color) 65%,
    white 35%
  );

  --pub-theme-color: #bffadc;
  --card-border-color: #00000011;
  --card-hover-border-color: #546684;
  --card-footer-bg: #fafafa;
  --card-footer-hover-bg: #444674;
  --card-footer-hover-color: #fff;

  /* scroll-behavior: smooth; */

  --card-shadow: 0 5px 3px #0001;
  --card-hover-shadow: 0 5px 7px #0004;
  --card-hover-transform: translateY(1%);
  transition: all 0.1s ease-out;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1em;
}

.h1 {
  padding-top: 3em;
  font-size: 4rem;
}

body {
  font-family: Helvetica, sans-serif;
  background-color: var(--background-color);
  /* transition: all 0.1s ease-in-out; */
  overflow: hidden;
}

.scroll-container {
  scroll-snap-type: y proximity;
  overflow-y: scroll;
  height: 100vh;
  scroll-behavior: smooth;
}

/* a:hover { */
/*   color: black; */
/*   background-color: var(--hover-background-color); */
/* } */

.card-link {
  color: black;
  font-weight: 300;
}

.list-group-item {
  border: none;
  background-color: transparent;
  display: flex;
  flex-direction: column;
}

::selection {
  background-color: var(--selection-background-color);
  color: black;
}

.card.custom {
  border: none;
  background-color: transparent;
}

div {
  background-color: transparent;
}

.gallery-container {
  overflow: visible;
  display: flex;
  justify-content: center;
  padding-top: 10em;
  padding-bottom: 10em;
}

.gallery {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  width: 100vw;
  justify-content: flex-start;
  padding: 1em;
  gap: 4em;
  overflow-x: auto;
  scroll-behavior: smooth;
}

.gallery .card {
  background-color: transparent;
  height: auto;
  border: 3px solid var(--card-border-color);
  border-radius: 1em;
  overflow: hidden;
  min-width: 28em;
  max-width: 28em;
  scroll-snap-align: center;
}

.gallery .card:hover {
  border: 3px solid var(--card-hover-border-color);
  filter: drop-shadow(0 3px 5px #00000022);
  scroll-snap-align: center;
}

.gallery .card .card-body {
  /* width: 28em; */
  /* height: 30em; */
}

.gallery .card .card-footer {
  background-color: var(--card-footer-bg);
  font-weight: normal;
}

.card-footer .h2 {
  font-weight: bold;
  font-size: 1.3em;
}

.gallery .card:hover .card-footer {
  background-color: var(--card-footer-hover-bg);
  color: var(--card-footer-hover-color);
}

.gallery .card img {
  width: 100%;
  height: 100%;
  max-height: 28em;
  width: 100%;
  object-fit: cover;
  filter: grayscale(98%);
}

.gallery .card:hover img {
  filter: grayscale(0%);
}

.gallery a {
  padding: 0;
  text-decoration: none;
  color: black;
}

.disabled {
  pointer-events: none;
  opacity: 0.6;
}

/* Sections */
section {
  padding-top: 2em;
  /* padding-bottom: 2em; */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  scroll-snap-type: y proximity;
  scroll-snap-align: start;
}

#about,
#tools,
#gallery {
  width: 100%;
  scroll-snap-align: top;
}

#about {
  height: 100vh;
  /* background: #ececff; */
  background: var(--background-color);
  /* padding: 2em; */
  display: flex;
  flex-direction: row;
}

#tools {
  /* background: #ffffef; */
  background-color: color-mix(in srgb, #bffadc 40%, white 60%);
  /* background: transparent; */
}

.about-container-left {
  max-width: 50vw;
  width: 70vw;
  padding-left: 10vw;
  z-index: 2;
}

.about-container-left p.description {
  padding-top: 1em;
}

.about-container-right {
  width: 40vw;
  position: relative;
}

.about-navigation {
  display: flex;
  flex-direction: column;
  position: relative;
}

.about-navigation a {
  /* margin: 2em; */
  margin-left: 5vw;
  font-size: 1.2em;
  padding: 2em;
  transition: all 1s ease-in-out;
  user-select: none;
  cursor: pointer;
  user-focus: none;
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
}

.about-navigation a:hover {
  transition: all 0.1s ease-in-out;
}

.tool-container {
  /* border: 1px solid var(--card-border-color); */
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 5em 10vw 5em 10vw;
  scroll-snap-align: top;
}

.tool-caption {
  font-weight: 550;
  font-size: 2em;
  padding-top: 0em;
  padding-bottom: 2em;
}

.glitch {
  animation: glitch-shadow 3s infinite linear;
}

@keyframes glitch-shadow {
  0% {
    filter: drop-shadow(2px 0 1px #0005);
  }
  3% {
    filter: drop-shadow(-2px 0 1px #0005);
  }
  6%,
  30% {
    filter: drop-shadow(2px 0 1px #0005);
  }
  31%,
  100% {
    filter: drop-shadow(0px 0 0px #0005);
  }
}

#palette {
  background-color: color-mix(in srgb, #bffadc 40%, white 60%);
}

.tool-description {
  padding: 2em;
}

#palette .tool-description {
  width: 40%;
}

#palette img {
  width: 60vw;
}

#calendar {
  background: color-mix(in srgb, #ffefc1 40%, white 60%);
  --bg: #ffefc1;
}

#calendar img {
  width: 60vw;
  filter: sepia(80%);
}

#typing img {
  width: 80vw;
}

#typing {
  background-color: color-mix(in srgb, #ffc1c1 40%, white 60%);
}

#just-chord img {
  width: 90vw;
}

.about-navigation {
  position: sticky;
  top: 10vh;
  font-size: 1.5em;
}

#just-chord {
  background-color: color-mix(in srgb, #9b3 20%, white 60%);
}

#just-chord img {
  filter: sepia(10%);
}

#fifths {
  background-color: color-mix(in srgb, #222 90%, white 10%);
  color: #9f9;
}

#chord {
  background-color: color-mix(in srgb, #2233cc 15%, white 60%);
}

a:hover {
  text-decoration: underline;
  background: var(--hover-background-color);
}

.tool-pic img {
  transition: all 0.1s ease-out;
}

.tool-pic img:hover {
  cursor: pointer;
  /* transform: scale(101%); */
}

.me {
  float: right;
  /* border: 1px solid lightgreen; */
  height: var(--unit);
  max-height: 50vh;
  z-index: 1;
  shape-outside: polygon(
    -9.55% 13.17%,
    85.69% -0.12%,
    108.75% 87.31%,
    16.31% 100.22%
  );
  margin-left: 2em;
  overflow: visible;
  --unit: 37vh;
  transition: none;
}

.photo-frame {
  position: relative;
  width: calc(var(--unit) * 0.7);
  height: 35vh;
  transform: rotate(-11deg);
  --unit: inherit;
}

.photo-frame img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  /* border: 1px solid red; */
  object-fit: contain;
  filter: sepia(10%) brightness(105%);
}

.photo-frame svg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  bottom: 0;
  /* transform: translate(1%, 0%) scale(1); */
  /* border: 1px solid blue; */
}

.me:hover {
  transform: translateY(1%) scale(1.05);
  transition: all 0.1s ease-out;
  filter: drop-shadow(0 3px 5px #000000cc);
}

.me:hover .path-me {
  stroke: yellow;
  stroke-width: 5;
  stroke-dasharray: 15 0;
  stroke-dashoffset: 150;
  /* animation: dash 0.3s linear alternate infinite; */
  /* animation-timing-function: steps(2); */
  /* animation: none; */
  /* cursor: delta; */
  transition: stroke-dasharray 0.4s ease-in;
}

@keyframes dash {
  0% {
    stroke-dashoffset: 24;
  }

  100% {
    stroke-dashoffset: 0;
  }
}

.path-me {
  stroke-dasharray: 1000;
  fill: none;
  stroke: #fff248;
  stroke-width: 3.094;
  stroke-dasharray: 12, 12;
  stroke-dashoffset: 0;
  stroke-opacity: 1;
  animation: dash 0.3s linear alternate infinite;
  animation-timing-function: steps(2);
}

code {
  background-color: var(--hover-background-color);
  padding: 0.1em 0.3em;
  border-radius: 0.3em;
}

mark {
  background-color: var(--hover-background-color);
  padding: 0.3em 0em;
  border-radius: 0.3em;
}

#publications {
  background-color: color-mix(in srgb, #bffadc 50%, white 50%);
  width: 100%;
  padding: 3em 0;
}

.publications-list {
  display: flex;
  flex-direction: column;
  gap: 1.5em;
  width: 63vw;
  margin: 0 auto;
}

.publication-item {
  background: var(--card-footer-bg);
  border-left: 5px solid
    color-mix(in srgb, var(--pub-theme-color) 60%, black 40%);
  /* border-radius: 0.7em; */
  padding: 1em 2em;
  /* box-shadow: 0 3px 5px #0005; */
  display: flex;
  flex-direction: column;
  gap: 0.2em;
  box-shadow: var(--card-shadow);
  transition: all 0.1s ease-in-out;
}

.publication-item:hover {
  box-shadow: var(--card-hover-shadow);
  transform: var(--card-hover-transform);
}

.pub-title {
  font-weight: 600;
  font-size: 1.1em;
  color: #333;
}

.pub-authors {
  font-size: 0.95em;
  color: #666;
}

.pub-venue {
  font-size: 0.9em;
  color: #888;
}

.glow {
  animation: glow-effect 0.5s ease-in-out;
  box-shadow: var(--glow-shadow);
}

@keyframes glow-effect {
  0% {
    box-shadow: var(--no-glow-shadow);
  }

  40% {
    box-shadow: var(--glow-shadow);
  }

  100% {
    box-shadow: var(--no-glow-shadow);
  }
}