#home,
#about,
#experience,
#projects,
#skills,
#contact {
  position: relative;
}

#home .container,
#about .container,
#experience .container,
#projects .container,
#skills .container,
#contact .container {
  position: relative;
  z-index: 2;
}

.doodle-peek {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  opacity: 0.72;
  --drift: 0px;
  --peek-start-x: 0px;
  --peek-end-x: 0px;
  --peek-start-y: 0px;
  --peek-end-y: 0px;
  --peek-rotate: 0deg;
  transform: translate(var(--peek-end-x), calc(var(--peek-end-y) + var(--drift))) rotate(var(--peek-rotate)) scale(1);
  transition: opacity 420ms ease, transform 460ms ease;
}

.js-doodles .doodle-peek {
  opacity: 0;
  transform: translate(var(--peek-start-x), calc(var(--peek-start-y) + var(--drift))) rotate(var(--peek-rotate)) scale(0.86);
}

.js-doodles .doodle-peek.is-visible {
  opacity: 0.9;
  transform: translate(var(--peek-end-x), calc(var(--peek-end-y) + var(--drift))) rotate(var(--peek-rotate)) scale(1);
}

.doodle-loop {
  width: 170px;
  height: 170px;
  border-radius: 999px;
  border: 2px solid color-mix(in srgb, var(--primary) 44%, transparent);
  background: radial-gradient(circle, color-mix(in srgb, var(--surface-strong) 58%, transparent) 0%, transparent 70%);
}

.doodle-orbit {
  width: 130px;
  height: 130px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent) 56%, transparent);
  box-shadow: inset 0 0 0 12px color-mix(in srgb, var(--surface) 42%, transparent);
}

.doodle-pill {
  width: 180px;
  height: 64px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--primary) 46%, transparent);
  background: linear-gradient(
    120deg,
    color-mix(in srgb, var(--surface-strong) 64%, transparent) 0%,
    color-mix(in srgb, var(--accent) 24%, transparent) 100%
  );
}

.doodle-squiggle {
  width: 124px;
  height: 56px;
  border-radius: 999px;
  border: 2px dashed color-mix(in srgb, var(--primary) 54%, transparent);
  transform-origin: center;
}

.doodle-home-right {
  top: 12%;
  right: -48px;
  --peek-start-x: 90px;
  --peek-end-x: 0px;
}

.doodle-home-left {
  left: -72px;
  bottom: 12%;
  --peek-start-x: -88px;
  --peek-end-x: 0px;
}

.doodle-about-left {
  top: 18%;
  left: -34px;
  --peek-start-x: -72px;
  --peek-end-x: 0px;
}

.doodle-exp-right {
  top: 22%;
  right: -30px;
  --peek-start-x: 88px;
  --peek-end-x: 0px;
}

.doodle-projects-right {
  top: 20%;
  right: -66px;
  --peek-start-x: 92px;
  --peek-end-x: 0px;
}

.doodle-projects-left {
  bottom: 14%;
  left: -46px;
  --peek-start-x: -86px;
  --peek-end-x: 0px;
}

.doodle-skills-right {
  top: 17%;
  right: -28px;
  --peek-start-x: 82px;
  --peek-end-x: 0px;
}

.doodle-contact-left {
  top: 26%;
  left: -24px;
  --peek-start-x: -68px;
  --peek-end-x: 0px;
}

#experience .card,
#projects .card,
#skills .card {
  height: 100%;
}

#recognition .section,
#education .section {
  padding-top: var(--space-5);
  padding-bottom: var(--space-2);
}

.contact {
  padding-bottom: var(--space-8);
}

@media (max-width: 900px) {
  .doodle-peek {
    opacity: 0.35;
  }

  .doodle-home-right,
  .doodle-projects-right,
  .doodle-contact-left {
    display: none;
  }
}