body {
  align-items: center;
  display: flex;
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  font-size: 16px;
  height: 100vh;
  justify-content: center;
  margin: 0;
  background-color: #000;
  color: #fff;
}

/* --- Particle Background --- */
:root {
  --shadow-1: 1.57em -0.32em 7px hsla(0, 0%, 100%, 0.45), 2.21em 1.25em 7px hsla(0, 0%, 100%, 0.81), -0.42em 1.89em 7px hsla(0, 0%, 100%, 0.36), 1.98em 0.86em 7px hsla(0, 0%, 100%, 0.22), 0.76em 0.44em 7px hsla(0, 0%, 100%, 0.89), 1.63em 0.60em 7px hsla(0, 0%, 100%, 0.54), 0.15em 0.38em 7px hsla(0, 0%, 100%, 0.21), 1.77em 1.48em 7px hsla(0, 0%, 100%, 0.65), 2.45em 1.15em 7px hsla(0, 0%, 100%, 0.38), 0.46em 2.45em 7px hsla(0, 0%, 100%, 0.55), 1.84em 0.54em 7px hsla(0, 0%, 100%, 0.25), 0.98em 2.05em 7px hsla(0, 0%, 100%, 0.47), 2.41em 0.82em 7px hsla(0, 0%, 100%, 0.77), 1.34em -0.12em 7px hsla(0, 0%, 100%, 0.66), 1.05em 0.41em 7px hsla(0, 0%, 100%, 0.84), -0.25em 0.95em 7px hsla(0, 0%, 100%, 0.79), 1.85em 2.04em 7px hsla(0, 0%, 100%, 0.23), 1.56em 1.29em 7px hsla(0, 0%, 100%, 0.60), 0.43em 1.17em 7px hsla(0, 0%, 100%, 0.14), 1.10em 0.54em 7px hsla(0, 0%, 100%, 0.55), 0.88em 0.36em 7px hsla(0, 0%, 100%, 0.33), 2.36em 2.36em 7px hsla(0, 0%, 100%, 0.81), 1.24em 1.62em 7px hsla(0, 0%, 100%, 0.42), 0.66em 1.58em 7px hsla(0, 0%, 100%, 0.51), 0.30em -0.48em 7px hsla(0, 0%, 100%, 0.74), 0.25em 0.15em 7px hsla(0, 0%, 100%, 0.18), -0.16em 2.22em 7px hsla(0, 0%, 100%, 0.26), 0.56em 0.94em 7px hsla(0, 0%, 100%, 0.69), 1.14em 1.05em 7px hsla(0, 0%, 100%, 0.77), 1.53em 0.49em 7px hsla(0, 0%, 100%, 0.52), 0.72em 1.56em 7px hsla(0, 0%, 100%, 0.36), 1.95em 1.96em 7px hsla(0, 0%, 100%, 0.41), 1.68em -0.05em 7px hsla(0, 0%, 100%, 0.32), 1.25em 0.18em 7px hsla(0, 0%, 100%, 0.58), 2.25em 2.08em 7px hsla(0, 0%, 100%, 0.15), 0.35em 2.12em 7px hsla(0, 0%, 100%, 0.29), -0.49em 1.97em 7px hsla(0, 0%, 100%, 0.63), 1.48em 0.28em 7px hsla(0, 0%, 100%, 0.28), 1.19em 0.79em 7px hsla(0, 0%, 100%, 0.74), 0.96em 1.35em 7px hsla(0, 0%, 100%, 0.85);
  --shadow-2: 0.05em 2.06em 7px hsla(0, 0%, 100%, 0.60), 2.43em -0.29em 7px hsla(0, 0%, 100%, 0.80), 1.54em 1.16em 7px hsla(0, 0%, 100%, 0.86), 1.97em -0.06em 7px hsla(0, 0%, 100%, 0.58), 1.86em 1.24em 7px hsla(0, 0%, 100%, 0.55), 0.16em 1.76em 7px hsla(0, 0%, 100%, 0.52), -0.30em 1.10em 7px hsla(0, 0%, 100%, 0.78), 1.65em 2.44em 7px hsla(0, 0%, 100%, 0.74), 0.78em 1.19em 7px hsla(0, 0%, 100%, 0.50), 1.45em 0.87em 7px hsla(0, 0%, 100%, 0.89), 2.24em 1.28em 7px hsla(0, 0%, 100%, 0.48), 2.04em 2.27em 7px hsla(0, 0%, 100%, 0.66), 2.20em 2.03em 7px hsla(0, 0%, 100%, 0.19), 1.57em 1.36em 7px hsla(0, 0%, 100%, 0.45), 1.21em 2.21em 7px hsla(0, 0%, 100%, 0.45), 0.84em 2.29em 7px hsla(0, 0%, 100%, 0.80), 0.09em 0.48em 7px hsla(0, 0%, 100%, 0.56), -0.03em 0.99em 7px hsla(0, 0%, 100%, 0.12), 0.74em 0.90em 7px hsla(0, 0%, 100%, 0.12), 0.95em 2.43em 7px hsla(0, 0%, 100%, 0.59), 1.43em 2.48em 7px hsla(0, 0%, 100%, 0.29), 1.98em 2.06em 7px hsla(0, 0%, 100%, 0.36), 0.41em 0.26em 7px hsla(0, 0%, 100%, 0.71), 0.52em 0.99em 7px hsla(0, 0%, 100%, 0.81), 1.06em 0.29em 7px hsla(0, 0%, 100%, 0.75), -0.31em -0.48em 7px hsla(0, 0%, 100%, 0.12), -0.05em 1.25em 7px hsla(0, 0%, 100%, 0.46), 0.77em 1.09em 7px hsla(0, 0%, 100%, 0.34), 0.46em 0.77em 7px hsla(0, 0%, 100%, 0.79), 1.46em 0.20em 7px hsla(0, 0%, 100%, 0.75), 0.35em 1.69em 7px hsla(0, 0%, 100%, 0.43), 2.14em 0.79em 7px hsla(0, 0%, 100%, 0.27), 1.68em 0.37em 7px hsla(0, 0%, 100%, 0.30);
  --shadow-3: 0.97em 0.37em 7px hsla(0, 0%, 100%, 0.84), 2.30em 0.16em 7px hsla(0, 0%, 100%, 0.35), -0.45em -0.36em 7px hsla(0, 0%, 100%, 0.30), 2.00em 0.12em 7px hsla(0, 0%, 100%, 0.18), 0.45em 1.54em 7px hsla(0, 0%, 100%, 0.82), 0.81em 0.23em 7px hsla(0, 0%, 100%, 0.15), 0.55em -0.44em 7px hsla(0, 0%, 100%, 0.26), 1.28em 1.99em 7px hsla(0, 0%, 100%, 0.44), 0.19em 0.38em 7px hsla(0, 0%, 100%, 0.89), 1.09em 0.77em 7px hsla(0, 0%, 100%, 0.86), 0.28em -0.46em 7px hsla(0, 0%, 100%, 0.28), 1.56em 1.80em 7px hsla(0, 0%, 100%, 0.63), 0.26em 1.11em 7px hsla(0, 0%, 100%, 0.42), -0.08em 0.09em 7px hsla(0, 0%, 100%, 0.84), 2.38em 1.71em 7px hsla(0, 0%, 100%, 0.40), -0.27em 1.82em 7px hsla(0, 0%, 100%, 0.14), 0.71em 1.45em 7px hsla(0, 0%, 100%, 0.77), -0.49em 0.94em 7px hsla(0, 0%, 100%, 0.44), 1.33em 0.79em 7px hsla(0, 0%, 100%, 0.10), 2.43em 1.91em 7px hsla(0, 0%, 100%, 0.15), 1.63em 1.18em 7px hsla(0, 0%, 100%, 0.23), 2.42em 0.52em 7px hsla(0, 0%, 100%, 0.33), 0.95em 1.69em 7px hsla(0, 0%, 100%, 0.22), 1.88em 1.46em 7px hsla(0, 0%, 100%, 0.84), 2.43em 0.59em 7px hsla(0, 0%, 100%, 0.66), 0.35em 0.51em 7px hsla(0, 0%, 100%, 0.59), -0.06em -0.32em 7px hsla(0, 0%, 100%, 0.46), 1.03em 1.06em 7px hsla(0, 0%, 100%, 0.75), 1.66em -0.45em 7px hsla(0, 0%, 100%, 0.78), 1.36em 1.26em 7px hsla(0, 0%, 100%, 0.18), 1.75em 1.58em 7px hsla(0, 0%, 100%, 0.81), 1.67em 2.49em 7px hsla(0, 0%, 100%, 0.71), -0.48em 1.58em 7px hsla(0, 0%, 100%, 0.72), 1.93em 1.00em 7px hsla(0, 0%, 100%, 0.34), 2.46em 0.47em 7px hsla(0, 0%, 100%, 0.74), 1.32em -0.35em 7px hsla(0, 0%, 100%, 0.77), 1.50em 0.44em 7px hsla(0, 0%, 100%, 0.72), 0.51em 2.05em 7px hsla(0, 0%, 100%, 0.67), 2.38em 0.97em 7px hsla(0, 0%, 100%, 0.30), 0.18em 1.91em 7px hsla(0, 0%, 100%, 0.69);
  --shadow-4: -0.19em 1.21em 7px hsla(0, 0%, 100%, 0.37), 2.26em 1.79em 7px hsla(0, 0%, 100%, 0.89), 0.41em 1.89em 7px hsla(0, 0%, 100%, 0.12), 1.85em -0.35em 7px hsla(0, 0%, 100%, 0.71), -0.38em 0.30em 7px hsla(0, 0%, 100%, 0.83), 0.98em 1.31em 7px hsla(0, 0%, 100%, 0.53), -0.22em -0.35em 7px hsla(0, 0%, 100%, 0.34), 1.77em 1.49em 7px hsla(0, 0%, 100%, 0.44), 1.84em 1.24em 7px hsla(0, 0%, 100%, 0.33), 1.43em 2.04em 7px hsla(0, 0%, 100%, 0.77), -0.00em 0.37em 7px hsla(0, 0%, 100%, 0.78), 1.16em -0.49em 7px hsla(0, 0%, 100%, 0.37), 2.13em 0.10em 7px hsla(0, 0%, 100%, 0.68), 1.65em 2.48em 7px hsla(0, 0%, 100%, 0.71), 0.79em 1.60em 7px hsla(0, 0%, 100%, 0.86), 2.43em 0.80em 7px hsla(0, 0%, 100%, 0.10), 0.53em 0.53em 7px hsla(0, 0%, 100%, 0.77), 1.47em 2.06em 7px hsla(0, 0%, 100%, 0.66), -0.37em 0.08em 7px hsla(0, 0%, 100%, 0.39), 0.19em 2.07em 7px hsla(0, 0%, 100%, 0.81), -0.09em 1.56em 7px hsla(0, 0%, 100%, 0.64), 0.02em 1.91em 7px hsla(0, 0%, 100%, 0.87), 0.80em -0.09em 7px hsla(0, 0%, 100%, 0.88), 0.50em 2.19em 7px hsla(0, 0%, 100%, 0.40), -0.30em 1.90em 7px hsla(0, 0%, 100%, 0.11), 1.53em 1.38em 7px hsla(0, 0%, 100%, 0.12), 0.58em -0.08em 7px hsla(0, 0%, 100%, 0.23), 0.44em 1.57em 7px hsla(0, 0%, 100%, 0.24), 0.90em 1.43em 7px hsla(0, 0%, 100%, 0.41), -0.45em 0.34em 7px hsla(0, 0%, 100%, 0.16), 2.13em -0.26em 7px hsla(0, 0%, 100%, 0.36), 0.57em 2.38em 7px hsla(0, 0%, 100%, 0.50), -0.24em 2.08em 7px hsla(0, 0%, 100%, 0.55), 0.90em 2.38em 7px hsla(0, 0%, 100%, 0.69), 0.18em -0.02em 7px hsla(0, 0%, 100%, 0.34), 0.24em 1.10em 7px hsla(0, 0%, 100%, 0.69), 2.05em 2.25em 7px hsla(0, 0%, 100%, 0.12), 0.58em 2.35em 7px hsla(0, 0%, 100%, 0.40), 0.10em 0.40em 7px hsla(0, 0%, 100%, 0.26), 0.82em 0.49em 7px hsla(0, 0%, 100%, 0.68);
}

