* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: rgb(12, 0, 24);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100vw;
    height: 100vh;
}

svg {
    position: absolute;
}

#container {
    width: 60vw;
    height: 42.42vw;
    background: radial-gradient(farthest-corner at 50% 47%, #c44443, #6128a9);
    overflow: hidden;
    position: relative;
}

#sun {
    width: 27%;
    height: 34%;
    background: radial-gradient(farthest-corner at 50% 50%, #db9148, #da9351);
    border-radius: 50%;
    position: absolute;
    top: 48%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#sun svg {
    width: 100%;
    height: 100%;
    right: 0;
}

#glare {
    position: absolute;
    top: 0;
    left: 0;
    background: radial-gradient(closest-side at 50% 50%, #c74d4455, #c7744400);
    width: 100%;
    height: 100%;
    mix-blend-mode: overlay;
}


.hill {
    background: linear-gradient(to bottom, #9037af, #22133e 50%);
    position: absolute;
}

.road {
    background: linear-gradient(to bottom, #6a1d81, #1e052c 50%);
    position: absolute;
    height: 100%;
    top: 0;
}

.roadClip {
    background: linear-gradient(to bottom, #9037af, #22133e 50%);
    position: absolute;
    height: 100%;
    top: 0;
}

#hill1 {
    width: 67%;
    height: 40%;
    left: 0;
    top: 85%;
    border-top-right-radius: 10vw;
    overflow: hidden;
}

#hill1 svg {
    position: absolute;
    width: 200%;
    height: 200%;
    right: 0;
    top: 0;
}

#hill1 .road {
    width: 25%;
    right: 18%;
    border-top-right-radius: 50%;
    border-bottom-right-radius: 50%;
}

#hill1 .roadClip {
    width: 15%;
    right: 35%;
}

#hill2 {
    width: 66%;
    height:40%;
    right: 0;
    top: 73%;
    border-top-left-radius: 10vw;
    overflow: hidden;
}

#hill2 svg {
    position: absolute;
    width: 200%;
    height: 200%;
    left: 0;
}

#hill2 .road {
    width: 30%;
    left: 6%;
    transform: skew(-30deg);
    border-top-left-radius: 50%;
    border-bottom-left-radius: 50%;
}

#hill2 .roadClip {
    width: 20%;
    left: 22%;
}

#hill3 {
    width: 77%;
    height: 40%;
    left: 0;
    top: 62%;
    border-top-right-radius: 10vw;
    overflow: hidden;
}

#hill3 svg {
    position: absolute;
    width: 200%;
    height: 200%;
    right: 0;
}

#hill3 .road {
    width: 21%;
    right: 10%;
    border-top-right-radius: 50%;
    border-bottom-right-radius: 50%;
    transform: skew(20deg);
}

#hill3 .roadClip {
    width: 13%;
    right: 21%;
}

#hill4 {
    width: 77%;
    height: 25%;
    right: 0;
    top: 55%;
    border-top-left-radius: 10vw;
    overflow: hidden;
}

#hill4 svg {
    position: absolute;
    width: 200%;
    height: 200%;
    left: 0;
}

#hill4 .road {
    width: 20%;
    left: 29%;
    transform: skew(-25deg);
    border-top-left-radius: 50%;
    border-bottom-left-radius: 50%;
}

#hill4 .roadClip {
    width: 15%;
    left: 38%;
}

#hill5 {
    width: 74%;
    height: 40%;
    left: 0;
    top: 50%;
    border-top-right-radius: 10vw;
    overflow: hidden;
}

#hill5 svg {
    position: absolute;
    width: 200%;
    height: 200%;
    right: 0;
}

#hill5 .road {
    width: 15%;
    right: 6%;
    border-top-right-radius: 50%;
    border-bottom-right-radius: 50%;
    transform: skew(25deg);
}

#hill5 .roadClip {
    width: 10%;
    right: 12%;
}

#hill6 {
    width: 68%;
    height: 50%;
    right: 0;
    top: 47%;
    border-top-left-radius: 8vw;
    overflow: hidden;
}

#hill6 svg {
    position: absolute;
    width: 200%;
    height: 200%;
    left: 0;
}

#hill6 .road {
    width: 25%;
    left: 15%;
    transform: skew(-25deg);
    border-top-left-radius: 50%;
    border-bottom-left-radius: 50%;
}

#hill6 .roadClip {
    width: 22%;
    left: 20%;
}


.lines {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
}


#hill6 .lines {
    height: 80%;
}

#hill4 .lines {
    height: 160%;
}

.line, .lineReverse {
    background-color: #ffffff33;
    mix-blend-mode: overlay;
    width: 80%;
    height: 0.3vw;
    margin-top: 0.45vw;
    margin-bottom: 0.45vw;
    position: relative;
    top: 0;
}

#hill .line {
    z-index: 20;
    background-color: #ffffff55;  
}

.line1Reverse {
    right: 10%;
}

.line2Reverse {
    right: 30%;
}

.line3Reverse {
    right: -20%;
}

