body {
    margin: 0px 50px;
    text-align: center;
    background: #89bae8;
    background: radial-gradient(circle, rgba(137, 186, 232, 1) 0%, rgba(146, 232, 225, 1) 23%, rgba(204, 242, 187, 1) 42%, rgba(247, 242, 210, 1) 60%, rgba(247, 233, 233, 1) 76%);
    background-attachment: fixed;
}

#one {
    margin: 5em 12.5em;
    max-height: 300px;
}

.daytwo {
    padding: 1em;
}

#boxtwo {
    width: 25em;
    height: 25em;
    background-color: aqua;
}

#boxtwotwo {
    width: 25em;
    height: 25em;
    position: absolute;
    top: 200px;
    left: 200px;
    background-color: violet;
    opacity: 50%;
}

#boxtwotwotwo {
    width: 25em;
    height: 25em;
    position: absolute;
    top: 500px;
    left: 300px;
    background-color: rgb(246, 255, 0);
    opacity: 50%;
}

.daythree {
    color: aliceblue;
    font-size: 2em;
    max-width: fit-content;
    position: absolute;
    top: 500px;
}

.daythree :hover {
    text-shadow: 0 0 10px white, 0 0 20px white;
}

#onefive {
    width: 10em;
    position: absolute;
    top: 750px;
    right: 500px;
    line-height: 0.5em;
    filter: blur(1px);
    transition: ease-in-out 0.3s;
    z-index: 3;
}

.dayfive :hover {
    color: white;
}

.daysix img {
    width: 300px;
    position: absolute;
    top: 700px;
    right: 425px;
    z-index: -1;
}

.dayseven {
    position: absolute;
    top: 200px;
    right: 150px;
    width: 400px;
}

.dayseven p {
    font-size: 50px;
    line-height: 1em;
    filter: blur(0.8px);
}

.dayeight {
    position: absolute;
    top: 125px;
    left: 40%;
    z-index: -1;
    opacity: 50%;
    filter: blur(1px);
}

.dayeight img {
    width: 350px
}

.daynine {
    position: absolute;
    top: 500px;
    font-weight: 900;
    font-size: 2em;
    color: aqua;
    opacity: 50%;
    rotate: 30deg;
    filter: blur(2px);
}

.dayten {
    position: absolute;
    top: 1000px;
    right: 150px;
    font-size: 1.5em;
    width: 200px;
    background-image: url(kms/IMG_3811-dithered.png);
    background-size: contain;
    z-index: 2;
}

.dayten p {
    color: aliceblue;
    filter: sepia();
    filter: blur(0.5px);
}

.dayten :hover {
    background-color: aliceblue;
    background-image: none;
}

.dayeleven {
    position: absolute;
    top: 1200px;
}

.dayeleven img {
    width: 100px;
    filter: sepia();
}

@-webkit-keyframes snowflakes-fall {
    0% {
        right: -10%
    }

    100% {
        right: 100%
    }
}

@-webkit-keyframes snowflakes-shake {

    0%,
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }

    50% {
        -webkit-transform: translateY(80px);
        transform: translateY(50px)
    }
}

@keyframes snowflakes-fall {
    0% {
        right: -10%,
    }

    100% {
        right: 100%
    }
}


@keyframes snowflakes-shake {

    0%,
    100% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(90px)
    }
}

.snowflake {
    position: absolute;
    right: -100px;
    top: 900px;
    z-index: 9999;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: default;
    -webkit-animation-name: snowflakes-fall, snowflakes-shake;
    -webkit-animation-duration: 10s, 3s;
    -webkit-animation-timing-function: linear, ease-in-out;
    -webkit-animation-iteration-count: infinite, infinite;
    -webkit-animation-play-state: running, running;
    animation-name: snowflakes-fall, snowflakes-shake;
    animation-duration: 10s, 3s;
    animation-timing-function: linear, ease-in-out;
    animation-iteration-count: infinite, infinite;
    animation-play-state: running, running
}

.snowflake:nth-of-type(0) {
    top: 1%;
    -webkit-animation-delay: 0s, 0s;
    animation-delay: 0s, 0s
}

.daytwelve img {
    filter: invert();
}

.daythirteen {
    position: absolute;
    top: 1000px;
    left: 100px;
    font-size: 4em;
    font-weight: 900;
    background: linear-gradient(to right, rgb(255, 97, 97),
            rgb(255, 139, 97),
            rgb(255, 173, 97),
            rgb(255, 221, 97),
            rgb(234, 255, 97),
            rgb(197, 255, 97),
            rgb(123, 255, 97),
            rgb(97, 255, 215),
            rgb(97, 226, 255),
            rgb(97, 181, 255),
            rgb(97, 136, 255),
            rgb(97, 97, 255),
            rgb(136, 97, 255),
            rgb(179, 97, 255),
            rgb(208, 97, 255),
            rgb(247, 97, 255),
            rgb(255, 97, 208));
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.daythirteen :hover {
    opacity: 0;
}

.dayfourteen {
    position: absolute;
    top: 1000px;
    rotate: 90deg;
    line-height: 0.3;
    color: mediumblue;
}

.dayfifteen {
    position: absolute;
    top: 1200px;
    right: 500px;
    width: 500px;
    font-size: 2.5em;
    filter: blur(0.8px);
}

.dot {
    position: absolute;
    width: 25px;
    height: 25px;
    background-color: rgb(255, 139, 97);
    border-radius: 50%;
    display: inline-block;
}

#dotone {
    top: 750px;
}

#dottwo {
    top: 800px;
    right: 500px;
}

#dotthree {
    top: 950px;
    right: 400px;
}

#dotfour {
    top: 1050px;
    right: 350px;
}

#dotfive {
    top: 1200px;
    right: 350px;
}

.dayseventeen {
    font-size: 1.5em;
}

.spot {
    position: absolute;
    border-radius: 50%;
    display: inline-block;
    opacity: 50%;
}

#spotone {
    top: 900px;
    left: 200px;
    width: 250px;
    height: 250px;
    background-color: deepskyblue;
}

#spottwo {
    top: 1200px;
    left: 500px;
    width: 100px;
    height: 100px;
    background-color: deepskyblue;
}

#spotthree {
    top: 150px;
    right: 400px;
    width: 150px;
    height: 150px;
    background-color: deepskyblue;
}

.dayeighteen {
    opacity: 15%;
    position: relative;
    top: 500px;
}

.dayeighteen img {
    width: 300px;
}

.daynineteen {
    color: white;
    background-color: deeppink;
    position: relative;
    top: -40px;
}

.daytwenty {
    color: saddlebrown;
}

#daytwentyone {
    position: absolute;
    top: 1400px;
    right: 250px;
    width: 150px;
    background-color: white;
    border-radius: 50%;
    opacity: 50%;
}

#daytwentytwo {
    position: absolute;
    top: 1450px;
    right: 250px;
    width: 150px;
    background-color: white;
    border-radius: 50%;
    opacity: 50%;
}

#daytwentythree {
    position: absolute;
    top: 1500px;
    right: 250px;
    width: 150px;
    background-color: white;
    border-radius: 50%;
    opacity: 50%;
}

.daytwentyone {
    color: white;
    filter: blur(1.5px);
    width: 400px;
}