#movement-objects {
    position: absolute;
    z-index: 5;
    width: 100%;
    height: 100%;
}

#sun,
#moon {
    position: absolute;
    width: 10.5em;
    height: 10.5em;
    margin: -5.25em 0 0 -5.25em;
    z-index: 3;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

#sun-wrapper,
#moon-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

#sun-core {
    position: absolute;
    width: 5em;
    height: 5em;
    border-radius: 50%;
    background-color: #f9f925;
    z-index: 4;
}

#moon-core {
    position: absolute;
    height: 3.75em;
    width: 3.75em;
    box-shadow: 1.25em -1.25em 0 0 #f8f8f1;
    border-radius: 50%;
    transform: rotate(180deg);
    margin-bottom: 40px;
    margin-left: 40px;
    z-index: 4;
}

.sun-ray,
.moon-ray {
    position: absolute;
    width: 5em;
    height: 5em;
    border-radius: 50%;
}

#sun-ray-1 {
    background-color: rgba(233, 240, 22, 0.1);
    width: 6.5em;
    height: 6.5em;
}

#sun-ray-2 {
    background-color: rgba(233, 240, 22, 0.15);
    width: 8.5em;
    height: 8.5em;
}

#sun-ray-3 {
    background-color: rgba(233, 240, 22, 0.1);
    width: 10.5em;
    height: 10.5em;
}

#moon-ray-1 {
    background-color: rgba(255, 255, 255, 0.154);
    width: 6.5em;
    height: 6.5em;
}

#moon-ray-2 {
    background-color: rgba(255, 255, 255, 0.1);
    width: 8.5em;
    height: 8.5em;
}

#moon-ray-3 {
    background-color: rgba(255, 255, 255, 0.1);
    width: 10.5em;
    height: 10.5em;
}

.background {
    opacity: 0;
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
    transition: opacity 4s;
    overflow: hidden;
}

#clouds {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 6;
    overflow: hidden;
}

.cloud-set {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.cloud {
    width: min(400px, 75vw);
    height: min(80px, 15vw);
    left: 100%;
    z-index: 4;
    position: absolute;
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 70%, rgba(0, 0, 0, 0) 100%);
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 70%, rgba(0, 0, 0, 0) 100%);
    opacity: 0.5;
    animation: cloud-drift 150s linear infinite;
    will-change: transform;
}

.cloud1 {
    background-image: url('assets/cloud1.png');
}

.cloud2 {
    background-image: url('assets/cloud2.png');
}

.cloud3 {
    background-image: url('assets/cloud3.png');
}

.cloud4 {
    background-image: url('assets/cloud4.png');
}

.cloud5 {
    background-image: url('assets/cloud5.png');
}

@keyframes cloud-drift {
    to {
        transform: translate3d(calc(-100vw - 100%), 0, 0);
    }
}

#stars {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 7;
    opacity: 0;
    transition: opacity 4s;
}

.star {
    height: 0.15em;
    width: 0.15em;
    background-color: #fff;
    position: absolute;
    border-radius: 50%;
    animation: twinkle 14s infinite forwards;
    z-index: 5;
    transition: opacity 2s ease-in-out;
}

@keyframes twinkle {
    0% {
        transform: scale(1);
        opacity: 0.5;
    }

    10% {
        transform: scale(1);
        opacity: 0.5;
    }

    53% {
        transform: scale(1.1);
        opacity: 0.8;
    }

    55% {
        transform: scale(1.1);
        opacity: 0.8;
    }

    98% {
        transform: scale(1);
        opacity: 0.5;
    }

    100% {
        transform: scale(1);
        opacity: 0.5;
    }
}

.shooting-star {
    position: absolute;
    width: 2px;
    height: 2px;
    background: white;
    border-radius: 50%;
    animation: shootingStar 4s linear infinite;
    animation-delay: 10s;
    opacity: 0;
    z-index: 6;
}

@keyframes shootingStar {
    0% {
        transform: translate(0, 0);
        opacity: 1;
    }
    100% {
        transform: translate(100vw, 100vh);
        opacity: 0;
    }
}

