* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}
body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* multiple backgrounds
    svg clouds
    svg sun
    svg moon
    svg stars
    split linear gradient
    */
    background: url('data:image/svg+xml;utf8,%3Csvg opacity="0.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"%3E%3Cdefs%3E%3Cg fill="%23ffffff" id="a"%3E%3Crect width="80" height="50" rx="25"/%3E%3Ccircle cx="55" cy="10" r="30"/%3E%3Crect x="40" y="10" width="60" height="40" rx="20"/%3E%3C/g%3E%3C/defs%3E%3Cuse href="%23a" transform="matrix(.05 0 0 .05 70 35)"/%3E%3Cuse href="%23a" transform="matrix(.1 0 0 .1 25 20)"/%3E%3Cuse href="%23a" transform="matrix(.15 0 0 .15 60 75)"/%3E%3Cuse href="%23a" transform="matrix(.12 0 0 .12 20 55)"/%3E%3C/svg%3E'),
        url('data:image/svg+xml;utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"%3E%3Cdefs%3E%3Cpath id="a" d="M-35.35-35.35h70.7v70.7h-70.7z"/%3E%3C/defs%3E%3Cg fill="%23f9f906" transform="translate(50 50)"%3E%3Cuse href="%23a"/%3E%3Cg transform="rotate(45)"%3E%3Cuse href="%23a"/%3E%3Ccircle fill="%23ffffff" r="25"/%3E%3C/g%3E%3C/g%3E%3C/svg%3E'),
        url('data:image/svg+xml;utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"%3E%3Cdefs%3E%3Ccircle id="a" r="50"/%3E%3Cmask id="b"%3E%3Cuse href="%23a" fill="%23ffffff"/%3E%3Cuse x="35" href="%23a" fill="%23000000"/%3E%3C/mask%3E%3C/defs%3E%3Cg mask="url(%23b)" transform="rotate(-20 166.782 -116.782)" fill="%23f9f906" %3E%3Cuse href="%23a"/%3E%3C/g%3E%3C/svg%3E'),
        url('data:image/svg+xml;utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"%3E%3Cdefs%3E%3Cg id="b"%3E%3Cpath id="a" d="M-2 0a2 2 0 002-2 2 2 0 002 2"/%3E%3Cuse href="%23a" transform="scale(1 -1)"/%3E%3C/g%3E%3C/defs%3E%3Cg fill="%23808080" transform="translate(50 50)"%3E%3Cuse href="%23b" x="20" y="-40"/%3E%3Cuse href="%23b" x="-30" y="45"/%3E%3Cuse href="%23b" x="-45" y="-20"/%3E%3Cuse href="%23b" x="15" y="10"/%3E%3C/g%3E%3C/svg%3E'),
        linear-gradient(to right, hsl(240, 40%, 65%) 50%, hsl(240, 100%, 2%) 50%);
        background-size: 300px, 75px, 75px, 200px, 100%;
        background-position: 0%, 3% 3%, 97% 97%, 0%;
        background-repeat: repeat, no-repeat, no-repeat, repeat, no-repeat;
}

/* change the color of the svg to change the hue of the stripes */
svg {
    color: hsl(0, 95%, 60%);
    display: block;
    width: 200px;
    height: auto;
    animation: rotate 60s infinite linear;
}
@keyframes rotate {
    to {
        transform: rotate(1turn);
    }
}

/* more research on the media query is warranted 
https://css-tricks.com/introduction-reduced-motion-media-query/
*/
@media screen and (prefers-reduced-motion) {
    svg {
        animation: none;
    }
}