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

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    min-height: 100vh;
    background: url('bg.jpeg') center/cover no-repeat fixed;
    color: white;
    overflow-x: hidden;
    padding: 40px 20px;
    position: relative;
}

/* Animated twinkling stars */
.stars {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

.stars::before,
.stars::after {
    content: '';
    position: absolute;
    width: 2px;
    height: 2px;
    background: white;
    box-shadow: 
        100px 200px white, 300px 100px white, 500px 300px white,
        700px 150px white, 200px 400px white, 600px 250px white,
        150px 50px white, 450px 350px white, 800px 100px white,
        250px 450px white, 550px 50px white, 350px 500px white;
    animation: twinkle 3s infinite;
}

.stars::after {
    animation-delay: 1.5s;
    box-shadow: 
        150px 250px white, 350px 150px white, 550px 350px white,
        750px 200px white, 250px 450px white, 650px 300px white,
        200px 100px white, 500px 400px white, 850px 150px white,
        300px 500px white, 600px 100px white, 400px 550px white;
}

@keyframes twinkle {
    0%, 100% { opacity: 0; }
    50% { opacity: 1; }
}

.container {
    position: relative;
    z-index: 1;
    max-width: 700px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

/* Card styles */
.card {
    position: relative;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 24px;
    padding: 40px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

.card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    border-color: rgba(255, 255, 255, 0.4);
}

/* Shimmer effect */
.shimmer {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        45deg,
        transparent 30%,
        rgba(255, 255, 255, 0.1) 50%,
        transparent 70%
    );
    transform: rotate(45deg);
    animation: shimmer 3s infinite;
    pointer-events: none;
}

@keyframes shimmer {
    0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
    100% { transform: translateX(100%) translateY(100%) rotate(45deg); }
}

/* Profile Card */
.profile-pic {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    margin: 0 auto 20px;
    display: block;
    border: 4px solid rgba(255, 255, 255, 0.3);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.profile-card:hover .profile-pic {
    transform: scale(1.1) rotate(5deg);
    border-color: rgba(255, 255, 255, 0.6);
    border-width: 5px;
    box-shadow: 0 0 30px rgba(255, 255, 255, 0.5);
    animation: rainbow-border 2s linear infinite;
}

@keyframes rainbow-border {
    0%, 100% { border-color: rgba(255, 100, 100, 0.8); }
    25% { border-color: rgba(100, 255, 100, 0.8); }
    50% { border-color: rgba(100, 100, 255, 0.8); }
    75% { border-color: rgba(255, 255, 100, 0.8); }
}

.name {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 10px;
    transition: all 0.3s ease;
}

.card:hover .name {
    transform: scale(1.05);
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
}

.tagline {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 15px;
    transition: all 0.3s ease;
}

.card:hover .tagline {
    color: rgba(255, 255, 255, 1);
    transform: scale(1.02);
}

.location {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 30px;
    transition: all 0.3s ease;
}

.card:hover .location {
    color: rgba(255, 255, 255, 0.9);
    transform: scale(1.05);
}

.social-links {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.social-icon {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    color: white;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 2px solid rgba(255, 255, 255, 0.2);
}

.social-icon svg {
    width: 24px;
    height: 24px;
}

.social-icon:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-8px) rotate(360deg) scale(1.2);
    border-color: rgba(255, 255, 255, 0.5);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}

/* Discord Activity Section */
.discord-activity {
    margin-top: 30px;
    padding-top: 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.discord-card {
    background: rgba(30, 30, 35, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 20px;
    display: flex;
    align-items: flex-start;
    gap: 15px;
    transition: all 0.3s ease;
}

.discord-card:hover {
    background: rgba(35, 35, 40, 0.9);
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

.discord-avatar-container {
    position: relative;
    flex-shrink: 0;
}

.discord-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 4px solid rgba(255, 255, 255, 0.1);
    object-fit: cover;
    transition: all 0.3s ease;
}

.discord-card:hover .discord-avatar {
    border-color: rgba(255, 255, 255, 0.3);
    transform: scale(1.05);
}

.discord-status-indicator {
    position: absolute;
    bottom: 3px;
    right: 3px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 4px solid rgba(30, 30, 35, 0.9);
    transition: all 0.3s ease;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
}

.discord-status-indicator.online {
    background-color: #43b581;
}

.discord-status-indicator.idle {
    background-color: #faa61a;
}

.discord-status-indicator.dnd {
    background-color: #f04747;
}

.discord-status-indicator.offline {
    background-color: #747f8d;
}

.discord-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

.discord-username {
    font-size: 1.15rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.3px;
}

.discord-activities {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.discord-activity-item {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.discord-activity-type {
    font-size: 0.8rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.discord-activity-details-line {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.3;
}

.discord-activity-text {
    font-size: 0.92rem;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.5;
    display: flex;
    align-items: center;
    gap: 6px;
}

.discord-last-online {
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.55);
    font-style: normal;
    margin-top: 2px;
}

/* Projects Section */
.section-title {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 25px;
    text-align: center;
}

.projects-grid {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.project-item {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    padding: 25px;
    text-decoration: none;
    color: white;
    display: block;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.project-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, transparent 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.project-item:hover::before {
    opacity: 1;
}

.project-item:hover {
    transform: translateY(-8px) scale(1.02);
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.4);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
}

.project-icon {
    font-size: 3rem;
    margin-bottom: 15px;
    display: block;
    transition: all 0.3s ease;
}

.project-item:hover .project-icon {
    transform: scale(1.2) rotate(10deg);
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.5));
}

.project-name {
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 10px;
    transition: all 0.3s ease;
}

.project-item:hover .project-name {
    transform: scale(1.05);
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}

.project-description {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 15px;
    line-height: 1.5;
}

.project-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

.project-tag {
    background: rgba(255, 255, 255, 0.2);
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.85rem;
    transition: all 0.2s ease;
}

.project-item:hover .project-tag {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.05);
}

.loading {
    text-align: center;
    color: rgba(255, 255, 255, 0.7);
    font-size: 1rem;
}

.error {
    text-align: center;
    color: rgba(255, 100, 100, 0.9);
    font-size: 1rem;
    padding: 20px;
}

/* Responsive */
@media (max-width: 768px) {
    body {
        padding: 20px 10px;
    }
    
    .card {
        padding: 30px 20px;
    }
    
    .name {
        font-size: 2rem;
    }
    
    .projects-grid {
        grid-template-columns: 1fr;
    }
    
    .discord-card {
        padding: 15px;
    }
    
    .discord-avatar {
        width: 60px;
        height: 60px;
    }
    
    .discord-status-indicator {
        width: 18px;
        height: 18px;
    }
    
    .discord-username {
        font-size: 1rem;
    }
    
    .discord-activity-text {
        font-size: 0.85rem;
    }
}