@keyframes colorwheel {
    from, to { color: hsl(324, 70%, 45%); }
    10%      { color: hsl(360, 65%, 45%); }
    20%      { color: hsl( 36, 80%, 45%); }
    30%      { color: hsl( 72, 75%, 35%); }
    40%      { color: hsl(108, 65%, 35%); }
    50%      { color: hsl(144, 75%, 35%); }
    60%      { color: hsl(180, 75%, 35%); }
    70%      { color: hsl(216, 60%, 45%); }
    80%      { color: hsl(252, 65%, 50%); }
    90%      { color: hsl(288, 60%, 40%); }
}

html {
    background-color: currentColor;
    animation: colorwheel 50s infinite;
    height: 100%;
}

@media (prefers-reduced-motion: reduce) {
    html {
        animation: none;
        color: hsl(324, 70%, 45%);
    }
}

@supports (background-blend-mode: overlay) {
    html {
        background-image: linear-gradient(45deg, white 10%, black 90%);
        background-blend-mode: overlay;
    }
}

body {
    max-width: 720px;
    margin: 0 auto;

}

#logo {
    width: 100%
}

#footer-link {
    position: fixed;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    font-family: system-ui, -apple-system, sans-serif;
    font-size: 0.9rem;
    letter-spacing: 0.04em;
    color: white;
    text-decoration: none;
    opacity: 0.8;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

#footer-link:hover {
    opacity: 1;
    text-decoration: underline;
}