body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    padding: 0;
    min-height: 100vh;
    /* Animated gradient background */
    background: linear-gradient(120deg, rgb(14, 1, 1),rgb(250, 35, 250));
    background-size: 400% 400%;
}



.container {
    max-width: 900px;
    margin: 48px auto;
    padding: 0 16px;
}

header {
    text-align: center;
    margin-bottom: 32px;
    color: #0c0505;
    text-shadow: 0 2px 16px rgba(50,0,80,0.18);
}
header h1 {
    margin: 0 0 8px 0;
    font-size: 2.8rem;
    letter-spacing: 2px;
    
    
}
header p {
    margin: 0;
    font-size: 1.1rem;
    opacity: 0.92;
}

#particles-js {
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    z-index: 1;
    pointer-events: none;
}

.card {
    background: linear-gradient( rgb(14, 1, 1),rgb(30, 3, 50));
    border-radius: 18px;
    box-shadow: 0 8px 32px 0 rgba(80,0,120,0.12), 0 1.5px 6px 0 rgba(0,0,0,0.04);
    margin-bottom: 32px;
    padding: 32px 28px 24px 28px;
    transition: transform 0.25s cubic-bezier(.4,2,.6,1), box-shadow 0.25s, border 0.4s;
    position: relative;
    overflow: hidden;
    border: 2.5px solid transparent;
    z-index: 2;
    animation: cardFloat 4s ease-in-out infinite alternate;
}
.card:hover {
    transform: translateY(-12px) scale(1.035);
    box-shadow: 0 20px 60px 0 rgba(80,0,120,0.22), 0 6px 18px 0 rgba(0,0,0,0.12);
    border-image: linear-gradient(90deg, #43e97b, #7f53ac, #b224ef, #38f9d7, #647dee) 1;
    border-width: 3.5px;
    border-style: solid;
    filter: brightness(1.04) drop-shadow(0 0 12px #b224ef88);
}
.card h2 {
    color: #7f53ac;
    margin-bottom: 12px;
    font-size: 1.35rem;
    border-left: 5px solid #43e97b;
    padding-left: 12px;
    letter-spacing: 1px;
}
.card ul, .card p {
    color: #3a2d4d;
    font-size: 1.05rem;
}
.card ul {
    margin: 0 0 0 20px;
    padding: 0;
}
.card li {
    margin-bottom: 7px;
    color: #4b3b5a;
}
.job h3 {
    font-size: 1.13rem;
    color: #43e97b;
    margin: 0;
}
.job h4 {
    font-size: 1.01rem;
    color: #7f53ac;
    margin: 0 0 7px 0;
}

/* Animated floating shapes */
.animated-bg {
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}
.shape {
    position: absolute;
    border-radius: 50%;
    opacity: 0.18;
    animation: floatShape 18s linear infinite;
}
.shape1 { width: 180px; height: 180px; background: #43e97b; left: -60px; top: 8vh; animation-delay: 0s; }
.shape2 { width: 120px; height: 120px; background: #7f53ac; right: -40px; top: 22vh; left: auto; animation-delay: 3s; }
.shape3 { width: 90px; height: 90px; background: #b224ef; left: -40px; top: 60vh; animation-delay: 6s; }
.shape4 { width: 140px; height: 140px; background: #38f9d7; right: -60px; top: 70vh; left: auto; animation-delay: 9s; }
.shape5 { width: 100px; height: 100px; background: #647dee; left: -30px; top: 40vh; animation-delay: 12s; }

@keyframes floatShape {
    0% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-40px) scale(1.08); }
    100% { transform: translateY(0) scale(1); }
}

@keyframes cardFloat {
    0% { transform: translateY(0) scale(1); }
    100% { transform: translateY(-8px) scale(1.01); }
}

/* Shiny text effect for all text */
body, header h1, header p, .card h2, .card h3, .card h4, .card p, .card ul, .card li, .card a {
    background: linear-gradient(90deg, #43e97b, #7f53ac, #b224ef, #38f9d7, #647dee, #43e97b);
    background-size: 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    animation: shineText 3.5s linear infinite;
    font-weight: 500;
}

@keyframes shineText {
    0% { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
}

/* Optionally, make email and other key info shiny */
header p, .card h3, .card h4 {
    background: linear-gradient(90deg, #7f53ac, #43e97b, #b224ef, #647dee);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    animation: shineText 5s linear infinite;
    font-weight: 500;
}

header h1, header p {
    background: none !important;
    -webkit-background-clip: initial !important;
    -webkit-text-fill-color: #120707 !important;
    background-clip: initial !important;
    color: #170404 !important;
    text-shadow: 10px 20px 16px rgba(50,0,80,0.18);
    
    font-weight: 1000;
    letter-spacing: 2px;
   
    text-align: center;
    margin-bottom: 12px;
    padding-bottom: 12px;
}

@media (max-width: 600px) {
    .container { padding: 0 2vw; }
    .card { padding: 18px 8px 14px 8px; }
    header h1 { font-size: 2rem; }
}