.line4Reverse {
    right: 50%;
}

.line5Reverse {
    right: -10%;
}

.line6Reverse {
    right: 15%;
}

.line7Reverse {
    right: 30%;
}

.line8Reverse {
    right: -20%;
}

.line9Reverse {
    right: 10%;
}

.line10Reverse {
    right: 20%;
}

.line11Reverse {
    right: 40%;
}

.line12Reverse {
    right: -5%;
}

.line13Reverse {
    right: 15%;
}

.line14Reverse {
    right: 30%;
}

.line15Reverse {
    right: 45%;
}

.line16Reverse {
    right: -25%;
}

.line1 {
    left: 10%;
}

.line2 {
    left: 30%;
}

.line3 {
    left: -20%;
}

.line4 {
    left: 50%;
}

.line5 {
    left: -10%;
}

.line6 {
    left: 15%;
}

.line7 {
    left: 30%;
}

.line8 {
    left: -20%;
}

.line9 {
    left: 10%;
}

.line10 {
    left: 20%;
}

.line11 {
    left: 40%;
}

.line12 {
    left: -5%;
}

.line13 {
    left: 15%;
}

.line14 {
    left: 30%;
}

.line15 {
    left: 45%;
}

.line1 {
    left: -25%;
}

.houseOneContainer {
    position: absolute;
}

.houseTwoContainer {
    position: absolute;
}

.houseThreeContainer {
    position: absolute;
}

#houseOneContainer1 {
    bottom: 15%;
    left: 10%;
    width: 7vw;
    height: 2.33vw;
}

#houseOneContainer2 {
    bottom: 37.8%;
    left: 10%;
    width: 5.8vw;
    height: 1.93vw;
    transform: scaleX(-1);
    opacity: 85%;
}

#houseOneContainer3 {
    bottom: 45%;
    right: 18%;
    width: 4.9vw;
    height: 1.63vw;
    opacity: 75%;
}

#houseOneContainer4 {
    bottom: 53%;
    right: 22%;
    width: 3vw;
    height: 1vw;
    transform: scaleX(-1);
    opacity: 65%;
}

#houseTwoContainer1 {
    bottom: 27%;
    right: 10%;
    width: 9vw;
    height: 2.33vw;
    opacity: 97%;
}

#houseTwoContainer2 {
    bottom: 50%;
    left: 5%;
    width: 4.6vw;
    height: 1.2vw;
    opacity: 68%;
    transform: scaleX(-1);
}

#houseThreeContainer1 {
    bottom: 38%;
    left: 30%;
    width: 7.69vw;
    height: 2vw;
    opacity: 85%;
}

#houseThreeContainer2 {
    bottom: 50%;
    left: 38.5%;
    width: 3.84vw;
    height: 1vw;
    opacity: 75%;
    transform: scaleX(-1);
}

.houseOneLeft {
    background-color: #b56693;
    border-radius: 15%;
    width: 50%;
    height: 70%;
    position: absolute;
    left: 0;
    bottom: 0;
}

.houseOneRight {
    background-color: #a24977;
    border-radius: 15%;
    width: 70%;
    height: 100%;
    position: absolute;
    right: -12%;
    bottom: 0;
}

.houseOneLeftDoor {
    background-color: #dfa8bf;
    height: 66%;
    width: 15%;
    border-radius: 15%;
    position: absolute;
    bottom: 0;
    left: 12%;
}

.houseOneLeftWindow {
    height: 55%;
    width: 45%;
    position: absolute;
    bottom: 20%;
    right: 22%;
}

.houseOneLeftWindowTop {
    width: 100%;
    height: 50%;
}

.houseOneLeftWindowRight, .houseOneLeftWindowLeft {
    background-color: #dfa8bf;
    width: 30%;
    height: 50%;
    position: absolute;
    border-radius: 30%;
}

.houseOneLeftWindowRight {
    top: 0;
    right: 0;
}

.houseOneLeftWindowLeft {
    top: 0;
    left: 0;
}

.houseOneLeftWindowBottom {
    height: 20%;
    width: 80%;
    background-color: #dfa8bf;
    position: absolute;
    bottom: 0;
    left: 10%;
    border-radius: 20%;
}

.houseOneRightWindowLeft1, .houseOneRightWindowLeft2 {
    width: 17%;
    height: 35%;
    border-radius: 30%;
    background-color: #dfa8bf;
    position: absolute;
    left: 10%;
}

.houseOneRightWindowLeft1{
    top: 10%;
}

.houseOneRightWindowLeft2{
    bottom: 10%;
}

.houseOneRightWindowMid1, .houseOneRightWindowMid2, .houseOneRightWindowMid3 {
    width: 34%;
    height: 5%;
    border-radius: 20%;
    background-color: #dfa8bf;
    position: absolute;
    left: 37%;
}

.houseOneRightWindowMid1 {
    top: 10%
}

.houseOneRightWindowMid2 {
    top: 20%
}

.houseOneRightWindowMid3 {
    top: 30%
}