#background-sunrise {
    background: hsla(54, 100%, 90%, 1);
    background: linear-gradient(90deg, hsla(54, 100%, 90%, 1) 0%, hsla(73, 78%, 82%, 1) 0%, hsla(72, 94%, 87%, 1) 15%, hsla(71, 86%, 84%, 1) 28%, hsla(109, 60%, 84%, 1) 50%, hsla(147, 48%, 81%, 1) 63%, hsla(173, 51%, 74%, 1) 75%, hsla(191, 72%, 71%, 1) 90%, hsla(201, 100%, 70%, 1) 100%);
    background: -moz-linear-gradient(90deg, hsla(54, 100%, 90%, 1) 0%, hsla(73, 78%, 82%, 1) 0%, hsla(72, 94%, 87%, 1) 15%, hsla(71, 86%, 84%, 1) 28%, hsla(109, 60%, 84%, 1) 50%, hsla(147, 48%, 81%, 1) 63%, hsla(173, 51%, 74%, 1) 75%, hsla(191, 72%, 71%, 1) 90%, hsla(201, 100%, 70%, 1) 100%);
    background: -webkit-linear-gradient(90deg, hsla(54, 100%, 90%, 1) 0%, hsla(73, 78%, 82%, 1) 0%, hsla(72, 94%, 87%, 1) 15%, hsla(71, 86%, 84%, 1) 28%, hsla(109, 60%, 84%, 1) 50%, hsla(147, 48%, 81%, 1) 63%, hsla(173, 51%, 74%, 1) 75%, hsla(191, 72%, 71%, 1) 90%, hsla(201, 100%, 70%, 1) 100%);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr="#FFFACC", endColorstr="#E5F5AC", GradientType=1);
    opacity: 1;
}

#background-day {
    background: hsla(178, 100%, 90%, 1);
    background: linear-gradient(90deg, hsla(178, 100%, 90%, 1) 0%, hsla(176, 100%, 90%, 1) 0%, hsla(178, 93%, 88%, 1) 14%, hsla(185, 97%, 88%, 1) 28%, hsla(183, 78%, 85%, 1) 41%, hsla(196, 84%, 71%, 1) 72%, hsla(203, 83%, 53%, 1) 100%);
    background: -moz-linear-gradient(90deg, hsla(178, 100%, 90%, 1) 0%, hsla(176, 100%, 90%, 1) 0%, hsla(178, 93%, 88%, 1) 14%, hsla(185, 97%, 88%, 1) 28%, hsla(183, 78%, 85%, 1) 41%, hsla(196, 84%, 71%, 1) 72%, hsla(203, 83%, 53%, 1) 100%);
    background: -webkit-linear-gradient(90deg, hsla(178, 100%, 90%, 1) 0%, hsla(176, 100%, 90%, 1) 0%, hsla(178, 93%, 88%, 1) 14%, hsla(185, 97%, 88%, 1) 28%, hsla(183, 78%, 85%, 1) 41%, hsla(196, 84%, 71%, 1) 72%, hsla(203, 83%, 53%, 1) 100%);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr="#CDFFFD", endColorstr="#CCFFFC", GradientType=1);
}

#background-sunset {
    background: hsla(33, 99%, 72%, 1);
    background: linear-gradient(90deg, hsla(33, 99%, 72%, 1) 0%, hsla(19, 100%, 75%, 1) 19%, hsla(9, 98%, 75%, 1) 34%, hsla(5, 88%, 74%, 1) 47%, hsla(359, 74%, 72%, 1) 61%, hsla(350, 62%, 64%, 1) 75%, hsla(338, 50%, 55%, 1) 98%);
    background: -moz-linear-gradient(90deg, hsla(33, 99%, 72%, 1) 0%, hsla(19, 100%, 75%, 1) 19%, hsla(9, 98%, 75%, 1) 34%, hsla(5, 88%, 74%, 1) 47%, hsla(359, 74%, 72%, 1) 61%, hsla(350, 62%, 64%, 1) 75%, hsla(338, 50%, 55%, 1) 98%);
    background: -webkit-linear-gradient(90deg, hsla(33, 99%, 72%, 1) 0%, hsla(19, 100%, 75%, 1) 19%, hsla(9, 98%, 75%, 1) 34%, hsla(5, 88%, 74%, 1) 47%, hsla(359, 74%, 72%, 1) 61%, hsla(350, 62%, 64%, 1) 75%, hsla(338, 50%, 55%, 1) 98%);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr="#FEBF73", endColorstr="#FFA77E", GradientType=1);
}

