/**
  Structure
  ----------------------
  1. Custom Properties
  2. Fonts
  3. Entire page
  4. Header
  5. Footer
  6. Index page
  7. Posts Page
  ----------------------
*/

/**
 Colors were created here:
 https://coolors.co/bdd5ea-f7f7ff-36558f-fe5f55-e3b23c
 */

/**
 ----------------------
 1. Custom Properties
 ----------------------
 */
:root {
  --background-color: hsl(0, 0%, 100%);
  --light-blue-bg: hsl(208, 51%, 70%);
  --lightest-blue-bg: hsl(208, 51%, 90%);
  --text-blue: hsl(219, 45%, 39%);
  --text-primary: hsl(0, 0%, 0%);
  --youtube-red: hsl(0, 100%, 50%);
  --youtube-red-hover: hsl(0, 100%, 40%);
  --twitter-blue: hsl(203, 89%, 53%);
  --twitter-blue-hover: hsl(203, 89%, 43%);
  --github-gray: hsl(0, 0%, 20%);
  --github-gray-hover: hsl(0, 0%, 10%);
  --discord-blue: hsl(227, 58%, 65%);
  --discord-blue-hover: hsl(227, 58%, 55%);
  --affiliate-purple: hsl(283, 100%, 55%);
  --patreon-red: hsl(7, 93%, 65%);
  --patreon-light-bg: hsl(7, 93%, 95%);
  --patreon-dark-bg: hsl(7, 93%, 85%);
  --text-blue-hover: hsl(219, 45%, 29%);
  --light-green: #21ab9d;
  --dark-green: #177c72;
  --max-width: 900px;
  --tags-border-radius: 0.75em;
  --image-border-radius: 1.5em;
  --code-border-radius: 0.75em;
  --max-p-width: 55ch;
  --max-code-width: 65ch;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/**
 ----------------------
 2. Fonts
 ----------------------
 */
@font-face {
  font-family: 'Main';
  src: url(fonts/Montserrat-Regular.ttf);
}
@font-face {
  font-family: 'Main';
  src: url(fonts/Montserrat-Bold.ttf);
  font-weight: bold;
}
@font-face {
  font-family: 'Main';
  src: url(fonts/Montserrat-Light.ttf);
  font-weight: 300;
}

@font-face {
  font-family: 'Code';
  src: url(fonts/SourceCodePro-Regular.ttf);
}

/**
  ----------------------
  3. Entire page
  ----------------------
*/
html {
  background-color: var(--background-color);
  scroll-behavior: smooth;
  overflow-x: hidden; /* Prevent horizontal scroll from flying cards */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
}

/* Hide scrollbar for Chrome, Safari and Opera */
html::-webkit-scrollbar {
  display: none;
}

a {
  text-decoration: none;
}

li {
  list-style-type: none;
  line-height: 1.5em;
}

p {
  color: var(--text-primary);
  line-height: 1.5em;
}

strong {
  word-break: break-word;
  hyphens: auto;
}

.image-container {
  text-align: center;
  margin: 5px 0;
}

.side-image {
  max-width: 75%;
  height: auto;
  object-fit: cover;
  margin: 10px auto;
  border: 3px solid #ddd;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  border-radius: 8px;
  display: block;
}

.top-image {
  max-width: 71%;
  height: auto;
  object-fit: cover;
  margin: 10px auto;
  border: 3px solid #ddd;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  border-radius: 8px;
  display: block;
}

@media (max-width: 768px) {
  .top-image, .side-image {
    max-width: 100%;
  }
}

.image-container img {
  width: 220px;
  height: 220px;
  border-radius: 50%;
  object-fit: cover;
  transition: transform 0.3s ease, filter 0.3s ease; /* Smooth transitions for hover effects */
}

/* Hover effect: Slight zoom and change brightness */
.image-container img:hover {
  transform: scale(1.1); /* Slight zoom effect */
  filter: brightness(1.2); /* Slightly brighten the image */
}

/* Spin animation on click */
.image-container img:active {
  animation: spin 1s ease; /* Spin animation */
}

/* Keyframes for spin animation */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

body {
  color: var(--text-primary);
  font-family: 'Main';
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  transition: none;
}

html.theme-ready body {
  transition: none;
}

.wrapper {
  max-width: var(--max-width);
  margin-left: auto;
  margin-right: auto;
  padding: 30px 40px 0 40px;
  text-align: center;
}

.page {
  text-align: left;
}

hr {
  margin-top: 10px;
  margin-bottom: 18px;
  border: 0.5px solid rgb(200, 200, 200);
}

.inline-block {
  display: inline-block;
}

.content {
  display: grid;
  place-items: center;
}

.content a{
  overflow-wrap: break-word;
  word-break: normal;
}

.content p,
.content h2,
.content h3,
.content h4,
.content ul,
.content .tab-container,
.content .tab-content {
  max-width: var(--max-p-width);
  margin-top: 1.5rem;
  display: block;
  width: 100%;
}

.content h3,
.content h2 {
  padding: 0;
  color: var(--text-blue);
}


li {
  color: var(--text-primary);
  line-height: 1.5em;
  font-size: medium;
  color: #21ab9d;
  font-weight: normal;
}
a {
  color: #21ab9d;
}

/**
 ----------------------
 4. Header
 ----------------------
 */
header {
  line-height: 1.5em;
  color: var(--text-blue);
  background: var(--background-color);
}

header .wrapper {
  max-width: var(--max-width);
  margin-left: auto;
  margin-right: auto;
  padding: 1rem 2rem;
}

header > div {
  display: grid;
}

.header-image {
  width: 250px;
  height: 250px;
}

.header-image-small {
  width: 100px;
  height: 100px;
}

/* Tinder-like Card Stack */
.tinder-wrapper {
  position: relative;
  width: 250px;
  height: 250px;
  margin: 0 auto;
  overflow: visible; /* Ensure cards can fly out visually */
}

.tinder-cards {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 10;
}

.tinder-card {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: transparent; /* Remove background color */
  cursor: grab;
  transition: transform 0.3s ease, opacity 0.3s ease;
  transform-origin: 50% 100%;
  will-change: transform, opacity;
  overflow: visible; /* Allow overflow if needed, but usually hidden is better. Let's try visible to see if it fixes clipping */
}

.tinder-card:active {
  cursor: grabbing;
}

.tinder-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0;
  pointer-events: none;
  box-shadow: none; /* Remove shadow from image */
  margin: 0;
  padding: 0;
  border: none;
  background-color: transparent; /* Ensure no background on img */
}

/* Add shadow to the card container instead */
.tinder-card {
  box-shadow: none;
}


.tinder-message {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  background-color: var(--background-color);
  border: none;
  z-index: 5;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  padding: 1rem;
}

.tinder-message.active {
  opacity: 1;
  pointer-events: all;
}

.end-quote {
  font-size: 1.1rem;
  font-weight: bold;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
}

.check-work-container {
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  color: var(--dark-green);
  animation: fadeIn 1s ease 0.5s forwards; /* Delay appearance slightly */
  opacity: 0;
}

.check-work-container p {
  font-size: 0.85rem;
  margin: 0;
  font-weight: 500;
  color: var(--dark-green);
}

.bounce-arrow {
  font-size: 1.2rem;
  animation: bounce 2s infinite;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-6px);
  }
  60% {
    transform: translateY(-3px);
  }
}

@keyframes fadeIn {
  to { opacity: 1; }
}

html.dark-mode .check-work-container,
html.dark-mode .check-work-container p {
  color: var(--light-green);
}

.tinder-actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.action-btn {
  border: none;
  padding: 8px 16px;
  border-radius: 20px;
  cursor: pointer;
  font-weight: bold;
  transition: all 0.2s;
  font-size: 0.8rem;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.action-btn.primary {
  background-color: #177c72;
  color: white;
}

.action-btn.primary:hover {
  background-color: #21ab9d;
  transform: translateY(-2px);
}

.action-btn.secondary {
  background-color: transparent;
  color: #177c72;
  border: 1px solid #177c72;
  padding: 8px 12px;
}

.action-btn.secondary:hover {
  background-color: rgba(23, 124, 114, 0.1);
}

/* Dark mode support */
html.dark-mode .tinder-message {
  background-color: var(--background-color); /* Blend with page background */
  border-color: transparent; /* Remove border if any */
}

html.dark-mode .tinder-card {
  background-color: transparent; /* Ensure transparent in dark mode too */
  box-shadow: none;
}

html.dark-mode .tinder-message p {
  color: #2dd4bf;
}


html.dark-mode .action-btn.secondary {
  color: #2dd4bf;
  border-color: #2dd4bf;
}

html.dark-mode .action-btn.secondary:hover {
  background-color: rgba(45, 212, 191, 0.1);
}

.highlighted-text {
  color: var(--dark-green);
  font-weight: bold;
}

html.dark-mode .highlighted-text {
  color: var(--light-green);
}

header h1 {
  font-size: xx-large;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

header p {
  font-size: larger;
}

nav ul {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

header li:not(.selection) a {
  font-weight: normal;
}

header nav {
  margin-top: 2rem;
  margin-bottom: 1rem;
  font-size: small;
}

header nav a {
  display: inline-block;
  color: var(--text-primary);
  padding: 0.5rem 2rem;
  border-radius: 2rem;
  transition: background-color 300ms ease-in-out;
}

.header-promotion {
  background: hsl(0, 100%, 80%);
}

.header-promotion a {
  font-weight: 600;
  color: var(--text-primary);
}

.header-promotion a:hover {
  color: var(--text-primary);
  text-decoration: underline;
}

.avatar-img {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4rem;
  margin: 2rem auto 1rem auto;
  width: auto; 
  height: auto;
}

.main-text {
  display: flex;
  align-items: start;
  flex-direction: column;
  width: 300px;
}

.justify-center {
  justify-content: center;
}

.hero-text-container > p {
  font-size: medium;
  color: var(--text-primary);
}

.hero-text-container .tags {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-evenly;
  width: 100%;
}

.hero-text-container .tags li {
  color: var(--text-primary);
  padding: 0;
  margin-bottom: 0;
  margin-right: 0;
}

#regular-li {
  cursor: unset;
}

.hero-text-container .tags a {
  display: inline-block;
  padding: 0.75em;
  font-size: 0.85em;
  border-radius: var(--tags-border-radius);
  cursor: pointer;
  transition: background-color 200ms ease-in-out;
  margin-bottom: 0;
}

.mobile-hide {
  display: none;
}

@media (max-width: 700px) {
  .avatar-img {
    display: block;
    text-align: center;
  }
  
  header nav a {
    padding: 0.5rem 1rem;
  }

  .hero-container {
    margin-top: 0.5rem;
    margin-bottom: 1rem;
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }

  .colorized-text {
    line-height: 2rem;
  }

  .header-image {
    width: 150px;
    height: 150px;
    place-self: center;
  }

  .header-image-small {
    place-self: center;
  }
}

header nav a:hover,
a:focus {
  background-color: #21ab9d7a;
}

header nav li.selected a {
  color: #0e564f;
  background-color: #21ab9d7a;
  font-weight: 600;
}

.banner-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  place-items: center;
}

.banner {
  margin: 1.5rem 0;
}

.banner a {
  display: inline-block;
  border: 2px solid var(--light-blue-bg);
  padding: 0.5rem 1rem;
  background-color: var(--lightest-blue-bg);
  border-radius: 2rem;
  color: var(--text-primary);
  transition: background-color 300ms ease-in-out, border 300ms ease-in-out;
}

.banner a:hover {
  background-color: var(--light-blue-bg);
  border: 2px solid var(--text-blue);
}

@media (max-width: 700px) {
  .banner-container {
    grid-template-columns: repeat(1, 1fr);
    margin-bottom: 1rem;
  }

  .banner {
    margin: 0.5rem 0;
  }
}

/**
  ----------------------
  5. Footer
  ----------------------
*/
footer {
  margin-top: 3rem;
  text-align: center;
  color: var(--text-primary);
  line-height: 1.5em;
}

.patreon-footer {
  display: inline-block;
  padding: 2rem 4rem;
  margin: 1rem;
  position: relative;
  border: 2px solid var(--patreon-red);
  border-radius: var(--tags-border-radius);
}

.patreon-footer::before {
  content: 'Latest Project';
  position: absolute;
  top: -11px;
  left: 20px;
  line-height: 20px;
  padding: 0 3px;
  background-color: var(--background-color);
  color: var(--patreon-red);
  font-weight: bold;
  text-transform: uppercase;
  font-size: 12px;
}

.patreon-footer > *:not(:last-child) {
  margin-bottom: 1.5rem;
}

.patreon-footer * {
  max-width: var(--max-p-width);
}

.patreon-footer a {
  font-weight: bold;
  transition: background-color 200ms ease-in-out;
}

.patreon-footer a:hover {
  background: none;
  color: #177c72;
}

.footer-links {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  margin: 2rem 0rem;
  place-items: center;
}

.author-social-links {
  display: grid;
  grid-auto-flow: column;
  gap: 2rem;
  margin: 0.6rem 0rem;
  place-items: center;
  font-size: 14px;
}

.author-social-links a {
  color: var(--text-primary);
  text-decoration: underline;
}

.author-link {
  color: var(--text-primary);
}

.author-link-post {
  color: var(--text-primary);
  font-size: large;
  font-style: italic;
  text-decoration: underline;
  margin-left: 5px;
}

.author-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin: 2rem 0;
}