.houseOneRightDoor1 {
    background-color: #dfa8bf;
    height: 48%;
    width: 12%;
    border-radius: 20%;
    position: absolute;
    bottom: 0;
    left: 37%;
}

.houseOneRightDoor2 {
    background-color: #dfa8bf;
    height: 48%;
    width: 12%;
    border-radius: 20%;
    position: absolute;
    bottom: 0;
    right: 34%;
}

.houseOneRightWindowRight1, .houseOneRightWindowRight2, .houseOneRightWindowRight3 {
    width: 10%;
    height: 20%;
    border-radius: 30%;
    background-color: #dfa8bf;
    position: absolute;
    right: 10%;
}

.houseOneRightWindowRight1{
    top: 10%;
}

.houseOneRightWindowRight2{
    top: 40%;
}

.houseOneRightWindowRight3{
    top: 70%;
}

.houseTwoLeft {
    background-color: #b56693;
    border-radius: 15%;
    width: 50%;
    height: 80%;
    position: absolute;
    left: -10%;
    bottom: 0;
}

.houseTwoMiddle {
    background-color: #a24977;
    border-radius: 15%;
    width: 50%;
    height: 100%;
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
}

.houseTwoRight {
    background-color: #b56693;
    border-radius: 15%;
    width: 50%;
    height: 70%;
    position: absolute;
    right: -10%;
    bottom: 0;
}

