:root {
    --gradient-start: #FCAE4E;
    --gradient-end: #FFC95C;
    --neocat-scale: 0.2;
    --footer-height: 100px;
    --color-text-default: #000000;
    --color-footer: #3d3d3d;
}

body {
    margin: 0;
    padding: 0;
    font-family: monospace, sans-serif;
    background: linear-gradient(to bottom, var(--gradient-start), var(--gradient-end));
    background-size: 200% 200%;
    animation: gradientAnimation 5s ease-in-out infinite;
    color: var(--color-text-default);
}

@media (prefers-color-scheme: dark) {
    body {
        background: linear-gradient(to bottom, var(--gradient-end), var(--gradient-start));
        color: #FFFFFF;
    }
}

@keyframes gradientAnimation {
    0%, 100% {
        background-position: 0% 0%;
    }
    50% {
        background-position: 100% 100%;
    }
}

.container {
    width: 100%;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.neocat {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(var(--neocat-scale));
    animation: float 3s ease-in-out infinite;
}

@keyframes float {
    0%, 100% {
        transform: translate(-50%, -50%) scale(var(--neocat-scale)) rotate(0deg);
    }
    50% {
        transform: translate(-50%, calc(-50% - 5%)) scale(var(--neocat-scale)) rotate(-5deg);
    }
}

a {
    color: var(--color-text-default);
    text-decoration: none; 
    transition: color 0.3s; 
}

a:hover,
a:focus {
    color: #FFC95C; 
}

footer {
    color: var(--color-footer);
    position: absolute;
    left: 0;
    text-align: center;
    bottom: 0;
    height: var(--footer-height);
    width: 100%;
    overflow: hidden;
}