#main .nav-pills>li.active>a,
#main .nav-pills>li.active>a:hover,
#main .nav-pills>li.active>a:focus {
  background-color: linear-gradient(135deg, #d8e5ff 0%, #e8d5f8 100%);
}

/* Change navbar link text color */
.navbar-nav .nav-link {
  color: #e8d5f8;
  /* Text color */
}

/* Change navbar link text color on hover */
.navbar-nav .nav-link:hover {
  color: #e8d5f8;
  /* Text color when hovering */
}

#main .nav-pills>li>a:hover {
  background-color: linear-gradient(135deg, #d8e5ff 0%, #e8d5f8 100%);
}

#main a:link {
  color: #d8e5ff;
}

/* visited link */
#main a:visited {
  color: #881ca3;
}

/* mouse over link */
#main a:hover {
  color: #d8e5ff;
}

/* selected link */
#main a:active {
  color: #716464;
}

h1,
h2,
h3,
h4,
h5,
h6,
legend {
  color: #000000;
}

h1 {
  font-size: 40px;
}

h2 {
  font-size: 25px;
}

body {
  font-size: 16px;
}

#nav-top span.glyphicon {
  color: #d8e5ff;
}

#table-of-contents header {
  color: #d8e5ff;
  background-color: linear-gradient(135deg, #d8e5ff 0%, #e8d5f8 100%);
}

.list-group-item.active,
.list-group-item.active:hover,
.list-group-item.active:focus {
  z-index: 2;
  color: #ffffff;
  background-color: linear-gradient(135deg, #d8e5ff 0%, #e8d5f8 100%);
  border-color: #d8e5ff
}


a {
  color: #881ca3;
  text-decoration: none
}



a:hover,
a:focus {
  color: #d8e5ff;
  text-decoration: underline
}

a:visited {
  color: #d8e5ff
}

#sidebar {
  color: #d8e5ff;
  background: #d8e5ff;
}

#sidebar h2 {
  color: #FFFFFF;
  background-color: #98b7eb;
}

#sidebar a {
  color: #FFFFFF;
}

#sidebar a:hover {
  background-color: #3F4548;
  color: #FFFFFF;
}