.houseTwoLeftTop {
    position: absolute;
    left: 10%;
    top: 20%;
    width: 50%;
    height: 25%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.houseTwoLeftTopWindow {
    width: 20%;
    height: 100%;
    background-color: #dfa8bf;
    border-radius: 20%;
}

.houseTwoLeftBottom {
    position: absolute;
    left: 10%;
    bottom: 15%;
    width: 50%;
    height: 30%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

.houseTwoLeftBottomWindow {
    width: 100%;
    height: 10%;
    background-color: #dfa8bf;
    border-radius: 20%;
}

.houseTwoRightLeft {
    position: absolute;
    right: 34%;
    bottom: 20%;
    width: 30%;
    height: 60%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

.houseTwoRightLeftWindow {
    width: 100%;
    height: 15%;
    background-color: #dfa8bf;
    border-radius: 20%;
}

.houseTwoRightDoor {
    position: absolute;
    right: 12%;
    bottom: 0;
    width: 15%;
    height: 70%;
    border-radius: 20%;
    background-color: #dfa8bf;
} 

.houseTwoMiddleTop {
    position: absolute;
    right: 10%;
    top: 12%;
    width: 80%;
    height: 15%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

.houseTwoMiddleTopWindow {
    width: 100%;
    height: 30%;
    background-color: #dfa8bf;
    border-radius: 20%;
}

.houseTwoMiddleMiddle {
    position: absolute;
    right: 15%;
    top: 32%;
    width: 70%;
    height: 20%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.houseTwoMiddleMiddleWindow {
    width: 16%;
    height: 100%;
    background-color: #dfa8bf;
    border-radius: 20%;
}

.houseTwoMiddleBottom {
    position: absolute;
    left: 50%;
    bottom: 5%;
    width: 35%;
    height: 30%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.houseTwoMiddleBottomWindow {
    width: 30%;
    height: 100%;
    background-color: #dfa8bf;
    border-radius: 20%;
}

.houseTwoMiddleDoor1, .houseTwoMiddleDoor2 {
    position: absolute;
    bottom: 0;
    width: 15%;
    height: 40%;
    border-radius: 20%;
    background-color: #dfa8bf;
}

.houseTwoMiddleDoor1 {
    right: 12%;
}

.houseTwoMiddleDoor2 {
    left: 12%;
}

.houseThreeLeft {
    background-color: #b56693;
    border-radius: 15%;
    width: 50%;
    height: 100%;
    position: absolute;
    left: -10%;
    bottom: 0;
}

.houseThreeMiddle {
    background-color: #a24977;
    border-radius: 15%;
    width: 50%;
    height: 70%;
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
}

.houseThreeRight {
    background-color: #b56693;
    border-radius: 15%;
    width: 50%;
    height: 85%;
    position: absolute;
    right: -10%;
    bottom: 0;
}

.houseThreeLeftTopLeft {
    position: absolute;
    left: 10%;
    top: 10%;
    width: 35%;
    height: 25%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.houseThreeLeftTopLeftWindow {
    width: 18%;
    height: 100%;
    background-color: #dfa8bf;
    border-radius: 20%;
}

.houseThreeLeftTopRight {
    position: absolute;
    left: 53%;
    top: 6%;
    width: 35%;
    height: 25%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

.houseThreeLeftTopRightWindow {
    width: 100%;
    height: 18%;
    background-color: #dfa8bf;
    border-radius: 20%;
}

.houseThreeLeftBottom {
    position: absolute;
    left: 35%;
    top: 60%;
    width: 30%;
    height: 25%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.houseThreeLeftBottomWindow {
    width: 25%;
    height: 100%;
    background-color: #dfa8bf;
    border-radius: 20%;
}

.houseThreeLeftDoor {
    position: absolute;
    bottom: 0;
    left: 12%;
    width: 15%;
    height: 40%;
    border-radius: 20%;
    background-color: #dfa8bf;
}

.houseThreeRightRight {
    position: absolute;
    right: 55%;
    top: 10%;
    width: 10%;
    height: 80%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

.houseThreeRightRightWindow {
    width: 100%;
    height: 25%;
    background-color: #dfa8bf;
    border-radius: 20%;
}

.houseThreeLeftRightTop {
    position: absolute;
    top: 10%;
    right: 20%;
    width: 20%;
    height: 45%;
    background-color: #dfa8bf;
    border-radius: 20%; 
}

.houseThreeLeftRightBottom {
    position: absolute;
    top: 60%;
    right: 20%;
    width: 20%;
    height: 25%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

.houseThreeLeftRightBottomWindow {
    width: 100%;
    height: 35%;
    background-color: #dfa8bf;
    border-radius: 20%;
}

.houseThreeMiddleLeft {
    position: absolute;
    top: 20%;
    left: 10%;
    width: 30%;
    height: 60%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

.houseThreeMiddleLeftWindow {
    width: 100%;
    height: 18%;
    background-color: #dfa8bf;
    border-radius: 20%;
}

.houseThreeMiddleDoor {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 12%;
    height: 60%;
    background-color: #dfa8bf;
    border-radius: 20%;
}

.houseThreeMiddleRight {
    position: absolute;
    top: 30%;
    right: 10%;
    width: 20%;
    height: 40%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.houseThreeMiddleRightWindow {
    width: 40%;
    height: 100%;
    background-color: #dfa8bf;
    border-radius: 20%;
}

.cloudContainer {
    display: flex;
    flex-direction: column;
}

.cloud {
   background-color: ivory;
   height: 33.33%;
   border-radius: 0.5vw;
}

@keyframes cloudAnimation {
    from {transform: translateX(-300%);}
    to {transform: translateX(500%);}
}

#cloud1Container {
    position: absolute;
    width: 20vw;
    height: 5.5vw;
    top: 7vw;
    left: -2vw;
    opacity: 12%;
    animation: cloudAnimation 15s linear 0s infinite forwards;
}

#cloud1Top {
    width: 100%;
    transform: translateX(-7vw) translateY(0.5vw);
}

#cloud1Mid {
    width: 100%;
    transform: translateX(5vw);
}

#cloud1Bot {
    width: 100%;
    transform: translateX(0vw) translateY(-0.5vw);
}

#cloud2Container {
    position: absolute;
    width: 20vw;
    height: 5vw;
    top: 15vw;
    left: -7vw;
    opacity: 8%;
    animation: cloudAnimation 15s linear 0s infinite reverse forwards;
}

#cloud2Top {
    width: 100%;
    transform: translateX(3vw) translateY(0.5vw);
}

#cloud2Mid {
    width: 100%;
    transform: translateX(-5vw);
}

#cloud2Bot {
    width: 100%;
    transform: translateX(0vw) translateY(-0.5vw);
}

#cloud3Container {
    position: absolute;
    width: 25vw;
    height: 5vw;
    top: 2vw;
    left: 15vw;
    opacity: 9%;
    animation: cloudAnimation 15s linear 0s infinite forwards;
}

#cloud3Top {
    width: 80%;
    transform: translateX(3vw) translateY(0.5vw);
}

#cloud3Mid {
    width: 100%;
    transform: translateX(0vw);
}

#cloud3Bot {
    width: 100%;
    transform: translateX(5vw) translateY(-0.5vw);
}

#cloud4Container {
    position: absolute;
    width: 25vw;
    height: 5vw;
    top: 7vw;
    right: -5vw;
    opacity: 9%;
    animation: cloudAnimation 15s linear 0s infinite reverse forwards;
}

#cloud4Top {
    width: 80%;
    transform: translateX(8vw) translateY(0.5vw);
}

#cloud4Mid {
    width: 100%;
    transform: translateX(0vw);
}

#cloud4Bot {
    width: 100%;
    transform: translateX(4vw) translateY(-0.5vw);
}

#cloud5Container {
    position: absolute;
    width: 30vw;
    height: 5vw;
    top: 14vw;
    right: 7vw;
    opacity: 9%;
    animation: cloudAnimation 15s linear 0s infinite forwards;
}

#cloud5Top {
    width: 70%;
    transform: translateX(3vw) translateY(0.5vw);
}

#cloud5Mid {
    width: 100%;
    transform: translateX(-3vw);
}

#cloud5Bot {
    width: 100%;
    transform: translateX(5vw) translateY(-0.5vw);
}


.cometContainer {
    display: flex;
    position: absolute;
}


.comets {
    background-color: #f8edc0;
}

#comet1Rotate {
    transform: rotate(25deg);
}

#comet2Rotate {
    transform: rotate(40deg);
}

