html {
    height: 100%;
    font-family: 'Open Sans', system-ui, sans-serif;
}

body {
    height: 100%;
    margin: 0;

    background: #9effa0;
    background: linear-gradient(140deg, #52ff00 0%, #00acff 45%, #0030cb 100%);
}

#logoContainer {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    text-align: center;
}

#logo {
    background-color: #ffffff;
    font-size: 3.25em;
    padding: 0.4em 0.8em;
    border-radius: 1rem;
    box-shadow: #000000c2 0 0 20px 0px;
}

#zkk {
    color: #00ea04; /* adjusted slightly for contrast */
    font-weight: 600;
}

#softworks {
    color: #ff9900;
}

#footer {
    background-color: #ffffff;
    position: absolute;

    bottom: 0;
    padding: 10px;
    border-top-right-radius: 10px;
}

/* Background animation */
@keyframes RotateGradient { 
    0%{--angle: 140deg;}
    100%{--angle: 500deg;}
}

@media (prefers-reduced-motion: no-preference) {
    body {
        --angle: 140deg;
        background: linear-gradient(var(--angle), #52ff00 0%, #00acff 45%, #0030cb 100%);
        animation: RotateGradient 60s linear infinite;
    }
}

@property --angle {
    syntax: '<angle>';
    initial-value: 140deg;
    inherits: false;
}