.stefan-edition {
  grid-template-columns: 1fr;
  max-width: 33%;
  margin: 2rem auto;
}

.author-grid img {
  max-width: 100%;
  border-radius: 50%;
  border: 2px var(--light-blue-bg) solid;
}

.author-grid span {
  display: block;
  text-align: center;
  color: var(--text-primary);
}

.footer-links li, author-social-links li {
  display: block;
  width: 100%;
}

.footer-button {
  display: block;
  color: var(--text-blue);
  padding: 0.5rem 1rem;
  border-radius: 2em;
  transition: background-color 200ms ease-in-out;
}

.footer-button:hover {
  background: var(--lightest-blue-bg);
}

.social-button {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.5rem;
  place-items: center;
  color: white;
  padding: 12px 20px;
  margin: 1rem;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.social-button::before {
  content: '';
  display: inline-block;
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
}

.github-button {
  background: var(--github-gray);
}

.github-button::before {
  background-image: url(images/github-icon.svg);
}

.discord-button {
  background: var(--discord-blue);
}

.discord-button::before {
  background-image: url(images/discord-icon.svg);
}

.mail-button {
  background: #21ab9d;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(33, 171, 157, 0.3);
}

.mail-button::before {
  background-image: url(images/mail-icon.svg);
}

/* Remove hover effect */
.mail-button:hover {
  background: #21ab9d;
}

.demo-button {
  background: #21ab9d;
}

.demo-button::before {
  display: none;
}

.demo-button:hover {
  background: #177c72;
}

.browse-all {
  margin: 1.5rem 0;
  color: var(--text-blue);
  padding: 0.5rem 0;
  border-radius: 2em;
  display: inline-block;
  transition: background-color 200ms ease-in-out, padding 200ms ease-in-out;
}

.browse-all:hover {
  padding: 0.5rem 1rem;
  background: var(--lightest-blue-bg);
}

@media (max-width: 800px) {
  .footer-links {
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
  }
}

/**
 ----------------------
 6. Index page
 ----------------------
 */
.index {
  padding-top: 0;
}

.index section {
  display: flex;
  flex-direction: column;
  margin-bottom: 2rem;
}

.section-header,
.about-page h1 {
  display: block;
  padding: 0 0 2rem 0;
  font-size: xx-large;
  color: #21ab9d;
}

.blog-header {
  display: block;
  padding: 0;
  font-size: xx-large;
  color: var(--dark-green);
}

.section-header:after,
.about-page h1:after,
.all-tags h1:after {
  content: '';
  margin-top: 0.2em;
  display: block;
  width: 15%;
  margin-right: -100%;
  border-top: 4px solid #177c72;
}

.section-header h2 {
  font-size: xx-large;
}

.top-close {
  padding-top: 0;
}

.pad-top {
  padding-top: 2rem;
}

.index-header {
  text-align: center;
}

.index-header h1 {
  font-size: xxx-large;
  margin-bottom: 1rem;
}

.colorized-text {
  background-color: #21ab9d;
  color: white;
  padding: 0.5em 3em;
}

.name {
  color: var(--text-primary);
  line-height: 1.5em;
  font-size: large;
  color: #21ab9d;
  font-weight: bold;
}

.colorized-margin {
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
}

@media (max-width: 700px) {
  header .wrapper {
    padding-bottom: 0;
  }
}

.index div.description {
  margin-bottom: 30px;
}
.index div.description h3 {
  margin-bottom: 10px;
}

.pill-button {
  display: inline-block;
  color: #21ab9d !important;
  background: transparent;
  font-weight: bold;
  font-size: medium;
  margin: 1rem auto;
  padding: 0.8rem 2rem;
  border-radius: 2em;
  border: 2px solid #21ab9d;
  transition: all 200ms ease-in-out;
  cursor: pointer;
  text-decoration: none;
}

.pill-button:hover {
  background: #21ab9d;
  color: white !important;
}

.index-about-me p,
h3 {
  line-height: 1.5em;
}

.index-about-me > *:not(:last-child) {
  margin-bottom: 2rem;
}

.index-about-me img {
  width: 180px;
  height: 180px;
}

.about-index, .about-index-author {
  display: grid;
  place-items: center;
  gap: 2rem;
}

.about-index-author {
  gap: 1rem;
}

.item-list.index-about-me .about-index-author {
  gap: 0rem;
}

.author-description {
  margin-top: 10px;
  font-size: 14px;
  text-align: center;
}

@media (min-width: 700px) {
  .about-index {
    grid-template-columns: 220px 1fr;
  }
}

@media (max-width: 0px) {
  .about-index-author {
    grid-template-columns: 220px 1fr;
  }
}

.info p:first-child {
  margin-top: 0;
}

.about-index .info p:not(:last-child),
.about-index-author .info p:not(:last-child) {
  margin-bottom: 1.2rem;
}

.about-description {
  max-width: var(--max-p-width);
  align-self: center;
}

.about-description *:not(:last-child) {
  margin-bottom: 1.2rem;
}

.text-link {
  color: var(--text-blue);
  font-weight: bold;
  transition: color 200ms ease-in-out;
}

.text-link:hover {
  color: var(--text-blue-hover);
}

/**
----------------------
7. Posts Page
----------------------
*/

/* Style taken from Youtube page */
.youtube-button {
  display: inline-block;
  color: white;
  background: var(--youtube-red);
  border-radius: 2px;
  margin: 1rem;
  padding: 10px 16px;
  text-decoration: none;
  text-align: center;
  transition: background-color 200ms ease-in-out;
}

.youtube-button:hover {
  background: var(--youtube-red-hover);
  color: white;
}

.youtube-icon {
  display: grid;
  grid-template-columns: auto 1fr;
  place-items: center;
  gap: 0.5rem;
}

.youtube-icon::before {
  content: '';
  display: inline-block;
  width: 20px;
  height: 20px;
  background-image: url(images/youtube-brands.svg);
  fill: white;
  background-repeat: no-repeat;
}

@media (max-width: 700px) {
  .youtube-button {
    display: block;
    margin: 1rem;
  }

  .youtube-icon {
    display: grid;
    margin: 1rem;
  }
}

.description p {
  line-height: 1.5rem;
  margin-bottom: 0.5rem;
}

/**
 ----------------------
 7. Post Page
 ----------------------
*/

.page-content {
  margin: 0 0 2rem 0;
}

.page-content.m-top {
  margin-top: 1rem;
}

.page-content li {
  list-style-type: disc;
  list-style-position: inside;
}

.page-content li:not(:last-child) {
  margin-bottom: 0.5rem;
}

.post-date {
  display: inline-block;
  margin-bottom: 1.5rem;
  font-size: large;
  color: var(--text-primary);
  font-style: italic;
}

article .video-player {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 0;
  height: 0;
  overflow: hidden;
}
article .video-player iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

article img {
  margin-top: 20px;
  width: 100%;
}

.actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 2rem 1rem;
  place-items: center;
}

.actions .youtube-button {
  display: grid;
  grid-template-columns: auto 1fr;
  place-items: center;
  gap: 0.5rem;
}

.actions .youtube-button::before {
  content: '';
  display: inline-block;
  width: 20px;
  height: 20px;
  background-image: url(images/youtube-brands.svg);
  fill: white;
  background-repeat: no-repeat;
}

.twitter-button {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.5rem;
  place-items: center;
  color: white;
  padding: 10px 16px;
  background: var(--twitter-blue);
  margin: 1rem;
  border-radius: 2px;
  transition: background-color 200ms ease-in-out;
}

.twitter-button::before {
  content: '';
  display: inline-block;
  width: 200px;
  height: 200px;
  background-image: url(images/star.svg);
  fill: white;
  background-repeat: no-repeat;
}

.twitter-button:hover {
  background: var(--twitter-blue-hover);
}

.back {
  display: inline-flex;
  place-items: center;
  gap: 0.5rem;
  color: var(--dark-green);
  padding: 0.5rem 0;
  border-radius: 2rem;
  transition: background-color 200ms ease-in-out, padding 200ms ease-in-out;
}

.back:hover {
  padding: 0.5rem;
  background: rgba(33, 171, 157, 0.1);
}

.back::before {
  content: '';
  width: 25px;
  height: 25px;
  display: inline-block;
  background-image: url(images/back-button.svg);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  background-color: currentColor;
  -webkit-mask-image: url(images/back-button.svg);
  mask-image: url(images/back-button.svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

@media (max-width: 700px) {
  .back {
    padding: 0.5rem 0;
    border-radius: 0;
  }
}

/**
 ----------------------
 Article cards
 ----------------------
 */

.item-list.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-top: 2rem;
  margin-bottom: 2rem;
}
/*
.item-list > li {
  margin-top: 2rem;
} */

.post-thumb {
  display: block;
  width: 100%;
  height: 220px;
  border-radius: var(--image-border-radius);
  object-fit: cover;
}

.post-thumb.volcanic-thumb {
  object-position: 5% center;
}

.post-card > ul {
  padding: 1.5rem 0.5rem 1rem 0.5rem;
}

.post-card .post-thumb {
  width: 100%;
}

.course-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin: 2rem 0;
}

.post-link {
  display: inline-block;
  padding: 0rem 0.5rem 1rem 0.5rem;
}

.post-link h1 {
  color: #177c72;
  font-size: x-large;
  margin-bottom: 1em;
}