#comet1Container {
    width: 24vw;
    height: 0.3vw;
    top: 8vw;
    left: 7vw;
    opacity: 30%;
    animation: cometAnimation 10s linear 0s infinite forwards;
}

#comet2Container {
    width: 25vw;
    height: 0.25vw;
    top: 10vw;
    left: 4vw;
    opacity: 40%;
    animation: cometAnimation 15s linear 0s infinite forwards;
}

@keyframes cometAnimation {
    0% {transform: translate(-200%, -150%);}
    100% {transform: translate(300%, 300%);}
}

#cometTail {
    flex-basis: 95%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

#cometTop {
    width: 100%;
    height: 50%;
    border-top-left-radius: 100%;
}


#cometBot {
    width: 100%;
    height: 50%;
    border-bottom-left-radius: 100%;
}

#cometHead {
    width: 2.5%;
    height: 100%;
    border-radius: 50%;
    transform: translateX(-50%);
}

.windmillContainer {
    position: absolute;
}

#windmill1Container {
    width: 2vw;
    height: 5vw;
    left: 8vw;
    bottom: 50%;
}

#windmill1FanContainer {
    transform-origin: center center;
    transform: rotate(0deg);
}

#windmill2Container {
    width: 1.8vw;
    height: 4.5vw;
    left: 12vw;
    bottom: 50%;
}

#windmill2FanContainer {
    transform-origin: center center;
    transform: rotate(-50deg);
}


#windmill3Container {
    width: 1.4vw;
    height: 3.5vw;
    left: 18vw;
    bottom: 50%;
}

#windmill3FanContainer {
    transform-origin: center center;
    transform: rotate(20deg);
}

#windmill4Container {
    width: 2vw;
    height: 5vw;
    right: 17vw;
    bottom: 53%;
}

#windmill4FanContainer {
    transform-origin: center center;
    transform: rotate(75deg);
}

#windmill5Container {
    width: 1.4vw;
    height: 3.5vw;
    right: 5vw;
    bottom: 53%;
}

#windmill5FanContainer {
    transform-origin: center center;
    transform: rotate(40deg);
}

.windmillBaseContainer {
    width: 20%;
    height: 50%;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

.windmillLeg {
    position: absolute;
    bottom: 0;
    left: 50%;
    height: 100%;
    width: 50%;
    background-color: #042206;
}

.windmillLegLeft {
    transform: translateX(-65%) skew(-1deg);
}

.windmillLegRight {
    transform: translateX(-45%) skew(1deg);
}

.windmillFanContainer {
    width: 100%;
    height: 100%;
}

.fanContainer {
    position: absolute;
    top: 20%;
    left: -25%;
    width: 150%;
    height: 60%;
    animation: windmillAnimation 10s linear 0s infinite forwards;
}

@keyframes windmillAnimation {
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}
}

.fan {
    width: 100%;
    height: 3%;
    position: absolute;
    top: 50%;
    left: 0;
    background-color: #031605;
}

.fan1 {
    transform: rotate(30deg);
}

.fan2 {
    transform: rotate(120deg);
}

.wing {
    background-color: #083f2d;
    position: absolute;
    width: 35%;
    height: 300%;
}

.wing1 {
    bottom: 0;
    right: -7%;
}

.wing2 {
    top: 0;
    left: -7%;
}

.windmillCircle {
    width: 0.4vw;
    height: 0.4vw;
    background-color: #083f2d;
    position: absolute;
    left: 50%;
    bottom: 50%;
    transform: translate(-50%, 50%);
    border-radius: 50%;
}


.kite {
    width: 100%;
    height: 100%;
}

@keyframes kiteAnimation {
    0% {transform: rotate(-20deg);}
    100% {transform:  rotate(20deg);}
}

.kiteContainer {
    display: flex;
    position: absolute;
    /* animation: kiteAnimation 2.5s linear 0s infinite alternate forwards; */
}


.kiteWire {
    background-color: #4a3752;
    height: 0.007vw;
    position: absolute;
}

#kite1Wire {
    width: 18.2vw;
    top: 73%;
    left: 53vw;
    transform-origin: top left;
    animation: kite1Wire 2.5s linear 0s infinite alternate forwards;
}

@keyframes kite1Wire {
    0% { transform: rotate(-122deg);}
    100% {transform: rotate(-118deg);}
}

#kite1Container {
    width: 1.8vw;
    height: 0.18vw;
    top: 0;
    right: 0;
    transform: translate(45%, -140%) rotate(90deg);
    align-items: center;
}

.kite1 {
    background-color: rgb(0, 73, 73);
}

#kite2Wire {
    width: 16.5vw;
    top: 55%;
    left: 45vw;
    transform-origin: top left;
    /* transform: rotate(-68deg); */
    animation: kite2Wire 2.5s linear 0s infinite alternate forwards;
}

@keyframes kite2Wire {
    0% { transform: rotate(-66deg);}
    100% {transform: rotate(-70deg);}
}

#kite2Container {
    width: 1.2vw;
    height: 0.2vw;
    top: 0;
    right: 0;
    transform: translate(45%, 0%) rotate(90deg) scaleX(-1);
    align-items: center;
}