.navbar {
  background-image: linear-gradient(120deg, #d8e5ff, #881ca3);
}

.nav-links li a {
  color: #881ca3;
  text-decoration: none;
  padding: 10px 15px;
  display: inline-block;
  transition: background-color 0.3s;
}

.nav-links li a:hover {
  background-color: #555;
}

.navbar-default .navbar-nav>li>a:hover,
.navbar-default .navbar-nav>li>a:focus {
  color: #ffffff;
  background-color: linear-gradient(135deg, #d8e5ff 0%, #e8d5f8 100%)
}

.navbar-default .navbar-nav>.active>a,
.navbar-default .navbar-nav>.active>a:hover,
.navbar-default .navbar-nav>.active>a:focus {
  color: #d8e5ff;
  background-color: linear-gradient(135deg, #d8e5ff 0%, #e8d5f8 100%)
}

.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
  border-color: #d8e5ff
}

.navbar-default .navbar-nav>.open>a,
.navbar-default .navbar-nav>.open>a:hover,
.navbar-default .navbar-nav>.open>a:focus {
  background-color: #d8e5ff;
  color: #ffffff
}

.dropdown-menu>li>a:hover,
.dropdown-menu>li>a:focus {
  text-decoration: none;
  color: #ffffff;
  background-color: linear-gradient(135deg, #d8e5ff 0%, #e8d5f8 100%)
}

.dropdown-menu>.active>a,
.dropdown-menu>.active>a:hover,
.dropdown-menu>.active>a:focus {
  color: #ffffff;
  text-decoration: none;
  outline: 0;
  background-color: linear-gradient(135deg, #d8e5ff 0%, #e8d5f8 100%)
}

body {
  /* Soft blue-to-purple gradient similar to the image */
  background-color: linear-gradient(135deg, #d8e5ff 0%, #e8d5f8 100%);
  background-attachment: fixed;
  /* Keeps gradient stationary when scrolling */
}

body {
  background-color: #fdf2f8;
  /* Light pink hex code */
}

.quarto-grid-item {
  border: none !important;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  /* Subtle shadow for the cards */
}

/* ----------------------------------------------
 * Generated by Animista on 2026-3-8 20:12:46
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation tracking-in-expand
 * ----------------------------------------
 */
@-webkit-keyframes tracking-in-expand {
  0% {
    letter-spacing: -0.5em;
    opacity: 0;
  }

  40% {
    opacity: 0.6;
  }

  100% {
    opacity: 1;
  }
}

@keyframes tracking-in-expand {
  0% {
    letter-spacing: -0.5em;
    opacity: 0;
  }

  40% {
    opacity: 0.6;
  }

  100% {
    opacity: 1;
  }
}

.tracking-in-expand {
  -webkit-animation: tracking-in-expand 3s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
  animation: tracking-in-expand 3s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
}

/* UX & Product Design interactive desktop */
.ux-dashboard-page { box-sizing: border-box; display: grid; height: calc(100vh - 90px); left: 50%; margin-left: -50vw; overflow: hidden; padding: 12px; place-items: center; position: relative; width: 100vw; }
.ux-computer-stage { position: relative; transform: translateY(-9%); width: min(1450px, 116vw); aspect-ratio: 1; user-select: none; }
.ux-computer-frame { display: block; width: 100%; height: auto; pointer-events: none; }
.ux-screen { position: absolute; left: 25.1%; top: 11.05%; width: 50.9%; height: 42.55%; overflow: hidden; border-radius: 1.2% 1.2% 1.8% 1.8%; box-shadow: inset 0 0 0 2px rgba(34, 22, 29, .34), inset 0 0 20px rgba(47, 20, 32, .45); cursor: none !important; }
.ux-screen, .ux-screen * { cursor: none !important; }
.ux-pink-desktop { display: none; }
.ux-layer { position: absolute; inset: 0; }
.ux-message-notification { animation: ux-window-arrival .68s cubic-bezier(.2,.85,.3,1) both; }
.ux-message-notification img, .ux-loading-window img { display: block; width: 100%; height: 100%; object-fit: contain; }
.ux-message-notification img { transform: none; }
.ux-hotspot { position: absolute; left: 37%; top: 65%; width: 28%; height: 12%; border: 0; background: transparent; cursor: none; }
.ux-hotspot:focus-visible, .ux-pixel-button:focus-visible, .ux-desktop-icon:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.ux-welcome-window { animation: ux-window-arrival .42s cubic-bezier(.2,.85,.3,1) both; background: transparent; padding: 0; }
.ux-welcome-window > img { display: block; height: 100%; object-fit: contain; width: 100%; }
.ux-welcome-window .ux-start-loading { background: transparent; border: 0; box-shadow: none; height: 11%; left: 35%; padding: 0; position: absolute; top: 63%; width: 28%; }
.ux-welcome-window .ux-start-loading:hover, .ux-welcome-window .ux-start-loading:focus-visible { background: transparent; box-shadow: none; transform: none; }
.ux-welcome-copy { display: grid; grid-template-columns: 33% 1fr; align-items: center; gap: 5%; width: 100%; }
.ux-welcome-copy img { animation: ux-assistant-float 2.6s ease-in-out infinite; width: 100%; image-rendering: pixelated; }
.ux-welcome-copy p { font-family: monospace !important; font-size: clamp(7px, 1.15vw, 17px); line-height: 1.35; margin: 0 0 7%; }
.ux-window-label { font-weight: 900; font-size: clamp(9px, 1.5vw, 21px) !important; }
.ux-pixel-button { background: #f397b5; border: 2px solid #171217; box-shadow: 3px 3px 0 #171217; color: #fff; cursor: none; font-family: monospace; font-size: clamp(7px, 1vw, 15px); font-weight: 900; padding: 7% 10%; transition: transform .16s steps(2, end), box-shadow .16s steps(2, end); }
.ux-pixel-button:hover, .ux-pixel-button:focus-visible { box-shadow: 1px 1px 0 #171217; transform: translate(2px, 2px); }
.ux-loading-window { animation: ux-fade-in .25s linear both; background: transparent; display: grid; overflow: hidden; place-items: center; }
.ux-loading-window img { animation: none; height: 72%; max-width: 86%; object-fit: contain; transform: scale(1.025); width: auto; }
.ux-desktop-icons { animation: ux-desktop-boot .3s linear both; display: block; }
.ux-desktop-icon { align-items: center; background: transparent; border: 0; color: #4b1635; cursor: none; display: flex; flex-direction: column; font-family: monospace; font-size: clamp(4px, .48vw, 8px); font-weight: 900; gap: 2px; line-height: 1.05; padding: 0; position: absolute; text-align: center; text-decoration: none !important; width: 15%; }
.ux-desktop-icon img { height: auto; image-rendering: pixelated; max-height: 34%; max-width: 58%; object-fit: contain; transition: transform .18s steps(2, end), filter .18s steps(2, end); }
.ux-desktop-icon span, .ux-desktop-icon:hover span, .ux-desktop-icon:focus-visible span { text-decoration: none !important; }
.ux-desktop-icon:hover img, .ux-desktop-icon:focus-visible img { animation: ux-icon-hover-bounce .42s steps(3, end) both; }
.ux-desktop-icon:nth-child(1) { animation: ux-icon-arrival .35s .05s both; }.ux-desktop-icon:nth-child(2) { animation: ux-icon-arrival .35s .12s both; }.ux-desktop-icon:nth-child(3) { animation: ux-icon-arrival .35s .19s both; }.ux-desktop-icon:nth-child(4) { animation: ux-icon-arrival .35s .26s both; }.ux-desktop-icon:nth-child(5) { animation: ux-icon-arrival .35s .33s both; }.ux-desktop-icon:nth-child(6) { animation: ux-icon-arrival .35s .40s both; }.ux-desktop-icon:nth-child(7) { animation: ux-icon-arrival .35s .47s both; }
.ux-projects { left: 4%; top: 2%; }.ux-ux-design { left: 4%; top: 15%; }.ux-writing { left: 4%; top: 28%; }.ux-presentations { left: 4%; top: 41%; }.ux-resume { left: 4%; top: 54%; }.ux-home { left: 4%; top: 67%; }.ux-contact { left: 4%; top: 80%; }.ux-contact img { max-width: 88%; }
#ux-pixel-cursor { display: none; image-rendering: pixelated; left: 0; pointer-events: none; position: absolute; top: 0; transform: translate(-3%, -3%); width: 4%; z-index: 10; }.ux-screen:hover #ux-pixel-cursor.is-visible { display: block; }#ux-pixel-cursor.is-hand { width: 5%; transform: translate(-8%, -8%); }
@keyframes ux-window-arrival { from { opacity: 0; transform: scale(.82) translateY(8%); } to { opacity: 1; transform: scale(1) translateY(0); } }
@keyframes ux-assistant-float { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-5%) rotate(2deg); } }
@keyframes ux-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes ux-loading-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .72; } }
@keyframes ux-desktop-boot { from { opacity: 0; } to { opacity: 1; } }
@keyframes ux-icon-arrival { from { opacity: 0; transform: translateY(18%); } to { opacity: 1; transform: translateY(0); } }
@keyframes ux-icon-hover-bounce { 0% { transform: translateY(0); } 45% { transform: translateY(-8%); } 70% { transform: translateY(-3%); } 100% { transform: translateY(0); } }
@media (max-width: 700px) { .ux-dashboard-page { padding: 6px; }.ux-computer-stage { width: 100vw; }.ux-screen { border-radius: 4%; }.ux-welcome-copy { grid-template-columns: 30% 1fr; }.ux-desktop-icon { font-size: 6px; } }
@media (prefers-reduced-motion: reduce) { .ux-message-notification, .ux-welcome-window, .ux-welcome-copy img, .ux-loading-window, .ux-loading-window img, .ux-desktop-icons, .ux-desktop-icon { animation: none !important; }.ux-pixel-button, .ux-desktop-icon img { transition: none; } }

.footer,
.nav-footer {
  background-image: linear-gradient(120deg, #d8e5ff, #881ca3) !important;
  background-color: transparent !important;
  border-top: none !important;
}

.footer .nav-footer a,
.nav-footer a {
  color: #d8e5ff !important;
  font-size: 24px !important;
  /* Adjust this value to make icons bigger/smaller */
}

.shiny-iframe-container {
  width: 100%;
  height: 100vh;
  /* Takes up 100% of the viewport height */
  min-height: 750px;
  /* Ensures it doesn't get too small on mobile */
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.shiny-iframe-container iframe {
  width: 100%;
  height: 100%;
  border: none;
}

.footer .nav-footer a:hover,
.nav-footer a:hover {
  color: #ffffff !important;
  background-image: none !important;
}

html {
  scroll-behavior: smooth;
}

.scroll-down-arrow {
  display: inline-block;
  animation: bounce 2s infinite;
  text-decoration: none;
  transition: transform 0.3s;
}

.scroll-down-arrow:hover {
  transform: scale(1.2);
}

@keyframes bounce {

  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
  }

  40% {
    transform: translateY(-15px);
  }

  60% {
    transform: translateY(-7px);
  }
}

/* --- Download Buttons --- */
.download-btn {
  padding: 10px 20px;
  font-size: 16px;
  border-radius: 30px;
  transition: all 0.3s ease;
  text-decoration: none;
}

.btn-primary.download-btn {
  background-color: #881ca3;
  border-color: #881ca3;
  color: #ffffff;
}

.btn-primary.download-btn:hover {
  background-color: #d8e5ff;
  border-color: #d8e5ff;
  color: #881ca3;
}

.btn-outline-primary.download-btn {
  color: #881ca3;
  border-color: #881ca3;
}

.btn-outline-primary.download-btn:hover {
  background-color: #881ca3;
  color: #ffffff;
}

/* --- Timeline Layout --- */
.timeline {
  position: relative;
  max-width: 100%;
  margin: 0;
  padding: 20px 0;
}

.timeline::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 20px;
  width: 4px;
  background-color: #d8e5ff;
}

.timeline-item {
  position: relative;
  margin-bottom: 30px;
  padding-left: 50px;
}

.timeline-dot {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: #881ca3;
  border: 3px solid #fdf2f8;
  z-index: 1;
}

.timeline-content {
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  border-left: 4px solid #881ca3;
}

.timeline-content h3 {
  margin-top: 0;
  margin-bottom: 5px;
  color: #881ca3;
}

.timeline-content h4 {
  margin-top: 0;
  color: #555;
  font-size: 1.1em;
}

.timeline-date {
  color: #777;
  font-style: italic;
  margin-bottom: 10px;
}

/* --- About Section Images --- */
.about-img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border: 4px solid #d8e5ff;
  /* Matches the pastel blue */
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* --- Latest Work --- */
.latest-work-container {
  padding: 40px 20px;
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
}

.latest-work-intro {
  font-size: 1.15rem;
  color: #333;
  margin: 0 auto 28px;
  max-width: 720px;
}

.latest-work-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  text-align: left;
}

.latest-work-card {
  background: #ffffff;
  border: 1px solid #ead5ef;
  border-radius: 14px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
  color: #222 !important;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  padding: 0 0 22px;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.latest-work-card:hover,
.latest-work-card:focus-visible {
  box-shadow: 0 10px 20px rgba(136, 28, 163, 0.18);
  color: #222 !important;
  text-decoration: none;
  transform: translateY(-5px);
}

.latest-work-card h3 {
  color: #881ca3;
  font-size: 1.4rem;
  font-size: 1.2rem;
  margin: 8px 16px;
}

.latest-work-card p {
  color: #333;
  flex-grow: 1;
  line-height: 1.55;
  font-size: 0.94rem;
  margin: 0 16px 14px;
}

.latest-work-card img {
  height: 120px;
  border-bottom: 3px solid #ead5ef;
  object-position: center 82%;
  object-fit: cover;
  width: 100%;
}

.latest-work-label {
  color: #6b426f;
  font-family: Montserrat, sans-serif !important;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  margin: 14px 16px 0;
  text-transform: uppercase;
}

.latest-work-link {
  color: #881ca3;
  font-weight: 700;
  margin: 0 16px;
}

.latest-work-arrow {
  animation: latest-arrow-nudge 1.3s ease-in-out infinite;
  display: inline-block;
  margin-left: 5px;
}

@keyframes latest-arrow-nudge {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(7px); }
}

.hero-portrait {
  aspect-ratio: 1 / 1;
  border: 4px solid #d8e5ff;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  max-width: none;
  object-fit: cover;
  width: 50%;
}

.about-photo-row {
  display: flex;
  gap: 20px;
  justify-content: center;
  margin-top: 40px;
}

.about-photo-row figure {
  flex: 0 1 220px;
  margin: 0;
  text-align: center;
}

.about-photo-row img {
  aspect-ratio: 1 / 1;
  border: 4px solid #d8e5ff;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  object-fit: cover;
  width: 100%;
}

.about-photo-row figcaption {
  color: #555;
  font-size: 0.9rem;
  margin-top: 8px;
}

/* --- Expandable skills --- */
.skills-intro {
  color: #555;
  margin-bottom: 16px;
}

.skill-group {
  background: #ffffff;
  border: 1px solid #ead5ef;
  border-radius: 8px;
  margin: 0 0 12px;
  overflow: hidden;
}

.skill-group summary {
  align-items: center;
  color: #881ca3;
  cursor: pointer;
  display: flex;
  font-weight: 700;
  justify-content: space-between;
  list-style: none;
  padding: 14px 16px;
}

.skill-group summary::-webkit-details-marker {
  display: none;
}

.skill-group summary::after {
  color: #881ca3;
  content: "+";
  font-size: 1.4rem;
  line-height: 1;
  margin-left: 12px;
}

.skill-group[open] summary::after {
  content: "−";
}

.skill-group summary span {
  color: #666;
  font-size: 0.78rem;
  font-style: italic;
  font-weight: normal;
  margin-left: 12px;
  text-align: right;
}

.skill-group ul {
  border-top: 1px solid #f1e4f4;
  margin: 0;
  padding: 12px 16px 14px 34px;
}

.skill-group li {
  color: #333;
  margin-bottom: 8px;
}

@media (max-width: 768px) {
  .latest-work-grid {
    grid-template-columns: 1fr;
  }

  .latest-work-card {
    min-height: 0;
  }

  .hero-portrait {
    max-width: 300px;
    width: 75%;
  }

  .about-photo-row {
    align-items: center;
    flex-direction: column;
  }

  .about-photo-row figure {
    max-width: 260px;
    width: 100%;
  }

  .skill-group summary {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .skill-group summary span {
    flex-basis: calc(100% - 32px);
    margin: 6px 0 0;
    text-align: left;
  }
}

@media (prefers-reduced-motion: reduce) {
  .latest-work-arrow {
    animation: none;
  }
}
}

/* Force the navbar homepage title to always remain black, even after clicking */
.navbar-brand:visited, .navbar-title:visited {
  color: black !important;
}

/* --- Global Font Settings --- */
body, p, li, span, a, div, h2, h3, h4, h5, h6 {
  font-family: "Times New Roman", Times, serif !important;
}

/* Main Header Font (Tab Titles) */
h1, h1.title, .quarto-title-text, .title {
  font-family: "Cooper BT", "Cooper Black", "Cooper Hewitt", serif !important;
}