#background-nightrise {
    background: hsla(23, 95%, 77%, 1);
    background: linear-gradient(90deg, hsla(23, 95%, 77%, 1) 0%, hsla(21, 68%, 75%, 1) 12%, hsla(17, 30%, 72%, 1) 23%, hsla(225, 18%, 66%, 1) 39%, hsla(217, 33%, 61%, 1) 51%, hsla(218, 31%, 60%, 1) 62%, hsla(223, 30%, 54%, 1) 75%, hsla(231, 44%, 35%, 1) 99%);
    background: -moz-linear-gradient(90deg, hsla(23, 95%, 77%, 1) 0%, hsla(21, 68%, 75%, 1) 12%, hsla(17, 30%, 72%, 1) 23%, hsla(225, 18%, 66%, 1) 39%, hsla(217, 33%, 61%, 1) 51%, hsla(218, 31%, 60%, 1) 62%, hsla(223, 30%, 54%, 1) 75%, hsla(231, 44%, 35%, 1) 99%);
    background: -webkit-linear-gradient(90deg, hsla(23, 95%, 77%, 1) 0%, hsla(21, 68%, 75%, 1) 12%, hsla(17, 30%, 72%, 1) 23%, hsla(225, 18%, 66%, 1) 39%, hsla(217, 33%, 61%, 1) 51%, hsla(218, 31%, 60%, 1) 62%, hsla(223, 30%, 54%, 1) 75%, hsla(231, 44%, 35%, 1) 99%);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr="#FCB98F", endColorstr="#EBB496", GradientType=1);
}

#background-night {
    background: hsla(242, 58%, 62%, 1);
    background: linear-gradient(90deg, hsla(242, 58%, 62%, 1) 0%, hsla(237, 56%, 61%, 1) 17%, hsla(240, 43%, 55%, 1) 45%, hsla(246, 38%, 44%, 1) 66%, hsla(250, 38%, 38%, 1) 81%, hsla(261, 47%, 25%, 1) 100%);
    background: -moz-linear-gradient(90deg, hsla(242, 58%, 62%, 1) 0%, hsla(237, 56%, 61%, 1) 17%, hsla(240, 43%, 55%, 1) 45%, hsla(246, 38%, 44%, 1) 66%, hsla(250, 38%, 38%, 1) 81%, hsla(261, 47%, 25%, 1) 100%);
    background: -webkit-linear-gradient(90deg, hsla(242, 58%, 62%, 1) 0%, hsla(237, 56%, 61%, 1) 17%, hsla(240, 43%, 55%, 1) 45%, hsla(246, 38%, 44%, 1) 66%, hsla(250, 38%, 38%, 1) 81%, hsla(261, 47%, 25%, 1) 100%);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr="#6864D6", endColorstr="#6267D3", GradientType=1);
}

#background-nightset {
    background: hsla(236, 54%, 95%, 1);
    background: linear-gradient(90deg, hsla(236, 54%, 95%, 1) 0%, hsla(228, 14%, 93%, 1) 11%, hsla(268, 29%, 87%, 1) 26%, hsla(267, 35%, 81%, 1) 38%, hsla(270, 30%, 72%, 1) 49%, hsla(267, 33%, 67%, 1) 62%, hsla(266, 37%, 64%, 1) 71%, hsla(265, 36%, 59%, 1) 84%, hsla(264, 37%, 53%, 1) 93%, hsla(264, 38%, 47%, 1) 100%);
    background: -moz-linear-gradient(90deg, hsla(236, 54%, 95%, 1) 0%, hsla(228, 14%, 93%, 1) 11%, hsla(268, 29%, 87%, 1) 26%, hsla(267, 35%, 81%, 1) 38%, hsla(270, 30%, 72%, 1) 49%, hsla(267, 33%, 67%, 1) 62%, hsla(266, 37%, 64%, 1) 71%, hsla(265, 36%, 59%, 1) 84%, hsla(264, 37%, 53%, 1) 93%, hsla(264, 38%, 47%, 1) 100%);
    background: -webkit-linear-gradient(90deg, hsla(236, 54%, 95%, 1) 0%, hsla(228, 14%, 93%, 1) 11%, hsla(268, 29%, 87%, 1) 26%, hsla(267, 35%, 81%, 1) 38%, hsla(270, 30%, 72%, 1) 49%, hsla(267, 33%, 67%, 1) 62%, hsla(266, 37%, 64%, 1) 71%, hsla(265, 36%, 59%, 1) 84%, hsla(264, 37%, 53%, 1) 93%, hsla(264, 38%, 47%, 1) 100%);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr="#EBECF9", endColorstr="#EAEBEF", GradientType=1);
}