.kite2 {
    background-color: rgb(194, 194, 165);
}

#kite3Wire {
    width: 26.1vw;
    top: 85%;
    left: 7vw;
    transform-origin: top left;
    transform: rotate(-73.5deg);
    animation: kite3Wire 2.5s linear 0s infinite alternate forwards;
}

@keyframes kite3Wire {
    0% { transform: rotate(-75.5deg);}
    100% {transform: rotate(-71.5deg);}
}

#kite3Container {
    width: 2.1vw;
    height: .22vw;
    top: 0;
    right: 0;
    transform: translate(40%, -150%) rotate(50deg);
    align-items: center;
}

.kite3 {
    background-color: rgb(79, 82, 133);
}

.kiteTail {
    flex-basis: 70%;
    height: 5%;
    display: flex;
    flex-direction: column;
}

.kiteTop {
    width: 100%;
    height: 50%;
    border-top-left-radius: 100%;
}


.iteBot {
    width: 100%;
    height: 50%;
    border-bottom-left-radius: 100%;
}

.kiteHead {
    flex-basis: 30%;
    height: 100%;
    transform: skew(-10deg) rotate(10deg) translateX(-50%) translateY(50%);
}



@keyframes bushAnimation {
    0% {transform: rotate(-3deg);}
    100% {transform:  rotate(3deg);}
}


@keyframes treeAnimation {
    0% {transform: rotate(-5deg);}
    100% {transform:  rotate(5deg);}
}

.bushContainer {
    position: absolute;
    transform-origin: center bottom;
    animation: treeAnimation 2.5s linear 0s infinite alternate forwards;
}

#bush1Container {
    bottom: 15%;
    left: 48%;
    width: 1.1vw;
    height: 0.73vw;
}

#bush2Container {
    bottom: 15%;
    left: 23%;
    width: 0.9vw;
    height: 0.6vw;
}

#bush3Container {
    bottom: 15%;
    left: 8%;
    width: 0.8vw;
    height: 0.54vw;
}

#bush4Container {
    bottom: 27%;
    right: 46%;
    width: 0.8vw;
    height: 0.54vw;
}

#bush5Container {
    bottom: 27%;
    right: 35%;
    width: 0.75vw;
    height: 0.50vw;
}

#bush6Container {
    bottom: 27%;
    right: 26%;
    width: 0.82vw;
    height: 0.55vw;
}

#bush7Container {
    bottom: 38%;
    left: 48%;
    width: 0.65vw;
    height: 0.43vw;
}

#bush8Container {
    bottom: 38%;
    left: 28%;
    width: 0.65vw;
    height: 0.43vw;
}

#bush9Container {
    bottom: 38%;
    left: 21%;
    width: 0.65vw;
    height: 0.43vw;
}

#bush10Container {
    bottom: 38%;
    left: 6%;
    width: 0.65vw;
    height: 0.43vw;
}

#bush11Container {
    bottom: 45%;
    right: 45%;
    width: 0.55vw;
    height: 0.34vw;
}

#bush12Container {
    bottom: 45%;
    right: 36%;
    width: 0.55vw;
    height: 0.34vw;
}

#bush13Container {
    bottom: 45%;
    right: 5%;
    width: 0.55vw;
    height: 0.34vw;
}

#bush14Container {
    bottom: 50%;
    left: 30%;
    width: 0.48vw;
    height: 0.32vw;
}

#bush15Container {
    bottom: 50%;
    left: 23%;
    width: 0.48vw;
    height: 0.32vw;
}

#bush16Container {
    bottom: 50%;
    left: 1%;
    width: 0.48vw;
    height: 0.32vw;
}

.ChrisTreeContainer {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    transform-origin: center bottom;
    animation: treeAnimation 2.5s linear 0s infinite alternate forwards;
}

#ChrisTree1Container {
    bottom: 15%;
    left: 2%;
    width: 1.4vw;
    height: 3.5vw;
}

#ChrisTree2Container {
    bottom: 15%;
    left: 7%;
    width: 1.32vw;
    height: 3.3vw;
}

#ChrisTree3Container {
    bottom: 15%;
    left: 28%;
    width: 0.9vw;
    height: 2.2vw;
}

#ChrisTree4Container {
    bottom: 15%;
    left: 36%;
    width: 0.85vw;
    height: 2.1vw;
}

#ChrisTree5Container {
    bottom: 27%;
    right: 33%;
    width: 0.8vw;
    height: 2vw;
}

#ChrisTree6Container {
    bottom: 27%;
    right: 36%;
    width: 0.72vw;
    height: 1.8vw;
}

#ChrisTree7Container {
    bottom: 27%;
    right: 10%;
    width: 0.8vw;
    height: 2vw;
}

#ChrisTree8Container {
    bottom: 27%;
    right: 5%;
    width: 0.72vw;
    height: 1.8vw;
}

#ChrisTree9Container {
    bottom: 38%;
    left: -0.3%;
    width: 0.68vw;
    height: 1.7vw;
}

