body {
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: var(--background-color);
    transition: background-color 0.3s;
    font-family: Arial, sans-serif;
}

:root {
    --light-background-color: #f5f5dc; /* Retro creme */
    --dark-background-color: #2e2e2e; /* Non-pitch black */
}

@media (prefers-color-scheme: light) {
    :root {
        --background-color: var(--light-background-color);
    }
}

@media (prefers-color-scheme: dark) {
    :root {
        --background-color: var(--dark-background-color);
    }
}

.container {
    text-align: center;
}

.dinosaur {
    width: 300px;
    border-radius: 10px; /* Rounded corners */
    margin-bottom: 10px; /* Reduce margin for closer text */
}

.text-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.text {
    font-size: 2em;
    color: #1a1a1a; /* Almost black for text */
    display: inline-block;
    margin-top: 10px; /* Reduce margin for closer text */
    white-space: nowrap; /* Prevent text from moving */
    position: relative;
}

.dots {
    display: inline-block;
    width: 1em; /* Fixed width to prevent text shift */
    text-align: left;
}

.dots::after {
    content: '';
    animation: dots 2s steps(5, end) infinite; /* Slower animation */
    display: inline-block;
    width: 1em; /* Match the width */
}

@keyframes dots {
    0%, 20% {
        content: '';
    }
    40% {
        content: '.';
    }
    60% {
        content: '..';
    }
    80%, 100% {
        content: '...';
    }
}

.credit {
    font-size: 0.8em;
    color: #666;
    margin-top: 10px;
}

.credit a {
    color: inherit;
    text-decoration: none;
}