.post-link h3 {
  color: #177c72;
  font-size: large;
  margin-top: 0.5em;
}

.post-link p {
  color: var(--text-primary);
  font-size: medium;
  font-weight: normal;
}

.date {
  color: var(--text-primary);
}

@media (max-width: 800px) {
  .item-list.grid {
    grid-template-columns: 1fr;
  }

  .course-card {
    grid-template-columns: 1fr;
    gap: 0.25rem;
    margin: 1rem 0 0 0;
  }
}

/**
  ----------------------
  Tags
  ----------------------
*/
.all-tags h1 {
  color: #177c72;
  font-size: x-large;
  margin-bottom: 1em;
}

.tags {
  font-size: large;
  padding: 1em 0em;
}

.tags li:not(:last-child) {
  margin-right: 0.5em;
}

.tags li,
.all-tags .tag {
  display: inline-block;
  font-size: .9em;
  border-radius: var(--tags-border-radius);
  cursor: pointer;
  transition: background-color 200ms ease-in-out;
  margin-bottom: 0.5em;
}

.tags li {
  padding: 0;
}

.tags li a {
  display: inline-block;
  padding: 0.75em;
  width: 100%;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

.all-tags .tag {
  padding: 0.75em;
}

.blog-card .tags li
{
  font-size: 0.75em;
}

.variant-a {
  background: hsl(240, 100%, 90%);
}

.variant-a:hover {
  background: hsl(240, 100%, 80%);
}

.variant-a,
.variant-a a {
  color: hsl(240, 100%, 30%);
}

.variant-b {
  background: hsl(0, 100%, 90%);
}

.variant-b:hover {
  background: hsl(0, 100%, 80%);
}

.variant-b,
.variant-b a {
  color: hsl(0, 100%, 30%);
}

.variant-c {
  background: hsl(305, 100%, 90%);
}

.variant-c:hover {
  background: hsl(305, 100%, 80%);
}

.variant-c,
.variant-c a {
  color: hsl(305, 100%, 30%);
}

.variant-d {
  background-color: hsl(181, 100%, 90%);
}

.variant-d:hover {
  background-color: hsl(181, 100%, 80%);
}

.variant-d,
.variant-d a {
  color: hsl(181, 100%, 20%);
}

.variant-e {
  background-color: hsl(39, 100%, 90%);
}

.variant-e:hover {
  background-color: hsl(39, 100%, 80%);
}

.variant-e,
.variant-e a {
  color: hsl(39, 100%, 25%);
}

.variant-f {
  background-color: hsl(27, 100%, 90%);
}

.variant-f:hover {
  background-color: hsl(27, 100%, 80%);
}

.variant-f,
.variant-f a {
  color: hsl(27, 100%, 30%);
}

.variant-g {
  background-color: hsl(120, 40%, 90%);
}

.variant-g:hover {
  background-color: hsl(120, 40%, 80%);
}

.variant-g,
.variant-g a {
  color: hsl(120, 40%, 30%);
}


/**
 ----------------------
 Blog Card
 ----------------------
 */


.blog-card {
  margin-top: 20px;
  background-color: #ebebeb;
  padding: 12px 34px;
  border-radius: 15px;
  overflow: hidden;
}

.blog-card h1 {
  font-size: 1.5em;
  margin-top: 32px;
  margin-bottom: 0px;
  max-width: inherit;
}

.blog-card h1 a:hover {
  color: var(--twitter-blue-hover);
}

.blog-card .metadata ul li {
  float:left;
}

.blog-card .tags {
  padding-bottom: 8px;
}

.blog-card .metadata .date {
  margin: 0px 20px;
  font-weight: 600;
}

.blog-card p {
  margin-top: 20px;
}

.blog-card-logo-link {
  display: grid;
  grid-template-columns: 50px 1fr;
  align-items: center;
  gap: 1rem;
  margin: 2rem 0;
}

.blog-card-logo-link img {
  border-radius: 50%;
  border: 2px var(--light-blue-bg) solid;
  margin-top: 0;
}

.blog-card-logo-link span {
  color: var(--text-primary);
  font-weight: bold;
}


/**
 ----------------------
 Sponsor
 ----------------------
 */

.affiliate-container {
  display: inline-block;
  gap: 2rem;
  padding: 2rem;
  margin-bottom: 2rem;
  position: relative;
  border: 2px solid var(--affiliate-purple);
  border-radius: var(--tags-border-radius);
}

.new-project {
  display: grid;
  gap: 2rem;
  padding: 2rem;
  position: relative;
  border: 2px solid #21ab9d;
  border-radius: var(--tags-border-radius);
}

.new-red {
  display: grid;
  gap: 2rem;
  padding: 2rem;
  position: relative;
  border: 2px solid #f96653;
  border-radius: var(--tags-border-radius);
}

@media (min-width: 700px) {
  .new-red {
    grid-template-columns: 1fr 2fr;
  }
}

.new-red img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--image-border-radius);
}

@media (min-width: 700px) {
  .new-project {
    grid-template-columns: 1fr 2fr;
  }
}

.affiliate-container::before {
  content: 'IDE Extensions';
  position: absolute;
  top: -11px;
  left: 20px;
  line-height: 20px;
  padding: 0 3px;
  background-color: var(--background-color);
  color: var(--text-blue);
  font-weight: bold;
  text-transform: uppercase;
  font-size: 12px;
}

.new-project::before {
  content: 'AWARD';
  position: absolute;
  top: -11px;
  left: 20px;
  line-height: 20px;
  padding: 0 3px;
  background-color: var(--background-color);
  color: #177c72;
  font-weight: bold;
  text-transform: uppercase;
  font-size: 12px;
}

.new-red::before {
  content: 'CURRENTLY BUILDING';
  position: absolute;
  top: -11px;
  left: 20px;
  line-height: 20px;
  padding: 0 3px;
  background-color: var(--background-color);
  color: #7c2917;
  font-weight: bold;
  text-transform: uppercase;
  font-size: 12px;
}

.new-project img {
  width: 100%;
  height: 100%;
  border-radius: var(--image-border-radius);
  object-fit: cover;
}

.affiliate-container h2,
.new-project h2 {
  color: #177c72;
  margin-bottom: 1em;
}

.new-red h2 {
  color: #7c2617;
  margin-bottom: 1em;
}

.new-project p {
  color: var(--text-primary);
  line-height: 1.5em;
  margin-bottom: 2em;
}

.new-red p {
  color: var(--text-primary);
  line-height: 1.5em;
  margin-bottom: 2em;
}

.affiliate-container p {
  color: var(--text-primary);
  line-height: 1.5em;
  margin-top: 1.5rem;
}

.affiliate-container a {
  font-size: 1.05em;
  font-weight: bold;
}

.affiliate-note {
  font-size: 13.5px;
}

.sponsor .footer {
  line-height: 1.7em;
}

.sponsor.compact {
  margin-top: 30px;
  padding-top: 12px;
  padding-bottom: 4px;
  line-height: 1.5em;
}

.sponsor-div {
  overflow: hidden;
}

.sponsor-box {
  display: inline-block;
  padding: 1rem 4rem 2rem 4rem;
  margin: 1rem;
  position: relative;
  border: 2px solid var(--light-blue-bg);
  border-radius: var(--tags-border-radius);
}

.sponsor-box::before {
  content: 'Sponsor';
  position: absolute;
  top: -11px;
  left: 20px;
  line-height: 20px;
  padding: 0 3px;
  background-color: var(--background-color);
  color: var(--text-blue);
  font-weight: bold;
  text-transform: uppercase;
  font-size: 12px;
}

.sponsor-box > *:not(:last-child) {
  margin-bottom: 1.5rem;
}

.sponsor-box * {
  max-width: var(--max-p-width);
}

.sponsor-box a {
  display: inline-block;
  color: var(--text-blue);
  background: var(--lightest-blue-bg);
  font-weight: bold;
  margin: 0rem auto;
  padding: 1rem 2rem;
  border-radius: 2em;
  border: none;
  transition: background-color 200ms ease-in-out;
}

.sponsor-box a:hover {
  background: var(--light-blue-bg);
}



/**
 ----------------------
 About page
 ----------------------
 */
.about-page ul {
  display: grid;
  grid-template-columns: 1fr 1fr;
  place-items: center;
  list-style-type: none;
  margin: 2rem 0;
}




blockquote p {
  position: relative;
  background-color: #fff;
  box-shadow: -1px 5px 3px rgba(0, 30, 84, 0.12);
  padding: 10px 10px 10px 15px;
  border-radius: 7px;
}

/**
 ----------------------
 Newsletter
 ----------------------
*/
.revue-form-wrapper {
  max-width: 502px;
  padding: 2rem 4rem;
  margin: 2rem 0;
  position: relative;
  border: 2px solid var(--light-blue-bg);
  border-radius: var(--tags-border-radius);
}

.revue-form-wrapper::before {
  content: 'Subscribe';
  position: absolute;
  top: -11px;
  left: 20px;
  line-height: 20px;
  padding: 0 3px;
  background-color: var(--background-color);
  color: var(--text-blue);
  font-weight: bold;
  text-transform: uppercase;
  font-size: 12px;
}

.revue-form-wrapper h3 {
  font-size: x-large;
  margin-top: 0;
}

.revue-form-wrapper a {
  color: var(--text-blue)
}

.revue-form-wrapper li {
  list-style-type: disc;
  list-style-position: inside;
  margin: 1rem 0;
  color: var(--text-blue);
  font-weight: bold;
}

.revue-form-footer {
  font-size: 13px;
}

#member_email {
  margin-top: 0.5em;
  padding: 1em 1.5em;
  border-radius: var(--tags-border-radius);
  border: 2px solid var(--lightest-blue-bg);
  width: 100%;
}

.newsletter img {
  border-radius: var(--image-border-radius);
  margin: 2rem;
  max-width: 100%;
}

@media (max-width: 700px) {
  .revue-form-wrapper {
    padding: 1rem;
  }
}

/**
 ----------------------
 Legal and privacy
 ----------------------
*/
.privacy-page li {
  list-style: disc inside none;
  margin: 1rem 0;
}

.privacy-page li a {
  font-weight: bold;
}

.header-container .pill-button {
  display: inline-block;
}

/* Code */
code {
  font-family: 'Code', monospace;
}
article p code,
article li code {
  background-color: #a1ffd6;
  display: inline-block;
  padding: 0 5px;
  border-radius: 8px;
  font-size: 0.9em;
  margin: 1px;
}

/* Dark Mode Code Block Override */
html.dark-mode article p code,
html.dark-mode article li code {
    background-color: rgba(79, 255, 211, 0.15);
    border: 1px solid rgba(79, 255, 211, 0.3);
    color: #e6edf3;
}

/* Special Override for the "WEBSITE" button inside code tag */
html.dark-mode article p code a.standard-link {
    color: #fbbf24 !important; /* Bright Amber/Yellow to contrast with Purple/Pink */
    text-shadow: 0 0 8px rgba(251, 191, 36, 0.5);
    font-weight: 900;
    letter-spacing: 1px;
}

html.dark-mode article p code a.standard-link:hover {
    color: #fcd34d !important;
    text-shadow: 0 0 12px rgba(251, 191, 36, 0.7);
}

article p code.inline,
article li code.inline {
  display: inline;
  background-color: inherit;
  padding: 0;
}