#ChrisTree10Container {
    bottom: 38%;
    left: 21%;
    width: 0.6vw;
    height: 1.5vw;
}

#ChrisTree11Container {
    bottom: 38%;
    left: 26%;
    width: 0.56vw;
    height: 1.4vw;
}

#ChrisTree12Container {
    bottom: 38%;
    left: 45%;
    width: 0.68vw;
    height: 1.7vw;
}

#ChrisTree13Container {
    bottom: 38%;
    left: 49%;
    width: 0.72vw;
    height: 1.8vw;
}

#ChrisTree14Container {
    bottom: 45%;
    right: 3%;
    width: 0.52vw;
    height: 1.3vw;
}

#ChrisTree15Container {
    bottom: 45%;
    right: 13%;
    width: 0.52vw;
    height: 1.3vw;
}

#ChrisTree16Container {
    bottom: 45%;
    right: 33%;
    width: 0.48vw;
    height: 1.15vw;
}

#ChrisTree17Container {
    bottom: 45%;
    right: 49%;
    width: 0.48vw;
    height: 1.15vw;
}

#ChrisTree18Container {
    bottom: 45%;
    right: 53%;
    width: 0.49vw;
    height: 1.1vw;
}

#ChrisTree19Container {
    bottom: 50%;
    left: 35%;
    width: 0.44vw;
    height: 1.1vw;
}

#ChrisTree20Container {
    bottom: 50%;
    left: 18%;
    width: 0.41vw;
    height: 1vw;
}

#ChrisTree21Container {
    bottom: 50%;
    left: 3%;
    width: 0.44vw;
    height: 1.1vw;
}

#ChrisTree22Container {
    bottom: 53%;
    right: 32%;
    width: 0.36vw;
    height: 0.9vw;
}

#ChrisTree23Container {
    bottom: 53%;
    right: 18%;
    width: 0.36vw;
    height: 0.9vw;
}

#ChrisTree24Container {
    bottom: 53%;
    right: 5%;
    width: 0.36vw;
    height: 0.9vw;
}

.treeContainer {
    position: absolute;
    transform-origin: center bottom;
    animation: treeAnimation 2.5s linear 0s infinite alternate forwards;
}

#tree1Container {
    bottom: 15%;
    left: 32%;
    width: 2vw;
    height: 3vw;
}

#tree2Container {
    bottom: 15%;
    left: 30%;
    width: 2.3vw;
    height: 3.5vw;
}

#tree3Container {
    bottom: 27%;
    right: 27%;
    width: 2vw;
    height: 3vw;
}

#tree4Container {
    bottom: 27%;
    right: -0.5%;
    width: 2vw;
    height: 3vw;
}

#tree5Container {
    bottom: 38%;
    left: 23%;
    width: 1.5vw;
    height: 2.2vw;
}

#tree6Container {
    bottom: 38%;
    left: 3%;
    width: 1.7vw;
    height: 2.5vw;
}

#tree7Container {
    bottom: 45%;
    right: -0.6%;
    width: 1.34vw;
    height: 2vw;
}

#tree8Container {
    bottom: 45%;
    right: 8%;
    width: 1.34vw;
    height: 2.1vw;
}

#tree9Container {
    bottom: 45%;
    right: 55%;
    width: 1.30vw;
    height: 1.8vw;
}

#tree10Container {
    bottom: 50%;
    left: 49%;
    width: 1.05vw;
    height: 1.5vw;
}

#tree11Container {
    bottom: 50%;
    left: 32%;
    width: 1.05vw;
    height: 1.4vw;
}

#tree12Container {
    bottom: 50%;
    left: 12%;
    width: 1vw;
    height: 1.3vw;
}

#tree13Container {
    bottom: 50%;
    left: 48%;
    width: 1vw;
    height: 1.3vw;
}

#tree14Container {
    bottom: 53%;
    right: 33%;
    width: 0.7vw;
    height: 0.95vw;
}

#tree15Container {
    bottom: 53%;
    right: 15.5%;
    width: 0.73vw;
    height: 1vw;
}

#tree16Container {
    bottom: 53%;
    right: 15%;
    width: 0.73vw;
    height: 1.1vw;
}

#tree17Container {
    bottom: 53%;
    right: 2%;
    width: 0.7vw;
    height: 1vw;
}