.particles {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; /* Behind content but visible */
    pointer-events: none;
    font-size: 5vmin; /* Base size for em units */
    overflow: hidden;
}

.particle-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.particle-layer::before, .particle-layer::after {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 3em;
    height: 3em;
    content: '.';
    mix-blend-mode: screen;
    animation: move infinite ease-in-out alternate;
    color: transparent; /* Hide original dot */
}

/* Layer 1 - corresponds to body::before */
.particles .particle-layer:nth-child(1)::before {
    text-shadow: var(--shadow-1);
    animation-duration: 44s;
    animation-delay: -27s;
}

/* Layer 2 - corresponds to body::after */
.particles .particle-layer:nth-child(1)::after {
    text-shadow: var(--shadow-2);
    animation-duration: 43s;
    animation-delay: -32s;
}

/* Layer 3 - corresponds to head::before */
.particles .particle-layer:nth-child(2)::before {
    text-shadow: var(--shadow-3);
    animation-duration: 42s;
    animation-delay: -23s;
}

/* Layer 4 - corresponds to head::after */
.particles .particle-layer:nth-child(2)::after {
    text-shadow: var(--shadow-4);
    animation-duration: 41s;
    animation-delay: -19s;
}

@keyframes move {
  from {
    transform: rotate(0deg) scale(12) translateX(-20px);
  }
  to {
    transform: rotate(360deg) scale(18) translateX(20px);
  }
}

