@font-face {
    font-family: "fontcustom2";
    src: url("/assets/fonts/EmotionEngine.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}

body {
margin: 0;
background: linear-gradient(to bottom, #0a3b7a, #0f5db8);
color: white;
font-family: "fontcustom2", sans-serif;
min-height: 100vh;
overflow-x: hidden;
}

/* Hide any water-scene elements that might be lingering */
.water-scene, .wave-layer, .bubble-layer {
display: none;
}

.chrono-wrapper {
width: 900px;
max-width: 90%;
margin: 60px auto;
}

.chrono-title {
text-align: center;
font-size: 32px;
letter-spacing: 4px;
margin-bottom: 40px;
}

/* Section Title */
.chrono-section h2 {
font-size: 18px;
margin-bottom: 20px;
opacity: 0.8;
}

/* Vita style list container */
.vita-list {
display: flex;
flex-direction: column;
gap: 18px;
}

/* Vita style button */
.vita-item, .project-item {
display: flex;
align-items: center;
gap: 20px;
padding: 14px 24px;
border-radius: 40px;
background: linear-gradient(to right, #1e6fd1, #1a56a8);
text-decoration: none;
color: white;
font-size: 16px;
transition: 0.25s ease;
position: relative;
overflow: hidden;
}

/* Hover glow */
.vita-item:hover, .project-item:hover {
transform: translateY(-2px);
box-shadow: 0 0 20px rgba(100,170,255,0.7);
}

/* Base circular icon */
.vita-icon {
width: 50px;
height: 50px;
border-radius: 50%;
background: radial-gradient(circle at 30% 30%, #7dc0ff, #1b5fb0);
box-shadow: inset 0 0 10px rgba(255,255,255,0.4),
            0 0 15px rgba(0,150,255,0.6);
flex-shrink: 0;
position: relative;
}

/* Unique project icon designs - same color, different patterns */

/* Illusionary Moon - Crescent moon shape inside */
.project-item:nth-child(1) .vita-icon::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 28px;
height: 28px;
border-radius: 50%;
background: rgba(255,255,255,0.6);
box-shadow: 
    inset -8px -2px 0 rgba(30,111,209,0.8),
    0 0 8px rgba(255,255,255,0.4);
}

/* Illusionary Moon - Subtle stars */
.project-item:nth-child(1) .vita-icon::after {
content: "";
position: absolute;
width: 3px;
height: 3px;
border-radius: 50%;
background: rgba(255,255,255,0.8);
top: 30%;
left: 25%;
box-shadow: 
    12px 8px 0 rgba(255,255,255,0.7),
    -4px 14px 0 rgba(255,255,255,0.6);
}

/* Water World - Wave pattern */
.project-item:nth-child(2) .vita-icon::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 32px;
height: 32px;
border-radius: 50% 50% 0 50%;
background: rgba(255,255,255,0.5);
transform: translate(-50%, -50%) rotate(-45deg);
}

/* Water World - Shine highlight on droplet */
.project-item:nth-child(2) .vita-icon::after {
content: "";
position: absolute;
width: 6px;
height: 6px;
border-radius: 50%;
background: rgba(255,255,255,0.9);
top: 38%;
left: 32%;
}