body, html {
    background: url('background.jpg') no-repeat center center fixed;
    background-size: cover;
    height: 100%;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

#card {
    width: 90%;
    max-width: 600px;
    background: rgba(255, 255, 255, 0.85);
    padding: 2rem;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    text-align: center;
    margin: 1rem;
}

h1 {
    margin: 0 0 1rem;
    font-size: 2rem;
    font-weight: 400;
    font-family: 'sans-serif', serif;
}

.name span {
    display: inline-block;
}

.name .large {
    font-size: 2.5rem;
}

.name .small {
    font-size: 1rem;
}

#badge {
    width: 50px;
    height: 50px;
    margin: 0 auto 1rem;
}

p {
    margin: 1rem 0;
    font-size: 1rem;
    word-wrap: break-word;
}

a.email {
    font-family: 'Roboto', sans-serif;
    font-size: 1rem;
    color: #333;
    text-decoration: none;
    transition: color 0.5s;
    word-wrap: break-word;
}

a.email:hover {
    animation: rainbow 2s infinite;
    color: transparent;
    background-clip: text;
    -webkit-background-clip: text;
}

.social-icons {
    margin-top: 1rem;
}

.social-icons a {
    margin: 0 0.5rem;
    color: #333;
    font-size: 1.5rem;
    transition: color 0.5s;
}

.social-icons a:hover {
    animation: rainbow 2s infinite;
    color: transparent;
    background-clip: text;
    -webkit-background-clip: text;
}

@keyframes rainbow {
    0% { color: #FF0000; }
    1% { color: #FF1100; }
    2% { color: #FF2200; }
    3% { color: #FF3300; }
    4% { color: #FF4400; }
    5% { color: #FF5500; }
    6% { color: #FF6600; }
    7% { color: #FF7700; }
    8% { color: #FF8800; }
    9% { color: #FF9900; }
    10% { color: #FFAA00; }
    11% { color: #FFBB00; }
    12% { color: #FFCC00; }
    13% { color: #FFDD00; }
    14% { color: #FFEE00; }
    15% { color: #EEFF00; }
    16% { color: #DDFF00; }
    17% { color: #CCFF00; }
    18% { color: #BBFF00; }
    19% { color: #AAFF00; }
    20% { color: #99FF00; }
    21% { color: #88FF00; }
    22% { color: #77FF00; }
    23% { color: #66FF00; }
    24% { color: #55FF00; }
    25% { color: #44FF00; }
    26% { color: #33FF00; }
    27% { color: #22FF00; }
    28% { color: #11FF00; }
    29% { color: #00FF00; }
    30% { color: #00FF11; }
    31% { color: #00FF22; }
    32% { color: #00FF33; }
    33% { color: #00FF44; }
    34% { color: #00FF55; }
    35% { color: #00FF66; }
    36% { color: #00FF77; }
    37% { color: #00FF88; }
    38% { color: #00FF99; }
    39% { color: #00FFAA; }
    40% { color: #00FFBB; }
    41% { color: #00FFCC; }
    42% { color: #00FFDD; }
    43% { color: #00FFEE; }
    44% { color: #00FFFF; }
    45% { color: #00EEFF; }
    46% { color: #00DDFF; }
    47% { color: #00CCFF; }
    48% { color: #00BBFF; }
    49% { color: #00AAFF; }
    50% { color: #0099FF; }
    51% { color: #0088FF; }
    52% { color: #0077FF; }
    53% { color: #0066FF; }
    54% { color: #0055FF; }
    55% { color: #0044FF; }
    56% { color: #0033FF; }
    57% { color: #0022FF; }
    58% { color: #0011FF; }
    59% { color: #0000FF; }
    60% { color: #1100FF; }
    61% { color: #2200FF; }
    62% { color: #3300FF; }
    63% { color: #4400FF; }
    64% { color: #5500FF; }
    65% { color: #6600FF; }
    66% { color: #7700FF; }
    67% { color: #8800FF; }
    68% { color: #9900FF; }
    69% { color: #AA00FF; }
    70% { color: #BB00FF; }
    71% { color: #CC00FF; }
    72% { color: #DD00FF; }
    73% { color: #EE00FF; }
    74% { color: #FF00FF; }
    75% { color: #FF00EE; }
    76% { color: #FF00DD; }
    77% { color: #FF00CC; }
    78% { color: #FF00BB; }
    79% { color: #FF00AA; }
    80% { color: #FF0099; }
    81% { color: #FF0088; }
    82% { color: #FF0077; }
    83% { color: #FF0066; }
    84% { color: #FF0055; }
    85% { color: #FF0044; }
    86% { color: #FF0033; }
    87% { color: #FF0022; }
    88% { color: #FF0011; }
    89% { color: #FF0000; }
    100% { color: #FF0000; }
}

@media (max-width: 600px) {
    h1 {
        font-size: 1.5rem;
    }

    .name .large {
        font-size: 2rem;
    }

    .name .small {
        font-size: 0.8rem;
    }

    p {
        font-size: 0.9rem;
    }

    a.email {
        font-size: 0.9rem;
        word-break: break-word;
    }
}