.bushLeft {
    height: 90%;
    width: 70%;
    position: absolute;
    left: -50%;
    bottom: 0;
    border-top-left-radius: 50%;
    border-top-right-radius: 50%;
    border-bottom-left-radius: 20%;
    border-bottom-right-radius: 20%;
    background: linear-gradient(to bottom, #3b9758, #111532);
}

.bushRight {
    height: 80%;
    width: 60%;
    position: absolute;
    right: -50%;
    bottom: 0;
    border-top-left-radius: 50%;
    border-top-right-radius: 50%;
    border-bottom-left-radius: 20%;
    border-bottom-right-radius: 20%;
    background: linear-gradient(to bottom, #3b9758, #111532);
}

.bushMid {
    height: 120%;
    width: 100%;
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    border-top-left-radius: 50%;
    border-top-right-radius: 50%;
    border-bottom-left-radius: 20%;
    border-bottom-right-radius: 20%;
    background: linear-gradient(to bottom, #3b9758, #111532);
}

.ChrisTreeLeavesContainer {
    width: 100%;
    height: 70%;
    position: relative;
    bottom: 40%;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
}

.ChrisTreeLeave {
    height: 15%;
    margin-top: 7%;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(to bottom, #3b9758, #111532);
}

.ChrisTreeLeave9 {
    width: 100%;
}

.ChrisTreeLeave8 {
    width: 90%;
}

.ChrisTreeLeave7 {
    width: 80%;
}

.ChrisTreeLeave6 {
    width: 70%;
}

.ChrisTreeLeave5 {
    width: 60%;
}

.ChrisTreeLeave4 {
    width: 50%;
}

.ChrisTreeLeave3 {
    width: 40%;
}

.ChrisTreeLeave2 {
    width: 30%;
}

.ChrisTreeLeave1 {
    width: 20%;
}

.ChrisTreeTrunk {
    width: 25%;
    height: 50%;
    background: linear-gradient(to bottom, #523a27, #271608);
}

.treeLeaves {
    width: 100%;
    height: 70%;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    border-top-left-radius: 50%;
    border-top-right-radius: 50%;
    border-bottom-left-radius: 30%;
    border-bottom-right-radius: 30%;
    background: linear-gradient(to bottom, #3b9758, #111532);
}

.treeTrunk {
    width: 10%;
    height: 30%;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(to bottom, #523a27, #271608);
}


.tractorContainer {
    position: absolute;
}

#tractorContainer1 {
    width: 2.2vw;
    height: 1.8vw;
    left: 3%;
    bottom: 15%;
}

#tractorContainer2 {
    width: 2vw;
    height: 1.64vw;
    right: 3%;
    bottom: 27%;
    opacity: 90;
}

#tractorContainer3 {
    width: 1.7vw;
    height: 1.39vw;
    right: 40%;
    bottom: 38%;
    transform: scaleX(-1);
    opacity: 85;
}

#tractorContainer4 {
    width: 1.3vw;
    height: 1.07vw;
    right: 28%;
    bottom: 45%;
    transform: scaleX(-1);
    opacity: 80;
}

#tractorContainer5 {
    width: 1vw;
    height: 0.82vw;
    left: 25%;
    bottom: 50%;
    transform: scaleX(-1);
    opacity: 75;
}

.tractorBody {
    height: 80%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.engine {
    background-color: #957060;
    width: 60%;
    height: 50%;
    position: absolute;
    bottom: 0;
    right: -4%;
}

.grill {
    width: 70%;
    height: 60%;
    position: absolute;
    top: 10%;
    right: 30%;
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.grillItem {
    background-color: #4a3752;
    width: 10%;
    height: 100%;
    border-radius: 20%;
}

.exhaust {
    position: absolute;
    right: 60%;
    bottom: 70%;
    width: 20%;
    height: 130%;
}

.exhaustTop {
    width: 80%;
    height: 50%;
    position: absolute;
    top: 0;
    left: 10%;
    background-color: #523e41;
    border-radius: 50%;
}

.exhaustBottom {
    width: 100%;
    height: 60%;
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: #694f52;
    border-radius: 50%;
}

.drive {
    width: 60%;
    height: 100%;
    position: absolute;
    bottom: 0;
    left: -10%;  
}

.driveLeft, .driveRight{
    background-color: #957060;
    position: absolute;
    bottom: 1%;
    left: 0;
}

.driveLeft {
    width: 50%;
    height: 100%;
    transform: skew(-5deg);
}

.driveRight {
    width: 50%;
    height: 100%;
    transform: translateX(80%) skew(5deg);
}

.driveGlass {
    width: 60%;
    height: 38%;
    position: absolute;
    left: 15%;
    top: 10%;
}

.driveGlassLeft, .driveGlassRight{
    background-color: #cbb294;
    position: absolute;
    bottom: 1%;
    left: 0;
}

.driveGlassLeft {
    width: 50%;
    height: 100%;
    transform: skew(-2deg);
}

.driveGlassRight {
    width: 50%;
    height: 100%;
    transform: translateX(80%) skew(2deg);
}

.bigWheel {
    width: 55%;
    height: 60%;
    background-color: #4a3752;
    position: absolute;
    left: -30%;
    bottom: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bigWheelMetal {
    background-color: #cbb294;
    width: 50%;
    height: 50%;
    border-radius: 50%;
    transform: translateY(5%);
}

.smallWheel {
    width: 40%;
    height: 45%;
    background-color: #4a3752;
    position: absolute;
    right: -24%;
    bottom: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.smallWheelMetal {
    background-color: #cbb294;
    width: 50%;
    height: 50%;
    border-radius: 50%;
    transform: translateY(5%);
}