
.bg-blue-600.text-white.px-4.py-2.rounded-lg.font-bold.text-xl {
    font-family: "Times New Roman", serif;
    color: rgb(107, 51, 163);
    background-color: rgb(244, 227, 42);
}

.relative.bg-gradient-to-br.from-blue-50.to-indigo-100.min-h-screen.flex.items-center {
    border-top-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 0px;
    border-left-width: 0px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-top-color: rgb(102, 5, 5);
    border-right-color: rgb(102, 5, 5);
    border-bottom-color: rgb(102, 5, 5);
    border-left-color: rgb(102, 5, 5);
    border-image-source: initial;
    border-image-slice: initial;
    border-image-width: initial;
    border-image-outset: initial;
    border-image-repeat: initial;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    row-gap: 1rem;
    column-gap: 1rem;
}

@keyframes blur-focus {
    0%, 100% { 
        filter: blur(20px); 
        opacity: 0; 
    }
    50% { 
        filter: blur(0); 
        opacity: 1; 
    }
}

.animate-blur-focus {
    animation: blur-focus 4s ease-in-out infinite;
}

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

.animate-typing {
    overflow: hidden;
    border-right: .15em solid orange;
    white-space: nowrap;
    animation: typing 3.5s steps(30, end), blink-caret .5s step-end infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(0) }
    50% { transform: translateY(-20px) }
}

.animate-float {
    animation: float 3s ease-in-out infinite;
}

.retro-text {
    text-shadow: 4px 4px 0px #bdbdbd, 7px 7px 0px #999, 10px 10px 0px #777;
}
        