pre {
  margin-top: 1.5rem;
  display: block;
  width: 100%;
  max-width: var(--max-code-width);
  border-radius: var(--code-border-radius);
  overflow: hidden;
}
pre code {
  display: block;
  background-color: #282a36;
  border-radius: 0;
  padding: 1rem;
  color: #a9bcbc;
  line-height: 1.4em;
  font-size: 0.95em;
  overflow-x: auto;
  white-space: pre;
  -webkit-overflow-scrolling: touch;
}

pre code .s-keyword {
  color: #e83b8e;
}
pre code .s-type {
  color: #8281ca;
}
pre code .s-call {
  color: #348fe5;
}
pre code .s-property {
  color: #21ab9d;
}
pre code .s-number {
  color: #db6f57;
}
pre code .s-string {
  color: #fa641e;
}
pre code .s-comment {
  color: #6b8a94;
}
pre code .s-dotAccess {
  color: #92b300;
}
pre code .s-preprocessing {
  color: #b68a00;
}

/* Code previews */
.code-preview a {
  right: -10px;
}
.code-preview img {
  max-width: 159px;
}
.code-preview {
  position: relative;
  z-index: 1;
}
.code-preview a {
  display: block;
  font-family: 'Main';
  font-size: 0.8em;
  position: absolute;
  top: 30px;
  right: 10px;
  text-transform: uppercase;
  text-decoration: none;
  color: #ddd;
  padding: 2px 5px;
  border-radius: 5px;
  background: #000;
  cursor: default;
}
.code-preview img {
  display: none;
  position: absolute;
  top: 5px;
  right: 0;
  max-width: 212px;
  border: 1px solid #0a0a0a;
  border-radius: 10px;
}
.code-preview a:hover img {
  display: block;
} /* Hack for Firefox to render Source Code Pro */
@supports (-moz-appearance: none) {
  code {
    font-family: monospace;
  }
  pre code .highlight {
    padding-bottom: 1px;
  }
}

/* About pages */
.newsletter .button,
.index .button {
  max-width: 30%;
  float: left;
  margin: 0 20px 0 0;
  border-radius: 10px;
  width: 230px;
}

/* Responsive */
@media (max-width: 700px) {
  .wrapper {
    padding-left: 20px;
    padding-right: 20px;
  }

  .index div.index-description h1 {
    font-size: 50px;
  }

  .post-content {
    margin-top: 20px;
    margin-left: 0px;
  }
}

@media (max-width: 600px) {
  .item-list.grid {
    display: block;
  }
  .item-list.grid > li {
    margin-bottom: 20px;
  }
  .item-list.grid > li:last-child {
    margin-bottom: 0;
  }
  .index .latest p {
    display: none;
  }
  .theme-select > span {
    display: block;
    margin-bottom: 7px;
  }
  .subscribe .schedule {
    display: block;
    margin-bottom: 7px;
  }
  .subscribe .schedule::after {
    content: none;
  }

  .theme-select {
    display: block;
    border-radius: 15px;
    padding-bottom: 15px;
  }
  .tag-items > * {
    float: none;
  }

  .sponsor.compact img {
    float: none;
  }

  .blog-card .metadata ul li {
    float: none;
  }

  .blog-card .metadata .date {
    margin: 0px;
    font-size: 0.85em;
  }
}

