.background-wrapper.day-background {
    background-color: #87cefa;
    height: 100%;
    min-width: 70%;
    max-width: 100vw;
    max-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: absolute;
    z-index: -20;
    overflow: hidden;
    top: 0%;
    right: 0%;
}

.scene {    
    width: 100%;
    height: 60%;
    display: flex;
    flex-direction: column-reverse;
}

.cloud {
    top: 5%;
    right: 20%;
    position: absolute;
    filter: blur(0.4rem);
    width: 30%;
    height: 10%;
}

.cloud1 {
    width: 100%;
    height: 100%;
    background-color: white;
    clip-path: polygon(
        0% 100%,
        10% 20%,
        30% 40%,
        70% 5%,
        95% 50%,
        80% 80%,
        70% 95%,
        50% 70%,
        30% 90%
    );
}

.rye-wrapper {
    width: 100%;
    height: 20%;
    position: relative;
}

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

.rye {
    width: 100%;
    height: 100%;
    background-color: #ffff00;
    position: absolute;
    overflow: hidden;
}

.rye-strands {
    min-width: 100%;
    min-height: 100%;
    background-image: repeating-linear-gradient(
        var(--rotate),
        #fff000 0px, #fff000 5px, transparent 5px,  transparent 10px
    );
    position: absolute;
    animation: 5s linear 0s infinite forwards alternate rye-animation;
}

@keyframes rye-animation {
  from {
    --rotate: 85deg;
  }
  to {
    --rotate: 95deg;
  }
}

.holden {
    position: absolute;
    top: -2rem;
    animation: 20s linear 0s infinite forwards holden-walk, 
        0.5s ease-in-out 0s infinite alternate walking-wobble;
}

.holden-hat {
    top: 0;
    background-color: red;
    width: 2rem;
    height: 1.5rem;
    position: relative;
}

.holden-hat-brim {
    position: absolute;
    height: 0.5em;
    width: 1em;
    right: -1rem;    
    top: 0.5em;
    background-color: rgb(201, 41, 41);
}

.holden-hat-ear {
    position: absolute;
    width: 1.5em;
    height: 2em;
    margin-left: 0.25em;
    background-color: rgb(201, 41, 41);
}

.holden-face {
    background-color: blanchedalmond;
    width: 110%;
    height: 100%;
    position: absolute;
    right: -0.2rem;
    top: 0.6rem;
}

@keyframes holden-walk {
    0% {left: 25%;}
    49% {transform: rotateY(0deg);}
    50% {left: 75%;transform: rotateY(180deg);}
    100% {left: 25%;transform: rotateY(180deg);}
}

@keyframes walking-wobble {
    from {
        top: -2rem;
    }
    to {
        top: -1.75rem;
    }
}

.child1 {
    background-image: repeating-linear-gradient(
        45deg, 
        white 0%, white 2px, 
        transparent 2px, transparent 6px
    ), repeating-linear-gradient(
        -45deg, 
        white 0%, white 2px, 
        transparent 2px, transparent 6px
    );
    width: 3rem;
    height: 3rem;
    position: absolute;
    top: -3rem;
    clip-path: polygon(0% 50%, 100% 100%, 100% 0%);
    animation: 25s linear -10s infinite forwards child1-walk,
        0.6s ease-in-out 0s infinite alternate walking-wobble;
}

@keyframes child1-walk {
    0% {left: 20%;}
    49% {transform: rotateY(0deg);}
    50% {left: 70%;transform: rotateY(180deg);}
    100% {left: 20%;transform: rotateY(180deg);}
}

.child2 {

}

.child3 {
    
}

.cliff {
    background-color: gray;
    width: 100%;
    height: 40%;
    position: relative;
}

.rock-terrace {
    position: absolute;
    height: 66%;
    width: 50%;
    bottom: 0;
    left: 0;
    background-color: hsl(0, 0%, 46%);
    border-top-right-radius: 10rem;
}

.waterfall {
    background-color: hsl(201, 63%, 67%);
    width: 4%;
    min-width: 2rem;
    position: absolute;
    right: 10%;
    height: 100%;
    overflow: hidden;
}

.water-particle {
    position: absolute;
    top: 10%;
}

@keyframes fall {
    from {
        top: -30%;
    }
    to {
        top: 130%;
    }
}

div.waterfall :nth-child(1) {
    background-color: hsl(201, 70%, 67%);
    right: 10%;
    width: 20%;
    height: 5%;
    animation: 10s linear -5s infinite forwards fall;
}

div.waterfall :nth-child(2) {
    background-color: hsl(201, 63%, 64%);
    right: 50%;
    width: 30%;
    height: 12%;
    animation: 10s linear -2s infinite forwards fall;
}

div.waterfall :nth-child(3) {
    background-color: hsl(201, 60%, 63%);
    right: 70%;
    width: 20%;
    height: 15%;
    animation: 10s linear -7s infinite forwards fall;
}