body {
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #1a1a1a;
     }
}

.github-link {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    padding: 0.8rem;
    border-radius: 50%;
    color: rgba(255, 255, 255, 0.9);
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.37);
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.github-link:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateX(-50%) scale(1.1);
    box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.45);
}

@keyframes float {ont-family: 'Courier New', Courier, monospace;
    overflow: hidden;
}

.container {
    text-align: center;
    color: rgba(255, 255, 255, 0.9);
    z-index: 2;
    position: relative;
    padding: 2rem;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}

.message {
    font-size: clamp(2rem, 5vw, 4rem);
    border-right: 2px solid rgba(255, 255, 255, 0.9);
    white-space: nowrap;
    overflow: hidden;
    margin: 0 auto;
    padding: 0 1rem;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    animation: typing 3.5s steps(40, end),
               blink-caret 0.75s step-end infinite;
}

.message::before {
    content: "";
}

.message::after {
    content: "is under development...";
    font-weight: normal;
}

.message span {
    font-weight: bold;
}

.background-animation {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.background-animation span {
    position: absolute;
    opacity: 0;
    transform-origin: center;
    --random-x: 0;
    --random-rotate: 0;
}

/* Different font sizes and opacities - larger size for lower opacity */
.background-animation span:nth-child(3n) { 
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    opacity: 0.15;
    color: rgba(255, 255, 255, 1);
}
.background-animation span:nth-child(3n+1) { 
    font-size: clamp(1.25rem, 2.5vw, 2rem);
    opacity: 0.25;
    color: rgba(255, 255, 255, 1);
}
.background-animation span:nth-child(3n+2) { 
    font-size: clamp(1rem, 2vw, 1.5rem);
    opacity: 0.35;
    color: rgba(255, 255, 255, 1);
}

/* Randomized starting positions and animations */
.background-animation span {
    --random-left: 0;
    --random-delay: 0;
    --random-duration: 20s;
    animation: var(--float-type, float1) var(--random-duration) ease-in-out infinite;
    animation-delay: var(--random-delay);
}

.background-animation span:nth-child(7n) { --float-type: float1; --random-duration: 22s; }
.background-animation span:nth-child(7n+1) { --float-type: float2; --random-duration: 25s; }
.background-animation span:nth-child(7n+2) { --float-type: float3; --random-duration: 28s; }
.background-animation span:nth-child(7n+3) { --float-type: float1; --random-duration: 23s; }
.background-animation span:nth-child(7n+4) { --float-type: float2; --random-duration: 26s; }
.background-animation span:nth-child(7n+5) { --float-type: float3; --random-duration: 24s; }
.background-animation span:nth-child(7n+6) { --float-type: float1; --random-duration: 27s; }

/* Random positions and variables for elements */
.background-animation span:nth-child(1) { left: 12%; --random-x: 30; --random-rotate: -15; animation-delay: -2s; }
.background-animation span:nth-child(2) { left: 85%; --random-x: -40; --random-rotate: 20; animation-delay: -15s; }
.background-animation span:nth-child(3) { left: 45%; --random-x: 50; --random-rotate: -10; animation-delay: -8s; }
.background-animation span:nth-child(4) { left: 67%; --random-x: -25; --random-rotate: 15; animation-delay: -12s; }
.background-animation span:nth-child(5) { left: 23%; --random-x: 35; --random-rotate: -20; animation-delay: -5s; }
.background-animation span:nth-child(6) { left: 78%; --random-x: -45; --random-rotate: 10; animation-delay: -18s; }
.background-animation span:nth-child(7) { left: 34%; --random-x: 40; --random-rotate: -15; animation-delay: -7s; }
.background-animation span:nth-child(8) { left: 89%; --random-x: -30; --random-rotate: 20; animation-delay: -14s; }
.background-animation span:nth-child(9) { left: 15%; --random-x: 45; --random-rotate: -10; animation-delay: -3s; }
.background-animation span:nth-child(10) { left: 56%; --random-x: -35; --random-rotate: 15; animation-delay: -9s; }

/* Additional random positions for remaining elements */
.background-animation span:nth-child(11) { left: 28%; --random-x: 25; --random-rotate: -12; animation-delay: -11s; }
.background-animation span:nth-child(12) { left: 72%; --random-x: -38; --random-rotate: 18; animation-delay: -16s; }
.background-animation span:nth-child(13) { left: 38%; --random-x: 42; --random-rotate: -15; animation-delay: -13s; }
.background-animation span:nth-child(14) { left: 82%; --random-x: -28; --random-rotate: 22; animation-delay: -19s; }
.background-animation span:nth-child(15) { left: 18%; --random-x: 35; --random-rotate: -20; animation-delay: -14s; }
.background-animation span:nth-child(16) { left: 62%; --random-x: -45; --random-rotate: 12; animation-delay: -17s; }
.background-animation span:nth-child(17) { left: 42%; --random-x: 32; --random-rotate: -18; animation-delay: -12s; }
.background-animation span:nth-child(18) { left: 92%; --random-x: -35; --random-rotate: 15; animation-delay: -20s; }
.background-animation span:nth-child(19) { left: 8%; --random-x: 40; --random-rotate: -15; animation-delay: -15s; }
.background-animation span:nth-child(20) { left: 52%; --random-x: -30; --random-rotate: 20; animation-delay: -18s; }

/* Set position variables for remaining elements */
.background-animation span:nth-child(11) { --n: 11; }
.background-animation span:nth-child(12) { --n: 12; }
.background-animation span:nth-child(13) { --n: 13; }
.background-animation span:nth-child(14) { --n: 14; }
.background-animation span:nth-child(15) { --n: 15; }
.background-animation span:nth-child(16) { --n: 16; }
.background-animation span:nth-child(17) { --n: 17; }
.background-animation span:nth-child(18) { --n: 18; }
.background-animation span:nth-child(19) { --n: 19; }
.background-animation span:nth-child(20) { --n: 20; }
.background-animation span:nth-child(21) { --n: 21; }
.background-animation span:nth-child(22) { --n: 22; }
.background-animation span:nth-child(23) { --n: 23; }
.background-animation span:nth-child(24) { --n: 24; }
.background-animation span:nth-child(25) { --n: 25; }
/* Pattern continues for all elements */

@keyframes float1 {
    0% {
        opacity: 0;
        transform: translate(calc(var(--random-x, -50) * 1px), 100vh) rotate(calc(var(--random-rotate, -10) * 1deg)) scale(0.8);
    }
    20% {
        opacity: inherit;
        transform: translate(calc(var(--random-x, -50) * 1.2px), 70vh) rotate(calc(var(--random-rotate, -5) * 1deg)) scale(0.9);
    }
    80% {
        opacity: inherit;
        transform: translate(calc(var(--random-x, 50) * 1.5px), 30vh) rotate(calc(var(--random-rotate, 5) * 1deg)) scale(1.1);
    }
    100% {
        opacity: 0;
        transform: translate(calc(var(--random-x, 0) * 2px), 0) rotate(calc(var(--random-rotate, 10) * 1deg)) scale(1);
    }
}

@keyframes float2 {
    0% {
        opacity: 0;
        transform: translate(calc(var(--random-x, 50) * 1px), 100vh) rotate(calc(var(--random-rotate, 10) * 1deg)) scale(1.2);
    }
    20% {
        opacity: inherit;
        transform: translate(calc(var(--random-x, 70) * 1.2px), 70vh) rotate(calc(var(--random-rotate, 5) * 1deg)) scale(1.1);
    }
    80% {
        opacity: inherit;
        transform: translate(calc(var(--random-x, -70) * 1.5px), 30vh) rotate(calc(var(--random-rotate, -5) * 1deg)) scale(0.9);
    }
    100% {
        opacity: 0;
        transform: translate(calc(var(--random-x, 0) * 2px), 0) rotate(calc(var(--random-rotate, -10) * 1deg)) scale(0.8);
    }
}

@keyframes float3 {
    0% {
        opacity: 0;
        transform: translate(calc(var(--random-x, 0) * 1px), 100vh) rotate(0deg) scale(1);
    }
    20% {
        opacity: inherit;
        transform: translate(calc(var(--random-x, -80) * 1.2px), 70vh) rotate(calc(var(--random-rotate, -10) * 1deg)) scale(1.1);
    }
    80% {
        opacity: inherit;
        transform: translate(calc(var(--random-x, 80) * 1.5px), 30vh) rotate(calc(var(--random-rotate, 10) * 1deg)) scale(0.9);
    }
    100% {
        opacity: 0;
        transform: translate(calc(var(--random-x, 0) * 2px), 0) rotate(0deg) scale(1);
    }
}

@keyframes typing {
    from { width: 0 }
    to { width: 100% }
}

@keyframes blink-caret {
    from, to { border-color: transparent }
    50% { border-color: rgba(255, 255, 255, 0.9) }
}

@keyframes float {
    0% {
        top: 110%;
        opacity: 0;
        transform: translateX(-50%) rotate(-10deg);
    }
    10% {
        opacity: 0.3;
    }
    90% {
        opacity: 0.3;
    }
    100% {
        top: -10%;
        opacity: 0;
        transform: translateX(50%) rotate(10deg);
    }
}

.github-link {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    padding: 0.8rem;
    border-radius: 50%;
    color: rgba(255, 255, 255, 0.9);
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.37);
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.github-link:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateX(-50%) scale(1.1);
    box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.45);
}

/* Responsive adjustments */
@media screen and (max-width: 768px) {
    .container {
        padding: 1.5rem;
        width: calc(100% - 2rem);
        margin: 0 1rem;
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }

    .message {
        max-width: 100%;
        border-right-width: 1px;
    }

    .background-animation span {
        --random-x: calc(var(--random-x) * 0.6);
    }

    @keyframes typing {
        from { width: 0 }
        to { width: calc(100% - 2rem) }
    }
}

@media screen and (max-width: 480px) {
    .background-animation span {
        --random-x: calc(var(--random-x) * 0.4);
    }
    
    .message::after {
        display: block;
        white-space: normal;
        animation: none;
        border-right: none;
    }

    .github-link {
        bottom: 1.5rem;
        padding: 0.6rem;
    }
}