/*
-----------
Highlights
-----------
*/
.highlight {
  background-color: #282a36;
}
.highlight pre {
  background-color: #282a36;
}
.highlight span {
  background-color: #282a36;
}
.highlight .hll { background-color: #f1fa8c }
.highlight  { background: #282a36; color: #f8f8f2 }
.highlight .c { color: #939dbe } /* Comment */
.highlight .err { color: #f8f8f2 } /* Error */
.highlight .g { color: #f8f8f2 } /* Generic */
.highlight .k { color: #ff79c6 } /* Keyword */
.highlight .l { color: #f8f8f2 } /* Literal */
.highlight .n { color: #f8f8f2 } /* Name */
.highlight .o { color: #ff79c6 } /* Operator */
.highlight .x { color: #f8f8f2 } /* Other */
.highlight .p { color: #f8f8f2 } /* Punctuation */
.highlight .ch { color: #939dbe } /* Comment.Hashbang */
.highlight .cm { color: #939dbe } /* Comment.Multiline */
.highlight .cp { color: #ff79c6 } /* Comment.Preproc */
.highlight .cpf { color: #939dbe } /* Comment.PreprocFile */
.highlight .c1 { color: #939dbe } /* Comment.Single */
.highlight .cs { color: #939dbe } /* Comment.Special */
.highlight .gd { color: #8b080b } /* Generic.Deleted */
.highlight .ge { color: #f8f8f2; text-decoration: underline } /* Generic.Emph */
.highlight .gr { color: #f8f8f2 } /* Generic.Error */
.highlight .gh { color: #f8f8f2; font-weight: bold } /* Generic.Heading */
.highlight .gi { color: #f8f8f2; font-weight: bold } /* Generic.Inserted */
.highlight .go { color: #f8f8f2 } /* Generic.Output */
.highlight .gp { color: #f8f8f2 } /* Generic.Prompt */
.highlight .gs { color: #f8f8f2 } /* Generic.Strong */
.highlight .gu { color: #f8f8f2; font-weight: bold } /* Generic.Subheading */
.highlight .gt { color: #f8f8f2 } /* Generic.Traceback */
.highlight .kc { color: #ff79c6 } /* Keyword.Constant */
.highlight .kd { color: #8be9fd } /* Keyword.Declaration */
.highlight .kn { color: #ff79c6 } /* Keyword.Namespace */
.highlight .kp { color: #ff79c6 } /* Keyword.Pseudo */
.highlight .kr { color: #ff79c6 } /* Keyword.Reserved */
.highlight .kt { color: #8be9fd } /* Keyword.Type */
.highlight .ld { color: #f8f8f2 } /* Literal.Date */
.highlight .m { color: #bd93f9 } /* Literal.Number */
.highlight .s { color: #f1fa8c } /* Literal.String */
.highlight .na { color: #50fa7b } /* Name.Attribute */
.highlight .nb { color: #8be9fd } /* Name.Builtin */
.highlight .nc { color: #50fa7b } /* Name.Class */
.highlight .no { color: #f8f8f2 } /* Name.Constant */
.highlight .nd { color: #f8f8f2 } /* Name.Decorator */
.highlight .ni { color: #f8f8f2 } /* Name.Entity */
.highlight .ne { color: #f8f8f2 } /* Name.Exception */
.highlight .nf { color: #50fa7b } /* Name.Function */
.highlight .nl { color: #8be9fd } /* Name.Label */
.highlight .nn { color: #f8f8f2 } /* Name.Namespace */
.highlight .nx { color: #f8f8f2 } /* Name.Other */
.highlight .py { color: #f8f8f2 } /* Name.Property */
.highlight .nt { color: #ff79c6 } /* Name.Tag */
.highlight .nv { color: #8be9fd } /* Name.Variable */
.highlight .ow { color: #ff79c6 } /* Operator.Word */
.highlight .w { color: #f8f8f2 } /* Text.Whitespace */
.highlight .mb { color: #bd93f9 } /* Literal.Number.Bin */
.highlight .mf { color: #bd93f9 } /* Literal.Number.Float */
.highlight .mh { color: #bd93f9 } /* Literal.Number.Hex */
.highlight .mi { color: #bd93f9 } /* Literal.Number.Integer */
.highlight .mo { color: #bd93f9 } /* Literal.Number.Oct */
.highlight .sa { color: #f1fa8c } /* Literal.String.Affix */
.highlight .sb { color: #f1fa8c } /* Literal.String.Backtick */
.highlight .sc { color: #f1fa8c } /* Literal.String.Char */
.highlight .dl { color: #f1fa8c } /* Literal.String.Delimiter */
.highlight .sd { color: #f1fa8c } /* Literal.String.Doc */
.highlight .s2 { color: #f1fa8c } /* Literal.String.Double */
.highlight .se { color: #f1fa8c } /* Literal.String.Escape */
.highlight .sh { color: #f1fa8c } /* Literal.String.Heredoc */
.highlight .si { color: #f1fa8c } /* Literal.String.Interpol */
.highlight .sx { color: #f1fa8c } /* Literal.String.Other */
.highlight .sr { color: #f1fa8c } /* Literal.String.Regex */
.highlight .s1 { color: #f1fa8c } /* Literal.String.Single */
.highlight .ss { color: #f1fa8c } /* Literal.String.Symbol */
.highlight .bp { color: #f8f8f2 } /* Name.Builtin.Pseudo */
.highlight .fm { color: #50fa7b } /* Name.Function.Magic */
.highlight .vc { color: #8be9fd } /* Name.Variable.Class */
.highlight .vg { color: #8be9fd } /* Name.Variable.Global */
.highlight .vi { color: #8be9fd } /* Name.Variable.Instance */
.highlight .vm { color: #8be9fd } /* Name.Variable.Magic */
.highlight .il { color: #bd93f9 } /* Literal.Number.Integer.Long */

/**
 ----------------------
 Button Container Responsive Styles
 ----------------------
 */
.button-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.2rem;
  flex-wrap: nowrap;
}

.button-container .social-button {
  margin: 0;
  flex: 1;
  max-width: 180px;
  font-size: 0.9rem;
  padding: 0.7rem 1.5rem;
}

@media (max-width: 480px) {
  .button-container .social-button {
    padding: 0.6rem 1.2rem;
    font-size: 0.85rem;
    max-width: 140px;
  }
}

@media (max-width: 360px) {
  .button-container .social-button {
    padding: 0.5rem 1rem;
    font-size: 0.8rem;
    max-width: 120px;
  }
}

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

/* Vertical Line (Dashed) */
.timeline::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 19px; /* Adjusted to perfectly center on 20px axis */
  width: 0;
  border-left: 2px dashed #ccc;
}

/* Timeline Item */
.timeline-item {
  position: relative;
  padding: 0 0 50px 35px;
}

/* Item Dot */
.timeline-item::after {
  content: '';
  position: absolute;
  left: -9px; /* Center at 0px relative to item (20px relative to timeline) */
  top: 5px;
  width: 12px;
  height: 12px;
  background: #fff;
  border: 3px solid #177c72;
  border-radius: 50%;
  z-index: 1;
  transition: all 0.3s ease;
  box-shadow: 0 0 0 4px #fff; /* White halo to separate from dashed line */
}

/* Hover Effects */
.timeline-item:hover::after {
  background-color: #177c72;
  transform: scale(1.1);
  box-shadow: 0 0 0 6px rgba(23, 124, 114, 0.1);
}

.timeline-content {
  position: relative;
  transition: transform 0.3s ease;
}

.timeline-item:hover .timeline-content {
  transform: translateX(5px);
}

.entry-date {
  font-size: 0.85rem;
  color: #177c72;
  margin-bottom: 4px;
  display: block;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.entry-title {
  font-size: 1.1rem;
  color: #2c3e50;
  margin: 0 0 6px 0;
  font-weight: 700;
  line-height: 1.3;
}

.entry-subtext {
  font-size: 0.95rem;
  color: #555;
  margin: 0;
  font-weight: 400;
  font-style: italic;
}

/* Resume Item Specifics */
.resume-item {
  padding-bottom: 0;
  margin-top: 10px;
}

.resume-item::after {
  background: #177c72;
  border-color: #177c72;
  width: 14px;
  height: 14px;
  left: -10px; /* Center at 0px relative to item (20px relative to timeline) */
  box-shadow: 0 0 0 4px #fff;
}

.resume-item:hover::after {
  background-color: #21ab9d;
  box-shadow: 0 0 0 6px rgba(33, 171, 157, 0.2);
}

.resume-link {
  display: inline-flex;
  align-items: center;
  color: #177c72;
  font-weight: 700;
  text-decoration: none;
  font-size: 1rem;
  padding: 8px 20px;
  border: 2px solid #177c72;
  border-radius: 50px;
  transition: all 0.3s ease;
  background: #fff;
}

.resume-link:hover {
  background-color: #177c72;
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(23, 124, 114, 0.2);
}

/**
 ----------------------
 Resume Section & Modal
 ----------------------
 */
/* Modal Styles */
.modal-overlay {
 display: none;
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background-color: rgba(0, 0, 0, 0.5);
 z-index: 1000;
 justify-content: center;
 align-items: center;
 opacity: 0;
 transition: opacity 0.3s ease;
}

.modal-overlay.active {
 display: flex;
 opacity: 1;
}

.modal {
 background-color: white;
 padding: 2rem;
 border-radius: 12px;
 box-shadow: 0 10px 25px rgba(0,0,0,0.2);
 max-width: 400px;
 width: 90%;
 text-align: center;
 transform: scale(0.9);
 transition: transform 0.3s ease;
}

.modal-overlay.active .modal {
 transform: scale(1);
}

.modal h3 {
 color: #177c72;
 margin-top: 0;
 margin-bottom: 1rem;
}

.modal p {
 margin-bottom: 1.5rem;
 color: #555;
}

.modal-buttons {
 display: flex;
 justify-content: center;
 gap: 1rem;
}

.modal-btn {
 padding: 10px 20px;
 border-radius: 6px;
 cursor: pointer;
 font-weight: bold;
 border: none;
 transition: background-color 0.2s;
 text-decoration: none;
 font-size: 0.9rem;
}

.modal-btn.cancel {
 background-color: #f0f0f0;
 color: #333;
}

.modal-btn.cancel:hover {
 background-color: #e0e0e0;
}

.modal-btn.confirm {
 background-color: #177c72;
 color: white;
}

.modal-btn.confirm:hover {
 background-color: #21ab9d;
}

/* Timeline Entry Details (Hover Reveal) */
.entry-details {
 max-height: 0;
 opacity: 0;
 overflow: hidden;
 transition: max-height 0.4s ease, opacity 0.4s ease, margin-top 0.4s ease;
 font-size: 0.9rem;
 color: #555;
 margin-top: 0;
 line-height: 1.5;
 padding-left: 2px;
 border-left: 2px solid #177c72; /* Accent line for details */
 margin-left: 2px;
 padding-left: 10px;
}

.timeline-item:hover .entry-details {
 max-height: 100px;
 opacity: 1;
 margin-top: 10px;
}


/* Lightbox Styles */
.lightbox {
 display: none;
 position: fixed;
 z-index: 2000;
 left: 0;
 top: 0;
 width: 100%;
 height: 100%;
 overflow: hidden;
 background-color: rgba(0, 0, 0, 0.9);
 backdrop-filter: blur(5px);
 justify-content: center;
 align-items: center;
}

.lightbox-content {
 display: block;
 width: auto;
 max-width: 90%;
 max-height: 90vh;
 object-fit: contain;
 animation-name: zoom;
 animation-duration: 0.4s;
 border-radius: 8px;
 box-shadow: 0 0 20px rgba(0,0,0,0.5);
}

@keyframes zoom {
 from {transform:scale(0.8); opacity: 0;}
 to {transform:scale(1); opacity: 1;}
}

.close-lightbox {
 position: absolute;
 top: 20px;
 right: 35px;
 color: #f1f1f1;
 font-size: 40px;
 font-weight: bold;
 transition: 0.3s;
 cursor: pointer;
 z-index: 2001;
}

.close-lightbox:hover,
.close-lightbox:focus {
 color: #177c72;
 text-decoration: none;
 cursor: pointer;
}


/* CTA Sidebar */
.cta-sidebar {
 float: right;
 width: 300px;
 margin: 0 0 1.5rem 2rem;
 background: linear-gradient(135deg, #fafffe 0%, #f8fffe 100%);
 padding: 1.5rem;
 border-radius: 16px;
 border: 2px solid #177c72;
 box-shadow: 0 4px 12px rgba(23, 124, 114, 0.1);
 text-align: center;
 clear: right;
}

.cta-sidebar h3 {
 color: #177c72;
 margin: 0 0 0.5rem 0;
 font-size: 1.3rem;
 font-weight: 600;
 letter-spacing: -0.02em;
}

.cta-sidebar p {
 margin: 0 0 1rem 0;
 color: #475569;
 font-size: 0.95rem;
 line-height: 1.4;
}

.cta-sidebar .button-container {
 flex-direction: column;
 gap: 0.8rem;
}

.cta-sidebar .social-button {
 width: 100%;
 max-width: none;
 margin: 0;
 justify-content: center;
}

@media (max-width: 768px) {
 .cta-sidebar {
 float: none;
 width: 100%;
 margin: 2rem 0;
 }
}

/* Full Width Hero Image */
.hero-image-post {
 width: 100%;
 height: auto;
 border-radius: 12px;
 box-shadow: 0 4px 20px rgba(0,0,0,0.1);
 margin: 1.5rem 0;
 border: 1px solid #eee;
}

/* Project Actions Bar */
.project-actions-bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 2rem 0 3rem 0;
  gap: 1rem;
}

.project-actions-bar .cta-text {
  margin-top: 0.5rem;
  color: #64748b;
  font-size: 0.95rem;
  font-weight: 500;
}

.project-actions-bar .button-container {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  width: 100%;
}

.project-actions-bar .social-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 32px;
  border-radius: 50px;
  font-weight: 600;
  font-size: 1rem;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: none;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.project-actions-bar .social-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.project-actions-bar .demo-button {
  background-color: #177c72;
  color: white;
}

.project-actions-bar .demo-button:hover {
  background-color: #136860;
  color: white;
}

.project-actions-bar .github-button {
  background-color: #24292f;
  color: white;
}

.project-actions-bar .github-button:hover {
  background-color: #000;
  color: white;
}


/* 
 ----------------------
 Dark Mode Support
 ----------------------
 Uses OS/browser preference via @media (prefers-color-scheme: dark).
 Manual toggle overrides via html.dark-mode / html.light-mode classes.
 */

/* OS/browser dark preference — applies instantly, no JS needed */
@media (prefers-color-scheme: dark) {
  :root:not(.light-mode) {
    --background-color: #0d1117;
    --light-blue-bg: #1e293b;
    --lightest-blue-bg: #0f172a;
    --text-blue: #60a5fa;
    --text-primary: #e6edf3;
    --light-green: #4fffd3;
    --dark-green: #2dd4bf;
    --github-gray: #f0f0f0;
    --github-gray-hover: #ffffff;
    color-scheme: dark;
    background-color: #0d1117;
    color: #e6edf3;
  }
}

/* Manual dark mode override (on a light OS) */
html.dark-mode {
  --background-color: #0d1117;
  --light-blue-bg: #1e293b;
  --lightest-blue-bg: #0f172a;
  --text-blue: #60a5fa;
  --text-primary: #e6edf3;
  --light-green: #4fffd3;
  --dark-green: #2dd4bf;
  --github-gray: #f0f0f0;
  --github-gray-hover: #ffffff;
  color-scheme: dark;
  background-color: #0d1117;
  color: #e6edf3;
}

/* Manual light mode override (on a dark OS) */
html.light-mode {
  --background-color: hsl(0, 0%, 100%);
  --light-blue-bg: hsl(208, 51%, 70%);
  --lightest-blue-bg: hsl(208, 51%, 90%);
  --text-blue: hsl(219, 45%, 39%);
  --text-primary: hsl(0, 0%, 0%);
  --light-green: #21ab9d;
  --dark-green: #177c72;
  --github-gray: hsl(0, 0%, 20%);
  --github-gray-hover: hsl(0, 0%, 10%);
  color-scheme: light;
  background-color: hsl(0, 0%, 100%);
  color: hsl(0, 0%, 0%);
}

/* Override hardcoded white backgrounds */
html.dark-mode .timeline-content,
html.dark-mode .modal,
html.dark-mode .project-actions-bar,
html.dark-mode .cta-sidebar,
html.dark-mode blockquote p {
    background-color: #161b22; /* Slightly lighter than bg */
    border-color: #30363d;
    color: #e6edf3;
    box-shadow: none;
}

/* Timeline Content - Uniform Black */
html.dark-mode .timeline-content {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding-left: 0;
}

html.dark-mode .entry-details {
    background-color: transparent !important;
    color: #8b949e !important; /* GitHub dimmed text */
    border-left-color: var(--light-green);
}

html.dark-mode .entry-title,
html.dark-mode .timeline-content h3,
html.dark-mode .timeline-content h4 {
    color: #ffffff !important; /* Bright white */
}

html.dark-mode .entry-subtext {
    color: #d2a8ff !important; /* Light Purple for subtext to pop */
}

html.dark-mode .entry-date {
    color: var(--light-green) !important;
    text-shadow: 0 0 10px rgba(79, 255, 211, 0.3); /* Subtle glow */
}

/* Make Project Actions Bar blend in */
html.dark-mode .project-actions-bar {
    background: transparent;
    border: none;
    box-shadow: none;
    color: #e6edf3;
}

/* Timeline dots */
html.dark-mode .timeline-item::after {
    background-color: #161b22;
    box-shadow: 0 0 0 4px #0d1117; /* Match body background */
}

/* Fix text colors in dark mode */
html.dark-mode h3,
html.dark-mode .timeline-content h3,
html.dark-mode .modal h3,
html.dark-mode .cta-sidebar h3,
html.dark-mode .post-link .description,
html.dark-mode .all-tags h1,
html.dark-mode .section-header,
html.dark-mode .index-header h1,
html.dark-mode .blog-header {
    color: #4fffd3 !important; /* Neon Teal/Green */
    text-shadow: 0 0 10px rgba(79, 255, 211, 0.2);
}

/* Modal Text in Dark Mode */
html.dark-mode .modal p {
    color: #ffffff !important;
    text-shadow: none;
}

/* Special Vibrant Effect for "Latest Upload" (New Project) Title */
html.dark-mode .new-project h2 {
    background: linear-gradient(to right, #4fffd3, #00e5ff);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #4fffd3 !important; /* Fallback */
    filter: drop-shadow(0 0 8px rgba(79, 255, 211, 0.6));
    font-weight: 800;
    letter-spacing: 1px;
}

html.dark-mode .post-link p,
html.dark-mode .new-project p {
    color: #e6edf3 !important;
}

/* Fix Header Background to match Body Gradient */
html.dark-mode header {
    background: transparent !important;
    border-bottom: none !important; /* Removed separator line */
}

/* Standard Link Class & Global Content Links */
.standard-link,
.experience-link,
.content p a:not([class]),
.content li a:not([class]),
.about-index .info p a:not([class]) {
    color: #177c72;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px dashed #177c72;
    transition: all 0.2s ease;
}

.standard-link:hover,
.experience-link:hover,
.content p a:not([class]):hover,
.content li a:not([class]):hover,
.about-index .info p a:not([class]):hover {
    color: #21ab9d;
    border-bottom-style: solid;
    text-decoration: none;
}

html.dark-mode .standard-link,
html.dark-mode .experience-link,
html.dark-mode .content p a:not([class]),
html.dark-mode .content li a:not([class]),
html.dark-mode .about-index .info p a:not([class]) {
    color: #2dd4bf !important;
    border-bottom-color: #2dd4bf;
    text-shadow: none;
}

html.dark-mode .standard-link:hover,
html.dark-mode .experience-link:hover,
html.dark-mode .content p a:not([class]):hover,
html.dark-mode .content li a:not([class]):hover,
html.dark-mode .about-index .info p a:not([class]):hover {
    color: #5eead4 !important;
    border-bottom-style: solid;
    text-shadow: none;
    text-decoration: none;
}

/* Vibrant Blog Header in Dark Mode */
html.dark-mode .blog-header {
    background: linear-gradient(to right, #4fffd3, #00e5ff);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #4fffd3 !important;
    filter: drop-shadow(0 0 8px rgba(79, 255, 211, 0.4));
}

/* Special Vibrant Red Effect for "Latest Upload" (New Red) Title */
html.dark-mode .new-red h2 {
    background: linear-gradient(to right, #ff4d4d, #ff9999);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #ff4d4d !important; /* Fallback */
    filter: drop-shadow(0 0 8px rgba(255, 77, 77, 0.6));
    font-weight: 800;
    letter-spacing: 1px;
}

html.dark-mode .new-red p {
    color: #e6edf3 !important;
}

/* Vibrant Labels for "NEW" and "LATEST UPLOAD" in Dark Mode */
html.dark-mode .new-project::before {
    color: #4fffd3 !important; /* Neon Teal */
    text-shadow: 0 0 5px rgba(79, 255, 211, 0.4);
    background-color: #0d1117 !important; /* Ensure background matches dark theme */
}

html.dark-mode .new-red::before {
    color: #ff4d4d !important; /* Neon Red */
    text-shadow: 0 0 5px rgba(255, 77, 77, 0.4);
    background-color: #0d1117 !important;
}

/* Cool Dark Mode Background Effect - Moved to .bg-layer-dark for smooth transition */
/* html.dark-mode body {
    background-image: ...
} */

/* Dark Mode Image Handling */
html.dark-mode img {
  filter: brightness(0.85) contrast(1.1);
  transition: none;
}

html.dark-mode img:hover {
    filter: brightness(1) contrast(1);
    transform: scale(1.02);
}

/* Specific fix for transparent images/icons if needed */
html.dark-mode .logo, 
html.dark-mode .header-image,
html.dark-mode .header-image-small {
    filter: none; /* Don't dim the avatar/logo */
}

/* Adjust avatar-dark size */

img[src*="avatar-dark.svg"].header-image-small {
    height: 100px;
    width: auto;
}

.index-about-me img[src*="avatar-dark.svg"] {
    height: 190px;
    width: auto;
}

html.dark-mode .timeline-date {
    color: var(--light-green);
}

html.dark-mode .resume-link {
    color: var(--light-green);
    border-color: var(--light-green);
    background-color: transparent;
    box-shadow: 0 0 10px rgba(79, 255, 211, 0.1);
}

html.dark-mode .resume-link:hover {
    background-color: var(--light-green);
    color: #0d1117;
    box-shadow: 0 0 20px rgba(79, 255, 211, 0.4);
}

/* Pill Button Dark Mode */
html.dark-mode .pill-button {
    color: var(--light-green);
    background: rgba(79, 255, 211, 0.1);
    border: 1px solid rgba(79, 255, 211, 0.3);
}
html.dark-mode .pill-button:hover {
    background: rgba(79, 255, 211, 0.2);
    box-shadow: 0 0 15px rgba(79, 255, 211, 0.2);
}

/* GitHub Button Dark Mode (Global) */
html.dark-mode .github-button {
    background-color: transparent !important;
    color: #f0f6fc !important;
    border: 1px solid #30363d !important;
    transition: all 0.3s ease;
}

html.dark-mode .github-button:hover {
    background-color: #21262d !important;
    color: #ffffff !important;
    border-color: #8b949e !important;
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

/* Invert icon color on hover in dark mode */
html.dark-mode .github-button:hover::before {
    filter: brightness(100); /* Keep white */
}

/* Dark Mode Tag Overrides - Vibrant & Neon */
html.dark-mode .variant-a { background: rgba(129, 140, 248, 0.15); color: #818cf8; border: 1px solid rgba(129, 140, 248, 0.3); }
html.dark-mode .variant-a a { color: #818cf8; }
html.dark-mode .variant-a:hover { background: rgba(129, 140, 248, 0.25); box-shadow: 0 0 10px rgba(129, 140, 248, 0.2); }

html.dark-mode .variant-b { background: rgba(248, 113, 113, 0.15); color: #f87171; border: 1px solid rgba(248, 113, 113, 0.3); }
html.dark-mode .variant-b a { color: #f87171; }
html.dark-mode .variant-b:hover { background: rgba(248, 113, 113, 0.25); box-shadow: 0 0 10px rgba(248, 113, 113, 0.2); }

html.dark-mode .variant-c { background: rgba(232, 121, 249, 0.15); color: #e879f9; border: 1px solid rgba(232, 121, 249, 0.3); }
html.dark-mode .variant-c a { color: #e879f9; }
html.dark-mode .variant-c:hover { background: rgba(232, 121, 249, 0.25); box-shadow: 0 0 10px rgba(232, 121, 249, 0.2); }

html.dark-mode .variant-d { background: rgba(45, 212, 191, 0.15); color: #2dd4bf; border: 1px solid rgba(45, 212, 191, 0.3); }
html.dark-mode .variant-d a { color: #2dd4bf; }
html.dark-mode .variant-d:hover { background: rgba(45, 212, 191, 0.25); box-shadow: 0 0 10px rgba(45, 212, 191, 0.2); }

html.dark-mode .variant-e { background: rgba(251, 191, 36, 0.15); color: #fbbf24; border: 1px solid rgba(251, 191, 36, 0.3); }
html.dark-mode .variant-e a { color: #fbbf24; }
html.dark-mode .variant-e:hover { background: rgba(251, 191, 36, 0.25); box-shadow: 0 0 10px rgba(251, 191, 36, 0.2); }

html.dark-mode .variant-f { background: rgba(251, 146, 60, 0.15); color: #fb923c; border: 1px solid rgba(251, 146, 60, 0.3); }
html.dark-mode .variant-f a { color: #fb923c; }
html.dark-mode .variant-f:hover { background: rgba(251, 146, 60, 0.25); box-shadow: 0 0 10px rgba(251, 146, 60, 0.2); }

html.dark-mode .variant-g { background: rgba(74, 222,  128, 0.15); color: #4ade80; border: 1px solid rgba(74, 222, 128, 0.3); }
html.dark-mode .variant-g a { color: #4ade80; }
html.dark-mode .variant-g:hover { background: rgba(74, 222, 128, 0.25); box-shadow: 0 0 10px rgba(74, 222, 128, 0.2); }

/* Navbar Fixes */
html.dark-mode header nav li.selected a {
    color: #ffffff;
    background-color: rgba(45, 212, 191, 0.2);
}

html.dark-mode header nav a:hover {
    background-color: rgba(45, 212, 191, 0.15);
}

/* Nav update for toggle button */
nav ul {
    display: flex !important;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    padding: 0;
    list-style: none;
    flex-wrap: wrap;
}

.theme-toggle-btn {
    background-color: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(23, 124, 114, 0.2);
    cursor: pointer;
    padding: 0;
    border-radius: 50%;
    color: #177c72;
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-left: 15px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}

.theme-toggle-btn svg {
    width: 22px;
    height: 22px;
    transition: transform 0.5s ease;
}

.theme-toggle-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(23, 124, 114, 0.15);
    background-color: rgba(255, 255, 255, 0.8);
}

.theme-toggle-btn:hover svg {
    transform: rotate(15deg);
}

.theme-toggle-btn:active {
    transform: scale(0.95);
}

html.dark-mode .theme-toggle-btn {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.1);
    color: #ffd700; /* Gold for sun */
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.1);
}

html.dark-mode .theme-toggle-btn:hover {
    background-color: rgba(255, 255, 255, 0.15);
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.3);
    color: #ffed4a;
}

html.dark-mode .theme-toggle-btn svg {
    filter: drop-shadow(0 0 5px rgba(255, 215, 0, 0.5));
}


html.dark-mode .header-promotion {
    background: rgba(255, 100, 100, 0.1) !important;
    border-bottom: 1px solid rgba(255, 100, 100, 0.2);
}
html.dark-mode .header-promotion a {
    color: #ffb3b3 !important;
}


/* SDG Goal Colors */
.sdg-link { text-decoration: none; font-weight: bold; }
.goal-3 { color: #2ca02c; }
.goal-4 { color: #d62728; }
.goal-9 { color: #ff7f0e; }
.goal-10 { color: #d43bab; }
.goal-13 { color: #0d613e; }
.goal-16 { color: #1f77b4; }
.goal-17 { color: #033d67; }

/* SDG Goal Colors for Dark Mode (Vibrant/Neon) */
html.dark-mode .goal-3 { color: #4ade80 !important; text-shadow: 0 0 10px rgba(74, 222, 128, 0.3); }
html.dark-mode .goal-4 { color: #f87171 !important; text-shadow: 0 0 10px rgba(248, 113, 113, 0.3); }
html.dark-mode .goal-9 { color: #fb923c !important; text-shadow: 0 0 10px rgba(251, 146, 60, 0.3); }
html.dark-mode .goal-10 { color: #e879f9 !important; text-shadow: 0 0 10px rgba(232, 121, 249, 0.3); }
html.dark-mode .goal-13 { color: #34d399 !important; text-shadow: 0 0 10px rgba(52, 211, 153, 0.3); }
html.dark-mode .goal-16 { color: #38bdf8 !important; text-shadow: 0 0 10px rgba(56, 189, 248, 0.3); }
html.dark-mode .goal-17 { color: #818cf8 !important; text-shadow: 0 0 10px rgba(129, 140, 248, 0.3); }


/* Dark Mode Code Block Overrides */
html.dark-mode code {
    background-color: rgba(45, 212, 191, 0.1) !important;
    color: #e6edf3 !important;
    border: 1px solid #30363d;
}

/* Special Override for the 'WEBSITE' button inside code tag */
html.dark-mode article p code a.standard-link {
    color: #d2a8ff !important; /* Light Purple */
    text-shadow: 0 0 8px rgba(210, 168, 255, 0.5);
    font-weight: 900;
    letter-spacing: 1px;
}

html.dark-mode article p code a.standard-link:hover {
    color: #ff4d4d !important; /* Neon Red */
    text-shadow: 0 0 12px rgba(255, 77, 77, 0.6);
}


/* Background Effects Container */
#bg-effects {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
}

.bg-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: opacity 1s ease;
}

/* Light Mode Particles (Removed) */
.bg-layer-light {
    display: none;
}


/* Dark Mode Stars (White) */
.bg-layer-dark {
    opacity: 0;
    background-image: 
        radial-gradient(circle at 10% 20%, rgba(79, 255, 211, 0.03) 0%, transparent 20%),
        radial-gradient(circle at 90% 80%, rgba(56, 189, 248, 0.03) 0%, transparent 20%);
    background-attachment: fixed;
}
html.dark-mode .bg-layer-dark {
    opacity: 1;
}

.bg-layer-dark::before,
.bg-layer-dark::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 250px;
    background-repeat: repeat-y;
}

.bg-layer-dark::before {
    left: 0;
    background-image: 
        radial-gradient(2px 2px at 20px 30px, rgba(255, 255, 255, 0.9), transparent),
        radial-gradient(2px 2px at 40px 70px, rgba(255, 255, 255, 0.5), transparent),
        radial-gradient(2px 2px at 50px 160px, rgba(255, 255, 255, 0.7), transparent),
        radial-gradient(2px 2px at 90px 40px, rgba(255, 255, 255, 0.8), transparent),
        radial-gradient(2px 2px at 130px 80px, rgba(255, 255, 255, 0.5), transparent),
        radial-gradient(2px 2px at 160px 120px, rgba(255, 255, 255, 0.6), transparent);
    background-size: 200px 200px;
    animation: star-float 60s linear infinite;
}

.bg-layer-dark::after {
    right: 0;
    background-image: 
        radial-gradient(2px 2px at 10px 50px, rgba(255, 255, 255, 0.8), transparent),
        radial-gradient(2px 2px at 30px 120px, rgba(255, 255, 255, 0.5), transparent),
        radial-gradient(2px 2px at 70px 10px, rgba(255, 255, 255, 0.6), transparent),
        radial-gradient(2px 2px at 90px 230px, rgba(255, 255, 255, 0.7), transparent),
        radial-gradient(2px 2px at 150px 50px, rgba(255, 255, 255, 0.9), transparent),
        radial-gradient(2px 2px at 180px 180px, rgba(255, 255, 255, 0.5), transparent);
    background-size: 200px 200px;
    animation: star-float 75s linear infinite reverse;
}

@keyframes star-float {
    0% { background-position: 0 0; }
    100% { background-position: 0 1000px; }
}


/* Modal Text in Dark Mode */
html.dark-mode .modal p {
    color: #ffffff !important;
    text-shadow: none;
}


/* Project Screenshot (Smaller) */
.project-screenshot {
  display: block;
  max-width: 70%;
  height: auto;
  margin: 1rem auto 2rem auto; /* Centered with spacing */
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  border: 1px solid #eee;
  transition: transform 0.3s ease;
}

.project-screenshot:hover {
  transform: scale(1.02);
}

html.dark-mode .project-screenshot {
    border-color: #30363d;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}





/* Gallery Grid for Projects */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  margin-top: 2rem;
}

.gallery-item {
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
}

.gallery-item:hover {
  transform: translateY(-5px);
}

.gallery-item video {
  display: block;
  width: 100%;
  height: auto;
}

.gallery-item .caption {
  padding: 10px;
  text-align: center;
  font-size: 0.9rem;
  color: #555;
  margin: 0;
  background: #f9f9f9;
}


/* Premium Gallery Grid */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 30px;
  margin-top: 3rem;
  padding: 10px;
}

.gallery-item {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.1);
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  border: 1px solid rgba(0,0,0,0.05);
  position: relative;
  transform: translateZ(0); /* Hardware acceleration */
}

.gallery-item:hover {
  transform: translateY(-10px) scale(1.02);
  box-shadow: 0 20px 40px -5px rgba(0, 0, 0, 0.2);
  z-index: 10;
}

.gallery-item video {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  aspect-ratio: 16/9;
  transition: transform 0.5s ease;
}

.gallery-item:hover video {
  transform: scale(1.05);
}

.gallery-item .caption {
  padding: 18px 24px;
  text-align: center;
  font-size: 1.05rem;
  font-weight: 700;
  color: #2d3748;
  background: #fff;
  border-top: 1px solid rgba(0,0,0,0.05);
  position: relative;
  z-index: 2;
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
  .gallery-item {
    background: #111;
    border: 1px solid #333;
    box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.5);
  }

  .gallery-item .caption {
    background: #111;
    color: #f0f0f0;
    border-top: 1px solid #333;
  }

  .gallery-item:hover {
    box-shadow: 0 20px 40px -5px rgba(0, 0, 0, 0.7);
    border-color: #177c72;
  }
}

/* Explicit Dark Mode Class Support */
html.dark-mode .gallery-item {
  background: #111;
  border: 1px solid #333;
  box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.5);
}

html.dark-mode .gallery-item .caption {
  background: #111;
  color: #f0f0f0;
  border-top: 1px solid #333;
}

html.dark-mode .gallery-item:hover {
  box-shadow: 0 20px 40px -5px rgba(0, 0, 0, 0.7);
  border-color: #177c72;
}


/* Hero Video Post (Same style as hero-image-post but for videos) */
.hero-video-post {
  width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
  margin: 1.5rem 0;
  border: 1px solid #eee;
  display: block;
}


/* PDF Modal Styles */
.pdf-modal {
  max-width: 90%;
  width: 900px;
  height: 85vh;
  padding: 1rem;
  display: flex;
  flex-direction: column;
}

.pdf-modal iframe {
  width: 100%;
  height: 100%;
  border: none;
  flex-grow: 1;
}

.pdf-modal .close-modal-btn {
  align-self: flex-end;
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: #555;
  margin-bottom: 0.5rem;
}

.pdf-modal .close-modal-btn:hover {
  color: #177c72;
}

/* Tech Stack Pills (Inline) */
.tech-stack-section {
  margin: 1.5rem 0;
}

.tech-pill {
  display: inline-block;
  padding: 0 6px;
  border-radius: 4px;
  background-color: rgba(23, 124, 114, 0.08);
  color: #177c72;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95em;
  margin: 0 1px;
  transition: all 0.2s ease;
  border-bottom: 1px solid transparent;
}

.tech-pill:hover {
  background-color: rgba(23, 124, 114, 0.15);
  color: #177c72;
  text-decoration: none;
  transform: translateY(-1px);
}

/**
 ----------------------
 Resume Page
 ----------------------
 */
.resume-page {
  text-align: left;
  padding-bottom: 2.5rem;
  max-width: 760px;
  margin: 0 auto;
}

/* Download Bar */
.resume-download-bar {
  display: flex;
  justify-content: center;
  margin: 0.5rem 0 1.5rem 0;
}

.resume-download-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 26px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 0.85rem;
  color: #fff;
  background: #177c72;
  text-decoration: none;
  transition: background 0.2s ease;
  letter-spacing: 0.2px;
}

.resume-download-btn:hover {
  background: #136860;
  color: #fff;
}

/* Contact Info */
.resume-contact {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.2rem;
  justify-content: center;
  padding: 0.75rem 1.2rem;
  margin-bottom: 1.6rem;
  font-size: 0.82rem;
  background: #f7f8fa;
  border-radius: 8px;
}

.resume-contact span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #555;
}

.resume-contact i {
  color: #177c72;
  font-size: 0.78rem;
}

.resume-contact a {
  color: #333;
  text-decoration: none;
  transition: color 0.2s ease;
}

.resume-contact a:hover {
  color: #177c72;
}

/* Sections */
.resume-section {
  margin-bottom: 1.5rem;
}

.resume-section-title {
  color: #177c72;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  padding-bottom: 0.4rem;
  margin-bottom: 0.85rem;
  border-bottom: 2px solid #177c72;
}

.resume-section-title i {
  display: none;
}

.resume-section > p {
  font-size: 0.88rem;
  line-height: 1.7;
  color: #555;
}

/* Entries (Experience, Education, Projects) */
.resume-entry {
  padding: 0.55rem 0 0.55rem 0.9rem;
  margin-bottom: 0.5rem;
  border-left: 2px solid #e2e6ea;
  position: relative;
  transition: border-left-color 0.2s ease;
}

.resume-entry:hover {
  border-left-color: #177c72;
}

.resume-entry:last-child {
  margin-bottom: 0;
}

.resume-entry::before {
  display: none;
}

.resume-entry-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.8rem;
  flex-wrap: wrap;
}

.resume-entry-title {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

.resume-entry-org {
  font-size: 0.82rem;
  color: #177c72;
  font-weight: 500;
  margin: 1px 0;
}

.resume-entry-sub {
  font-size: 0.8rem;
  color: #999;
  font-style: italic;
  margin: 1px 0;
}

.resume-entry-date {
  font-size: 0.76rem;
  color: #777;
  font-weight: 500;
  white-space: nowrap;
  flex-shrink: 0;
  font-style: italic;
}

.resume-entry-details {
  margin: 0.3rem 0 0 0;
  padding-left: 0.8rem;
  list-style: none;
}

.resume-entry-details li {
  font-size: 0.84rem;
  line-height: 1.6;
  color: #555;
  margin-bottom: 0.12rem;
  position: relative;
  padding-left: 0.85rem;
}

.resume-entry-details li::before {
  content: '–';
  position: absolute;
  left: 0;
  color: #bbb;
  font-weight: 400;
}

/* Skills Grid */
.resume-skills-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem 1.2rem;
}

.resume-skill-category {
  padding: 0.6rem 0.8rem;
  background: #f9fafb;
  border-radius: 6px;
}

.resume-skill-category h4 {
  font-size: 0.72rem;
  font-weight: 600;
  color: #777;
  margin-bottom: 0.35rem;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

.resume-skill-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

/* Responsive */
@media (max-width: 640px) {
  .resume-entry-header {
    flex-direction: column;
    gap: 0.15rem;
  }

  .resume-entry-date {
    align-self: flex-start;
  }

  .resume-skills-grid {
    grid-template-columns: 1fr;
  }

  .resume-contact {
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
  }
}

/* Resume Page - Dark Mode */
html.dark-mode .resume-contact {
  background: rgba(255, 255, 255, 0.03);
}

html.dark-mode .resume-contact span {
  color: #8b949e;
}

html.dark-mode .resume-contact i {
  color: #2dd4bf;
}

html.dark-mode .resume-contact a {
  color: #c9d1d9;
}

html.dark-mode .resume-contact a:hover {
  color: #4fffd3;
}

html.dark-mode .resume-section-title {
  color: #4fffd3;
  border-bottom-color: rgba(79, 255, 211, 0.35);
}

html.dark-mode .resume-section > p {
  color: #8b949e;
}

html.dark-mode .resume-entry {
  border-left-color: #21262d;
}

html.dark-mode .resume-entry:hover {
  border-left-color: #2dd4bf;
}

html.dark-mode .resume-entry-title {
  color: #e6edf3;
}

html.dark-mode .resume-entry-org {
  color: #2dd4bf;
}

html.dark-mode .resume-entry-sub {
  color: #6e7681;
}

html.dark-mode .resume-entry-date {
  color: #6e7681;
}

html.dark-mode .resume-entry-details li {
  color: #8b949e;
}

html.dark-mode .resume-entry-details li::before {
  color: #484f58;
}

html.dark-mode .resume-skill-category {
  background: rgba(255, 255, 255, 0.02);
}

html.dark-mode .resume-skill-category h4 {
  color: #6e7681;
}

html.dark-mode .resume-download-btn {
  background: rgba(45, 212, 191, 0.12);
  color: #4fffd3;
  border: 1px solid rgba(79, 255, 211, 0.2);
}

html.dark-mode .resume-download-btn:hover {
  background: rgba(45, 212, 191, 0.2);
  color: #4fffd3;
}

/* Projects section link */
.resume-section-link {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

.resume-section-link a {
  color: #177c72;
  text-decoration: none;
  border-bottom: 1px dashed rgba(23, 124, 114, 0.3);
  transition: color 0.2s ease;
}

.resume-section-link a:hover {
  color: #21ab9d;
}

html.dark-mode .resume-section-link a {
  color: #2dd4bf;
}

html.dark-mode .resume-section-link a:hover {
  color: #5eead4;
}

.tech-pill i {
  font-size: 1em;
  vertical-align: middle;
  opacity: 0.85;
  margin-right: 2px;
}

.resume-skill-pills .tech-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  font-size: 0.82rem;
}

.resume-skill-pills .tech-pill i {
  font-size: 0.9rem;
  line-height: 1;
}



/* Header Flex Wrapper for About Page */
.header-flex-wrapper {
 display: flex;
 justify-content: space-between;
 align-items: baseline;
 flex-wrap: wrap;
 gap: 1rem;
}

.location-badge {
 background-color: transparent;
 color: #177c72;
 border: 2px solid #177c72;
 padding: 6px 16px;
 border-radius: 50px;
 font-size: 0.9rem;
 font-weight: 600;
 display: inline-flex;
 align-items: center;
 gap: 8px;
 box-shadow: none;
 white-space: nowrap;
}

@media (max-width: 600px) {
 .header-flex-wrapper {
 flex-direction: column;
 align-items: flex-start;
 }
 
 .location-badge {
 margin-bottom: 1rem;
 font-size: 0.85rem;
 }
}

/* Fix for About header underline shrinking due to flexbox */
.header-flex-wrapper .section-header:after {
  width: 50px;
  min-width: 0;
}


/* Dark Mode for Location Badge */
html.dark-mode .location-badge {
 background-color: rgba(45, 212, 191, 0.1);
 border-color: #2dd4bf;
 color: white;
 box-shadow: 0 2px 8px rgba(45, 212, 191, 0.15);
}


/* Dark Mode for Tech Pills */
html.dark-mode .tech-pill {
 background-color: rgba(45, 212, 191, 0.1);
 color: #4fffd3;
 border-color: rgba(45, 212, 191, 0.3);
 text-shadow: 0 0 8px rgba(79, 255, 211, 0.4);
}

html.dark-mode .tech-pill:hover {
 background-color: rgba(45, 212, 191, 0.2);
 color: #ffffff;
 text-shadow: 0 0 12px rgba(79, 255, 211, 0.6);
 box-shadow: 0 0 15px rgba(45, 212, 191, 0.2);
}


/* Tabs Styles - Segmented Control Look */
.content .tab-container {
  display: inline-flex;
  background-color: #f1f5f9;
  padding: 4px;
  border-radius: 12px;
  gap: 4px;
  margin-bottom: 1.5rem;
  margin-top: 0.5rem;
  border: 1px solid #e2e8f0;
  width: auto; /* Override width: 100% from generic rule */
}

.tab-content .timeline {
  margin-top: 0;
  margin-left: 0;
  padding-left: 20px;
  width: 100%;
}

.tab-button {
  background-color: transparent;
  border: none;
  color: #64748b;
  padding: 10px 24px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  gap: 8px;
}

.tab-button:hover {
  color: #334155;
  background-color: rgba(255, 255, 255, 0.6);
}

.tab-button.active {
  background-color: white;
  color: #177c72;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.tab-button i {
  font-size: 1rem;
}

.tab-content {
  display: none !important;
  animation: fadeIn 0.4s ease;
}

/* Dark Mode for Tabs */
html.dark-mode .tab-container {
  background-color: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.08);
}

html.dark-mode .tab-button {
  color: #94a3b8;
}

html.dark-mode .tab-button:hover {
  background-color: rgba(255, 255, 255, 0.05);
  color: #e2e8f0;
}

html.dark-mode .tab-button.active {
  background-color: rgba(45, 212, 191, 0.15);
  color: #4fffd3;
  box-shadow: none;
}

.tab-content.active {
  display: block !important;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Dark mode support for tabs */
html.dark-mode .tab-button {
  background-color: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.1);
  color: #94a3b8;
}

html.dark-mode .tab-button:hover {
  background-color: rgba(255, 255, 255, 0.08);
  color: #e2e8f0;
  border-color: rgba(255, 255, 255, 0.2);
}

html.dark-mode .tab-button.active {
  background-color: rgba(45, 212, 191, 0.15);
  color: #4fffd3;
  border-color: rgba(45, 212, 191, 0.3);
  box-shadow: 0 0 15px rgba(45, 212, 191, 0.1);
}


/* Education Timeline Specifics */
.education-timeline .entry-details {
 max-height: none;
 opacity: 1;
 margin-top: 10px;
 border-left: none;
 padding-left: 0;
}

.gpa-badge {
 display: inline-block;
 background-color: rgba(23, 124, 114, 0.05);
 color: #177c72;
 padding: 2px 8px;
 border-radius: 4px;
 font-weight: 500;
 font-size: 0.8rem;
 margin-top: 6px;
 border: 1px solid rgba(23, 124, 114, 0.15);
}

html.dark-mode .gpa-badge {
 background-color: rgba(45, 212, 191, 0.05);
 color: #4fffd3;
 border-color: rgba(45, 212, 191, 0.2);
 box-shadow: none;
}

/* Published Research Banner */
.published-banner {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.5rem;
  margin-bottom: 2rem;
  background: linear-gradient(135deg, rgba(23, 124, 114, 0.06), rgba(23, 124, 114, 0.02));
  border: 1px solid rgba(23, 124, 114, 0.2);
  border-left: 4px solid #177c72;
  border-radius: 8px;
}

.published-banner .banner-icon {
  font-size: 1.5rem;
  color: #177c72;
  flex-shrink: 0;
}

.published-banner .banner-content {
  flex: 1;
}

.published-banner .banner-label {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: #177c72;
  margin-bottom: 0.25rem;
}

.published-banner .banner-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 0.2rem 0;
  line-height: 1.4;
}

.published-banner .banner-meta {
  font-size: 0.8rem;
  color: var(--text-secondary, #666);
  margin: 0;
}

.published-banner .banner-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 1rem;
  background: #177c72;
  color: #fff;
  font-size: 0.8rem;
  font-weight: 600;
  border-radius: 6px;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.2s;
}

.published-banner .banner-link:hover {
  background: #125f57;
}

html.dark-mode .published-banner {
  background: linear-gradient(135deg, rgba(79, 255, 211, 0.06), rgba(79, 255, 211, 0.02));
  border-color: rgba(79, 255, 211, 0.2);
  border-left-color: #4fffd3;
}

html.dark-mode .published-banner .banner-icon,
html.dark-mode .published-banner .banner-label {
  color: #4fffd3;
}

html.dark-mode .published-banner .banner-title {
  color: #e6edf3;
}

html.dark-mode .published-banner .banner-meta {
  color: #8b949e;
}

html.dark-mode .published-banner .banner-link {
  background: #2dd4bf;
  color: #0d1117;
}

html.dark-mode .published-banner .banner-link:hover {
  background: #4fffd3;
}

@media (max-width: 600px) {
  .published-banner {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }
}


/* Intro Header Style */
.intro-header {
  color: #21ab9d;
}

html.dark-mode .intro-header {
  color: rgb(33, 171, 157) !important;
  text-shadow: none !important;
}


/* Header Redesign */
header {
  position: relative; /* Establish positioning context for absolute children */
}

header nav {
  position: static; /* Allow children to position relative to header */
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

nav ul {
  display: flex;
  gap: 1rem;
  margin: 0;
  padding: 0;
}

.header-right {
  position: absolute;
  right: 2rem; /* Position from the edge of the screen */
  top: 2rem; /* Align vertically with nav */
  display: flex;
  align-items: center;
  gap: 1rem;
  z-index: 10;
}

.header-right .theme-toggle-btn {
  margin-left: 0; /* Reset margin as we use gap */
}

/* Mobile Responsiveness for Header */
@media (max-width: 768px) {
  header nav {
    flex-direction: column;
    gap: 1rem;
    padding-top: 3rem; /* Make space for top icons */
  }

  .header-right {
    top: 1rem;
    right: 1rem;
  }
  
  nav ul {
    flex-wrap: wrap;
    justify-content: center;
  }
}

.icon-link {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  color: var(--text-primary);
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem; /* Made bigger */
  text-decoration: none;
  box-shadow: none;
  width: 48px; /* Fixed width for better hover target */
  height: 48px;
  border-radius: 50%; /* Circular hover effect */
}

.icon-link:hover {
  color: var(--dark-green);
  transform: translateY(-2px);
  background-color: rgba(23, 124, 114, 0.1); /* Subtle background on hover */
  box-shadow: none;
}

.icon-link:active {
  transform: scale(0.95);
}

/* Dark Mode for Icon Links */
html.dark-mode .icon-link {
  background: transparent;
  border: none;
  color: #e0e0e0;
  box-shadow: none;
}

html.dark-mode .icon-link:hover {
  background-color: rgba(255, 255, 255, 0.1); /* Subtle light background on hover */
  color: var(--light-green);
  box-shadow: none;
  border: none;
}

.decoration-stack {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.decoration-stack > img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* Center strictly */
}

html:not(.decoration-ready) .project-decoration,
html:not(.decoration-ready) .project-levitate {
  opacity: 0;
}

html.decoration-ready .project-decoration,
html.decoration-ready .project-levitate {
  opacity: 1;
}

/* Original project decoration */
.project-decoration {
  width: 150%;
  height: auto;
  object-fit: contain;
  display: block;
  transform: translate(-50%, -50%) rotate(20deg) translateY(60px) !important; /* Keep original transform + centering */
  border: none;
  outline: none;
  box-shadow: none;
  background: transparent;
  backface-visibility: hidden;
}

.project-levitate {
  width: 150%;
  height: auto;
  object-fit: contain;
  border: none;
  outline: none;
  background: transparent;
  pointer-events: none;
  z-index: 2;
  animation: levitate 5s ease-in-out infinite;
}

@keyframes levitate {
  0%, 100% {
    transform: translate(-50%, -50%) rotate(20deg) translateY(63px);
  }
  50% {
    transform: translate(-50%, -50%) rotate(20deg) translateY(49px);
  }
}

.decoration-item {
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 800px) {
  .decoration-item {
    display: none;
  }
}




/* Smooth Scroll Transition Styles */
.project-decoration.project-active {
  opacity: 0;
  transition: opacity 0.8s ease;
  z-index: 1; /* Sit above base */
}

.project-decoration.project-active.visible {
  opacity: 1;
}

.project-decoration.project-base {
  z-index: 0;
}


/* Video Hover Styles */
.media-container {
  /* Behave exactly like the anchor in other pages */
  position: relative;
  display: block;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: var(--image-border-radius);
  overflow: hidden;
  transform: translateZ(0); 
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  mask-image: radial-gradient(white, black);
  line-height: 0;
}

/* Image acts as the layout master */
.media-container .post-thumb {
  position: relative;
  display: block;
  width: 100%;
  height: 220px; /* Restore fixed height */
  object-fit: cover;
  margin: 0;
  padding: 0;
  z-index: 1;
}

.post-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 2;
  pointer-events: none;
  margin: 0;
  padding: 0;
  border: none;
}

.media-container:hover .post-video {
  opacity: 1;
}


/* Extra spacing for 3D Projects list */
.spaced-list .course-card {
  margin: 3.2rem 0;
}


.spaced-list .tags {
  padding-top: 0;
}