/* --- Animation Styles (Unchanged mostly) --- */
#loginWrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 20;
    transition: opacity 0.5s ease-out;
}

.hint {
    color: transparent;
    -webkit-text-stroke: 0.5px rgba(255, 255, 255, 0.8);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    transition: opacity 300ms;
    animation: pulse-hint 2s infinite ease-in-out;
    margin-bottom: 20px;
    text-align: center;
}

.container {
  align-items: center;
  background: #000;
  border-radius: 40px;
  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
  display: flex;
  height: 80px;
  justify-content: center;
  position: relative;
  width: 200px;
  cursor: pointer;
  z-index: 20;
  transition: opacity 0.5s ease-out, transform 0.3s ease-in-out;
}

.container:hover {
  transform: scale(1.1);

}

.text {
  color: white;
  position: absolute;
  transition: opacity 300ms;
  user-select: none;
  font-weight: 600;
  font-size: 26px;
}



@keyframes pulse-hint {
  0%, 100% {
    opacity: 0.3;
    transform: scale(0.95);
  }
  50% {
    opacity: 1;
    transform: scale(1);
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
  }
}
.fingerprint {
  left: -8px;
  opacity: 0;
  position: absolute;
  stroke: #777;
  top: -9px;
  transition: opacity 1ms;
}
.fingerprint-active {
  stroke: #fff;
}
.fingerprint-out {
  opacity: 1;
}
.odd {
  stroke-dasharray: 0px 50px;
  stroke-dashoffset: 1px;
  transition: stroke-dasharray 1ms;
}
.even {
  stroke-dasharray: 50px 50px;
  stroke-dashoffset: -41px;
  transition: stroke-dashoffset 1ms;
}
.ok {
  opacity: 0;
}
.active.container {
  animation: 6s Container;
}
.active .text {
  opacity: 0;
  animation: 6s Text forwards;
}
.active .fingerprint {
  opacity: 1;
  transition: opacity 300ms 200ms;
}
.active .fingerprint-base .odd {
  stroke-dasharray: 50px 50px;
  transition: stroke-dasharray 800ms 100ms;
}
.active .fingerprint-base .even {
  stroke-dashoffset: 0px;
  transition: stroke-dashoffset 800ms;
}
.active .fingerprint-active .odd {
  stroke-dasharray: 50px 50px;
  transition: stroke-dasharray 2000ms 1500ms;
}
.active .fingerprint-active .even {
  stroke-dashoffset: 0px;
  transition: stroke-dashoffset 2000ms 1300ms;
}
.active .fingerprint-out {
  opacity: 0;
  transition: opacity 300ms 4100ms;
}
.active .ok {
  opacity: 1;
  animation: 6s Ok forwards;
}
@keyframes Container {
  0% { width: 200px }
  6% { width: 80px }
  71% { transform: scale(1); }
  75% { transform: scale(1.2); }
  77% { transform: scale(1); }
  94% { width: 80px }
  100% { width: 200px }
}
@keyframes Text {
  0% { opacity: 1; transform: scale(1); }
  6% { opacity: 0; transform: scale(0.5); }
  94% { opacity: 0; transform: scale(0.5); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes Ok {
  0% { opacity: 0 }
  70% { opacity: 0; transform: scale(0); }
  75% { opacity: 1; transform: scale(1.1); }
  77% { opacity: 1; transform: scale(1); }
  92% { opacity: 1; transform: scale(1); }
  96% { opacity: 0; transform: scale(0.5); }
  100% { opacity: 0 }
}

/* --- New Glassmorphism BIO Styles --- */
.bio-section {
    display: none; /* Changed via JS */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    background: transparent;
    opacity: 0;
    transition: opacity 1s ease-in-out;
    z-index: 10;
}

.bio-section.visible {
    display: flex;
    opacity: 1;
}

/* The Blob Container */


/* --- Glass Container & Grid Layout --- */
.glass-container {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 24px;
    padding: 1.5rem;
    width: 90%;
    max-width: 400px;
    margin: auto;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    transition: all 0.5s ease;
}

/* Mobile Layout: Single Column, Specific Order */
.bio-grid {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.col-left, .col-right {
    display: contents; /* Unbox columns on mobile */
}

/* Mobile Order: Profile -> Map -> Skills -> Links */
.grid-item.profile { order: 1; }
.grid-item.map { order: 2; }
.grid-item.skills { order: 3; }
.grid-item.links { order: 4; }

/* Header Section */
.profile-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 1.5rem;
    position: relative;
    z-index: 2;
}

.avatar-circle {
    width: 60px;
    height: 60px;
    background: #000; /* Dark abstract avatar */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.status-text {
    font-size: 1.8rem;
    font-weight: 300;
    margin: 0;
    margin-bottom: 0.5rem;
    letter-spacing: 1px;
}

.time-location {
    font-size: 0.8rem;
    color: #aaa;
    font-weight: 300;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.date-id {
    font-size: 0.7rem;
    opacity: 0.7;
    margin-top: 2px;
}

/* Map Container (OSM) */
.map-wrapper {
    width: 100%;
    height: 170px; /* Increased height slightly for better visibility */
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: inset 0 0 20px rgba(0,0,0,0.5);
    position: relative;
    z-index: 5;
}

#map {
    width: 100%;
    height: 100%;
    background: #111;
    /* Invert colors for dark mode effect if using standard tiles, 
       but we will try to use dark tiles in JS. 
       Adding filter just in case standard tiles are used as fallback */
    filter: grayscale(100%) invert(100%) contrast(90%);
}

/* Fix for Leaflet controls in dark mode */
.leaflet-control-attribution {
    background: rgba(0,0,0,0.5) !important;
    color: #aaa !important;
}
.leaflet-control-attribution a {
    color: #ccc !important;
}

/* Skills List */
.skills-list {

    text-align: left;
    margin-bottom: 2rem;
    padding-left: 10px;
}

.skill-item {
    display: flex;
    align-items: center;
    margin-bottom: 0.8rem;
    font-size: 0.9rem;
    color: #ccc;
}

.dot {
    width: 6px;
    height: 6px;
    background: #fff;
    border-radius: 50%;
    margin-right: 12px;
    box-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
}

.skill-text {
    font-weight: 300;
}

.highlight {
    color: #fff;
    font-weight: 400;
}

/* Timeline Links */
.timeline-links {
    width: 100%;
    position: relative;

}

.link-item {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: inherit;
    margin-bottom: 1rem;
    position: relative;
    transition: transform 0.2s;
}

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

.timeline-dot {
    position: absolute;
    left: -24px; /* Adjust based on padding + border width */
    width: 7px;
    height: 7px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
}

.link-card {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    backdrop-filter: blur(5px);
}

.link-icon {
    margin-right: 12px;
    font-size: 1.1rem;
    opacity: 0.8;
}

.link-text {
    flex-grow: 1;
    font-size: 0.9rem;
    font-weight: 300;
}

.arrow {
    font-size: 0.8rem;
    opacity: 0.5;
}

/* --- Desktop Layout (Big Blocks) --- */
@media (min-width: 900px) {
    .glass-container {
        max-width: 1100px;
        padding: 4rem;
        border-radius: 40px;
        background: rgba(255, 255, 255, 0.02); /* More transparent on desktop */
    }

    .bio-grid {
        display: flex;
        flex-direction: row;
        gap: 3rem;
        align-items: flex-start;
    }

    .col-left {
        display: flex;
        flex-direction: column;
        width: 350px;
        gap: 2rem;
        flex-shrink: 0;
    }

    .col-right {
        display: flex;
        flex-direction: column;
        flex-grow: 1;
        gap: 2rem;
    }

    /* Reset orders for desktop to follow DOM order (Left col, then Right col) */
    .grid-item.profile,
    .grid-item.map,
    .grid-item.skills,
    .grid-item.links {
        order: unset;
    }

    .grid-item.profile {
        display: flex;
        flex-direction: column;
        justify-content: center;
        /* height: 100%; Removed to allow stacking */
    }

    /* Profile Adjustments */
    .profile-header {
        margin-top: 0;
        align-items: flex-start;
        text-align: left;
        padding: 2rem;
        background: rgba(255, 255, 255, 0.03);
        border-radius: 24px;
        border: 1px solid rgba(255, 255, 255, 0.05);
        height: 100%;
    }

    .avatar-circle {
        width: 120px;
        height: 120px;
        margin-bottom: 1.5rem;
    }

    .status-text {
        font-size: 3rem;
        line-height: 1.1;
        margin-bottom: 1rem;
    }

    .time-location {
        font-size: 1rem;
    }

    /* Map Adjustments */
    .map-wrapper {
        height: 340px;
        border-radius: 24px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    }

    /* Skills Adjustments */
    .skills-list {
        padding: 0.98rem;
        background: rgba(255, 255, 255, 0.03);
        border-radius: 24px;
        border: 1px solid rgba(255, 255, 255, 0.05);
        height: 100%;
        margin-bottom: 0;
    }

    .skill-item {
        font-size: 1.1rem;
        margin-bottom: 1.2rem;
    }

    /* Links Adjustments */
    .timeline-links {
        padding-left: 0;
        border-left: none;
        display: grid;

        grid-auto-rows: 1fr; /* Ensure equal height rows */
        gap: 1.5rem;
    }

    .link-item {
        margin-bottom: 0; /* Remove margin in grid mode */
    }

    .timeline-dot {
        display: none;
    }

    .link-card {
        padding: 1.5rem;
        height: 100%;
        transition: transform 0.3s ease, background 0.3s ease;
        margin-bottom: 0;
    }

    .link-card:hover {
        background: rgba(255, 255, 255, 0.1);
        transform: translateY(-5px);
    }

    .link-icon {
        font-size: 1.5rem;
    }

    .link-text {
        font-size: 1.1rem;
    }
}