Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div id="container">

        <!-- sun -->
        <div id="sun">
            <svg>
                <style>
                    #sunSvg {
                        fill: none;
                        stroke-width: 0.5vw;
                        stroke: #c03a37cc;
                        stroke-miterlimit: 4;
                        stroke-dasharray: 0.6vw, 1.2vw;
                        stroke-dashoffset: 10.00000028;
                        stroke-linejoin: round;
                        stroke-linecap: round;
                        animation: strokeAnimation 5s linear 0s infinite alternate-reverse forwards;
                    }

                    @keyframes strokeAnimation {
                        0% {
                            stroke-dashoffset: 0;
                        }

                        100% {
                            stroke-dashoffset: 100;
                        }
                    }
                </style>
                <rect id="sunSvg" width="100%" height="100%" x="0" y="0" rx="100%" />
            </svg>
        </div>

        <!-- clouds -->
        <!-- cloud 1 -->
        <div class="cloudContainer" id="cloud1Container">
            <div class="cloud" id="cloud1Top"></div>
            <div class="cloud" id="cloud1Mid"></div>
            <div class="cloud" id="cloud1Bot"></div>
        </div>

        <!-- cloud 2 -->
        <div class="cloudContainer" id="cloud2Container">
            <div class="cloud" id="cloud2Top"></div>
            <div class="cloud" id="cloud2Mid"></div>
            <div class="cloud" id="cloud2Bot"></div>
        </div>

        <!-- cloud 3 -->
        <div class="cloudContainer" id="cloud3Container">
            <div class="cloud" id="cloud3Top"></div>
            <div class="cloud" id="cloud3Mid"></div>
            <div class="cloud" id="cloud3Bot"></div>
        </div>

        <!-- cloud 4 -->
        <div class="cloudContainer" id="cloud4Container">
            <div class="cloud" id="cloud4Top"></div>
            <div class="cloud" id="cloud4Mid"></div>
            <div class="cloud" id="cloud4Bot"></div>
        </div>

        <!-- cloud 5 -->
        <div class="cloudContainer" id="cloud5Container">
            <div class="cloud" id="cloud5Top"></div>
            <div class="cloud" id="cloud5Mid"></div>
            <div class="cloud" id="cloud5Bot"></div>
        </div>

        <!-- comets -->
        <!-- comet 1 -->
        <div id="comet1Rotate">
            <div class="cometContainer" id="comet1Container">
                <div id="cometTail">
                    <div class="comets" id="cometTop"></div>
                    <div class="comets" id="cometBot"></div>
                </div>
                <div class="comets" id="cometHead"></div>
            </div>
        </div>

        <!-- comet 2 -->
        <div id="comet1Rotate">
            <div class="cometContainer" id="comet2Container">
                <div id="cometTail">
                    <div class="comets" id="cometTop"></div>
                    <div class="comets" id="cometBot"></div>
                </div>
                <div class="comets" id="cometHead"></div>
            </div>
        </div>

        <!-- windmills -->
        <!-- windmill 1 -->
        <div class="windmillContainer" id="windmill1Container">
            <div class="windmillBaseContainer">
                <div class="windmillLegLeft windmillLeg"></div>
                <div class="windmillLegRight windmillLeg"></div>
            </div>
            <div class="fanContainer">
                <div class="windmillFanContainer" id="windmill1FanContainer">
                    <div class="fan fan1">
                        <div class="wing wing1"></div>
                        <div class="wing wing2"></div>
                    </div>
                    <div class="fan fan2">
                        <div class="wing wing1"></div>
                        <div class="wing wing2"></div>
                    </div>
                </div>
            </div>
            <div class="windmillCircle"></div>
        </div>

        <!-- windmill 2 -->
        <div class="windmillContainer" id="windmill2Container">
            <div class="windmillBaseContainer">
                <div class="windmillLegLeft windmillLeg"></div>
                <div class="windmillLegRight windmillLeg"></div>
            </div>
            <div class="fanContainer">
                <div class="windmillFanContainer" id="windmill2FanContainer">
                    <div class="fan fan1">
                        <div class="wing wing1"></div>
                        <div class="wing wing2"></div>
                    </div>
                    <div class="fan fan2">
                        <div class="wing wing1"></div>
                        <div class="wing wing2"></div>
                    </div>
                </div>
            </div>
            <div class="windmillCircle"></div>
        </div>

        <!-- windmill 3 -->
        <div class="windmillContainer" id="windmill3Container">
            <div class="windmillBaseContainer">
                <div class="windmillLegLeft windmillLeg"></div>
                <div class="windmillLegRight windmillLeg"></div>
            </div>
            <div class="fanContainer">
                <div class="windmillFanContainer" id="windmill3FanContainer">
                    <div class="fan fan1">
                        <div class="wing wing1"></div>
                        <div class="wing wing2"></div>
                    </div>
                    <div class="fan fan2">
                        <div class="wing wing1"></div>
                        <div class="wing wing2"></div>
                    </div>
                </div>
            </div>
            <div class="windmillCircle"></div>
        </div>

        <!-- windmill 4 -->
        <div class="windmillContainer" id="windmill4Container">
            <div class="windmillBaseContainer">
                <div class="windmillLegLeft windmillLeg"></div>
                <div class="windmillLegRight windmillLeg"></div>
            </div>
            <div class="fanContainer">
                <div class="windmillFanContainer" id="windmill4FanContainer">
                    <div class="fan fan1">
                        <div class="wing wing1"></div>
                        <div class="wing wing2"></div>
                    </div>
                    <div class="fan fan2">
                        <div class="wing wing1"></div>
                        <div class="wing wing2"></div>
                    </div>
                </div>
            </div>
            <div class="windmillCircle"></div>
        </div>

        <!-- windmill 5 -->
        <div class="windmillContainer" id="windmill5Container">
            <div class="windmillBaseContainer">
                <div class="windmillLegLeft windmillLeg"></div>
                <div class="windmillLegRight windmillLeg"></div>
            </div>
            <div class="fanContainer">
                <div class="windmillFanContainer" id="windmill5FanContainer">
                    <div class="fan fan1">
                        <div class="wing wing1"></div>
                        <div class="wing wing2"></div>
                    </div>
                    <div class="fan fan2">
                        <div class="wing wing1"></div>
                        <div class="wing wing2"></div>
                    </div>
                </div>
            </div>
            <div class="windmillCircle"></div>
        </div>

        <!-- hills -->
        <!-- hill 6 -->
        <div class="hill" id="hill6">
            <div class="road"></div>
            <div class="road roadClip" Clip></div>

            <svg>
                <style>
                    rect {
                        fill: none;
                        stroke-width: 0.2vw;
                        stroke: #ffffff55;
                        stroke-miterlimit: 4;
                        stroke-dasharray: 0.6vw, 0.6vw;
                        stroke-dashoffset: 10.00000028;
                        stroke-linejoin: round;
                        stroke-linecap: round;
                        animation: strokeAnimation 5s linear 0s infinite alternate forwards;
                    }
                </style>
                <rect width="100%" height="100%" x="0" y="0.1vw" rx="8vw" />
            </svg>

            <div class="lines">
                <div class="line line1"></div>
                <div class="line line2"></div>
                <div class="line line3"></div>
                <div class="line line4"></div>
                <div class="line line5"></div>
                <div class="line line6"></div>
                <div class="line line7"></div>
                <div class="line line8"></div>
                <div class="line line9"></div>
                <div class="line line10"></div>
                <div class="line line11"></div>
                <div class="line line12"></div>
                <div class="line line13"></div>
                <div class="line line14"></div>
                <div class="line line15"></div>
                <div class="line line16"></div>
            </div>

        </div>

        <!-- hill 5 -->
        <div class="hill" id="hill5">
            <div class="road"></div>
            <div class="road roadClip" Clip></div>

            <svg>
                <rect width="100%" height="100%" x="0" y="0.1vw" rx="10vw" />
            </svg>

            <div class="lines">
                <div class="lineReverse line1Reverse"></div>
                <div class="lineReverse line2Reverse"></div>
                <div class="lineReverse line3Reverse"></div>
                <div class="lineReverse line4Reverse"></div>
                <div class="lineReverse line5Reverse"></div>
                <div class="lineReverse line6Reverse"></div>
                <div class="lineReverse line7Reverse"></div>
                <div class="lineReverse line8Reverse"></div>
                <div class="lineReverse line9Reverse"></div>
                <div class="lineReverse line10Reverse"></div>
                <div class="lineReverse line11Reverse"></div>
                <div class="lineReverse line12Reverse"></div>
                <div class="lineReverse line13Reverse"></div>
                <div class="lineReverse line14Reverse"></div>
                <div class="lineReverse line15Reverse"></div>
                <div class="lineReverse line16Reverse"></div>
            </div>

        </div>

        <!-- hill 4 -->
        <div class="hill" id="hill4">
            <div class="road"></div>
            <div class="road roadClip" Clip></div>

            <svg>
                <rect width="100%" height="100%" x="0" y="0.1vw" rx="10vw" />
            </svg>

            <div class="lines">
                <div class="lineReverse line1Reverse"></div>
                <div class="lineReverse line2Reverse"></div>
                <div class="lineReverse line3Reverse"></div>
                <div class="lineReverse line4Reverse"></div>
                <div class="lineReverse line5Reverse"></div>
                <div class="lineReverse line6Reverse"></div>
                <div class="lineReverse line7Reverse"></div>
                <div class="lineReverse line8Reverse"></div>
                <div class="lineReverse line9Reverse"></div>
                <div class="lineReverse line10Reverse"></div>
                <div class="lineReverse line11Reverse"></div>
                <div class="lineReverse line12Reverse"></div>
                <div class="lineReverse line13Reverse"></div>
                <div class="lineReverse line14Reverse"></div>
                <div class="lineReverse line15Reverse"></div>
                <div class="lineReverse line16Reverse"></div>
            </div>

        </div>

        <!-- hill 3 -->
        <div class="hill" id="hill3">
            <div class="road"></div>
            <div class="road roadClip" Clip></div>

            <svg>
                <rect width="100%" height="100%" x="0" y="0.1vw" rx="10vw" />
            </svg>

            <div class="lines">
                <div class="lineReverse line1Reverse"></div>
                <div class="lineReverse line2Reverse"></div>
                <div class="lineReverse line3Reverse"></div>
                <div class="lineReverse line4Reverse"></div>
                <div class="lineReverse line5Reverse"></div>
                <div class="lineReverse line6Reverse"></div>
                <div class="lineReverse line7Reverse"></div>
                <div class="lineReverse line8Reverse"></div>
                <div class="lineReverse line9Reverse"></div>
                <div class="lineReverse line10Reverse"></div>
                <div class="lineReverse line11Reverse"></div>
                <div class="lineReverse line12Reverse"></div>
                <div class="lineReverse line13Reverse"></div>
                <div class="lineReverse line14Reverse"></div>
                <div class="lineReverse line15Reverse"></div>
                <div class="lineReverse line16Reverse"></div>
            </div>

        </div>

        <!-- hill 2 -->
        <div class="hill" id="hill2">
            <div class="road"></div>
            <div class="road roadClip" Clip></div>

            <svg>
                <rect width="100%" height="100%" x="0" y="0.1vw" rx="10vw" />
            </svg>

            <div class="lines">
                <div class="line line1"></div>
                <div class="line line2"></div>
                <div class="line line3"></div>
                <div class="line line4"></div>
                <div class="line line5"></div>
                <div class="line line6"></div>
                <div class="line line7"></div>
                <div class="line line8"></div>
                <div class="line line9"></div>
                <div class="line line10"></div>
                <div class="line line11"></div>
                <div class="line line12"></div>
                <div class="line line13"></div>
                <div class="line line14"></div>
                <div class="line line15"></div>
                <div class="line line16"></div>
            </div>

        </div>

        <!-- hill 1 -->
        <div class="hill" id="hill1">
            <div class="road"></div>
            <div class="road roadClip" Clip></div>

            <svg>
                <rect width="100%" height="100%" x="0" y="0.1vw" rx="10vw" />
            </svg>

            <div class="lines">
                <div class="line line1"></div>
                <div class="line line2"></div>
                <div class="line line3"></div>
                <div class="line line4"></div>
                <div class="line line5"></div>
                <div class="line line6"></div>
                <div class="line line7"></div>
                <div class="line line8"></div>
                <div class="line line9"></div>
                <div class="line line10"></div>
                <div class="line line11"></div>
                <div class="line line12"></div>
                <div class="line line13"></div>
                <div class="line line14"></div>
                <div class="line line15"></div>
                <div class="line line16"></div>
            </div>

        </div>

        <!-- house one 2 -->
        <div class="houseOneContainer" id="houseOneContainer2">
            <div class="houseOneLeft">
                <div class="houseOneLeftDoor"></div>
                <div class="houseOneLeftWindow">
                    <div class="houseOneLeftWindowTop">
                        <div class="houseOneLeftWindowLeft"></div>
                        <div class="houseOneLeftWindowRight"></div>
                    </div>
                    <div class="houseOneLeftWindowBottom"></div>
                </div>
            </div>
            <div class="houseOneRight">
                <div class="houseOneRightWindowLeft1"></div>
                <div class="houseOneRightWindowLeft2"></div>
                <div class="houseOneRightWindowMid1"></div>
                <div class="houseOneRightWindowMid2"></div>
                <div class="houseOneRightWindowMid3"></div>
                <div class="houseOneRightDoor1"></div>
                <div class="houseOneRightDoor2"></div>
                <div class="houseOneRightWindowRight1"></div>
                <div class="houseOneRightWindowRight2"></div>
                <div class="houseOneRightWindowRight3"></div>
            </div>
        </div>

        <!-- kite 3 -->
        <div class="kite">
            <div class="kiteWire" id="kite3Wire">
                <div class="kiteContainer" id="kite3Container">
                    <div class="kiteTail">
                        <div class="kite3 kiteTop"></div>
                        <div class="kite3 kiteBot"></div>
                    </div>
                    <div class="kite3 kiteHead"></div>
                </div>
            </div>
        </div>

        <!-- bush 3 -->
        <div class="bushContainer" id="bush3Container">
            <div class="bushLeft"></div>
            <div class="bushRight"></div>
            <div class="bushMid"></div>
        </div>

        <!-- house one 1 -->
        <div class="houseOneContainer" id="houseOneContainer1">
            <div class="houseOneLeft">
                <div class="houseOneLeftDoor"></div>
                <div class="houseOneLeftWindow">
                    <div class="houseOneLeftWindowTop">
                        <div class="houseOneLeftWindowLeft"></div>
                        <div class="houseOneLeftWindowRight"></div>
                    </div>
                    <div class="houseOneLeftWindowBottom"></div>
                </div>
            </div>
            <div class="houseOneRight">
                <div class="houseOneRightWindowLeft1"></div>
                <div class="houseOneRightWindowLeft2"></div>
                <div class="houseOneRightWindowMid1"></div>
                <div class="houseOneRightWindowMid2"></div>
                <div class="houseOneRightWindowMid3"></div>
                <div class="houseOneRightDoor1"></div>
                <div class="houseOneRightDoor2"></div>
                <div class="houseOneRightWindowRight1"></div>
                <div class="houseOneRightWindowRight2"></div>
                <div class="houseOneRightWindowRight3"></div>
            </div>
        </div>

        <!-- bush 2 -->
        <div class="bushContainer" id="bush2Container">
            <div class="bushLeft"></div>
            <div class="bushRight"></div>
            <div class="bushMid"></div>
        </div>

        <!-- house one 4 -->
        <div class="houseOneContainer" id="houseOneContainer4">
            <div class="houseOneLeft">
                <div class="houseOneLeftDoor"></div>
                <div class="houseOneLeftWindow">
                    <div class="houseOneLeftWindowTop">
                        <div class="houseOneLeftWindowLeft"></div>
                        <div class="houseOneLeftWindowRight"></div>
                    </div>
                    <div class="houseOneLeftWindowBottom"></div>
                </div>
            </div>
            <div class="houseOneRight">
                <div class="houseOneRightWindowLeft1"></div>
                <div class="houseOneRightWindowLeft2"></div>
                <div class="houseOneRightWindowMid1"></div>
                <div class="houseOneRightWindowMid2"></div>
                <div class="houseOneRightWindowMid3"></div>
                <div class="houseOneRightDoor1"></div>
                <div class="houseOneRightDoor2"></div>
                <div class="houseOneRightWindowRight1"></div>
                <div class="houseOneRightWindowRight2"></div>
                <div class="houseOneRightWindowRight3"></div>
            </div>
        </div>

        <!-- Christmas tree 22 -->
        <div class="ChrisTreeContainer" id="ChrisTree22Container">
            <div class="ChrisTreeLeavesContainer">
                <div class="ChrisTreeLeave ChrisTreeLeave1"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave2"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave3"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave4"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave5"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave6"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave7"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave8"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave9"></div>
            </div>
            <div class="ChrisTreeTrunk"></div>
        </div>

        <!-- Christmas tree 23 -->
        <div class="ChrisTreeContainer" id="ChrisTree23Container">
            <div class="ChrisTreeLeavesContainer">
                <div class="ChrisTreeLeave ChrisTreeLeave1"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave2"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave3"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave4"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave5"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave6"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave7"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave8"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave9"></div>
            </div>
            <div class="ChrisTreeTrunk"></div>
        </div>
        <!-- Christmas tree 24 -->
        <div class="ChrisTreeContainer" id="ChrisTree24Container">
            <div class="ChrisTreeLeavesContainer">
                <div class="ChrisTreeLeave ChrisTreeLeave1"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave2"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave3"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave4"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave5"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave6"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave7"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave8"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave9"></div>
            </div>
            <div class="ChrisTreeTrunk"></div>
        </div>

        <!-- kite 2 -->
        <div class="kite">
            <div class="kiteWire" id="kite2Wire">
                <div class="kiteContainer" id="kite2Container">
                    <div class="kiteTail">
                        <div class="kite2 kiteTop"></div>
                        <div class="kite2 kiteBot"></div>
                    </div>
                    <div class="kite2 kiteHead"></div>
                </div>
            </div>
        </div>

        <!-- house one 3 -->
        <div class="houseOneContainer" id="houseOneContainer3">
            <div class="houseOneLeft">
                <div class="houseOneLeftDoor"></div>
                <div class="houseOneLeftWindow">
                    <div class="houseOneLeftWindowTop">
                        <div class="houseOneLeftWindowLeft"></div>
                        <div class="houseOneLeftWindowRight"></div>
                    </div>
                    <div class="houseOneLeftWindowBottom"></div>
                </div>
            </div>
            <div class="houseOneRight">
                <div class="houseOneRightWindowLeft1"></div>
                <div class="houseOneRightWindowLeft2"></div>
                <div class="houseOneRightWindowMid1"></div>
                <div class="houseOneRightWindowMid2"></div>
                <div class="houseOneRightWindowMid3"></div>
                <div class="houseOneRightDoor1"></div>
                <div class="houseOneRightDoor2"></div>
                <div class="houseOneRightWindowRight1"></div>
                <div class="houseOneRightWindowRight2"></div>
                <div class="houseOneRightWindowRight3"></div>
            </div>
        </div>

        <!-- Christmas tree 14 -->
        <div class="ChrisTreeContainer" id="ChrisTree14Container">
            <div class="ChrisTreeLeavesContainer">
                <div class="ChrisTreeLeave ChrisTreeLeave1"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave2"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave3"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave4"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave5"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave6"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave7"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave8"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave9"></div>
            </div>
            <div class="ChrisTreeTrunk"></div>
        </div>

        <!-- Christmas tree 15 -->
        <div class="ChrisTreeContainer" id="ChrisTree15Container">
            <div class="ChrisTreeLeavesContainer">
                <div class="ChrisTreeLeave ChrisTreeLeave1"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave2"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave3"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave4"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave5"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave6"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave7"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave8"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave9"></div>
            </div>
            <div class="ChrisTreeTrunk"></div>
        </div>

        <!-- Christmas tree 16 -->
        <div class="ChrisTreeContainer" id="ChrisTree16Container">
            <div class="ChrisTreeLeavesContainer">
                <div class="ChrisTreeLeave ChrisTreeLeave1"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave2"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave3"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave4"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave5"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave6"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave7"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave8"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave9"></div>
            </div>
            <div class="ChrisTreeTrunk"></div>
        </div>

        <!-- Christmas tree 17 -->
        <div class="ChrisTreeContainer" id="ChrisTree17Container">
            <div class="ChrisTreeLeavesContainer">
                <div class="ChrisTreeLeave ChrisTreeLeave1"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave2"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave3"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave4"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave5"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave6"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave7"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave8"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave9"></div>
            </div>
            <div class="ChrisTreeTrunk"></div>
        </div>

        <!-- Christmas tree 18 -->
        <div class="ChrisTreeContainer" id="ChrisTree18Container">
            <div class="ChrisTreeLeavesContainer">
                <div class="ChrisTreeLeave ChrisTreeLeave1"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave2"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave3"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave4"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave5"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave6"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave7"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave8"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave9"></div>
            </div>
            <div class="ChrisTreeTrunk"></div>
        </div>

        <!-- bush 11 -->
        <div class="bushContainer" id="bush11Container">
            <div class="bushLeft"></div>
            <div class="bushRight"></div>
            <div class="bushMid"></div>
        </div>

        <!-- bush 12 -->
        <div class="bushContainer" id="bush12Container">
            <div class="bushLeft"></div>
            <div class="bushRight"></div>
            <div class="bushMid"></div>
        </div>

        <!-- bush 13 -->
        <div class="bushContainer" id="bush13Container">
            <div class="bushLeft"></div>
            <div class="bushRight"></div>
            <div class="bushMid"></div>
        </div>

        <!-- kite 1 -->
        <div class="kite">
            <div class="kiteWire" id="kite1Wire">
                <div class="kiteContainer" id="kite1Container">
                    <div class="kiteTail">
                        <div class="kite1 kiteTop"></div>
                        <div class="kite1 kiteBot"></div>
                    </div>
                    <div class="kite1 kiteHead"></div>
                </div>
            </div>
        </div>

        <!-- bush 4 -->
        <div class="bushContainer" id="bush4Container">
            <div class="bushLeft"></div>
            <div class="bushRight"></div>
            <div class="bushMid"></div>
        </div>

        <!-- bush 5 -->
        <div class="bushContainer" id="bush5Container">
            <div class="bushLeft"></div>
            <div class="bushRight"></div>
            <div class="bushMid"></div>
        </div>

        <!-- house two 1 -->
        <div class="houseTwoContainer" id="houseTwoContainer1">
            <div class="houseTwoLeft">
                <div class="houseTwoLeftTop">
                    <div class="houseTwoLeftTopWindow"></div>
                    <div class="houseTwoLeftTopWindow"></div>
                    <div class="houseTwoLeftTopWindow"></div>
                    <div class="houseTwoLeftTopWindow"></div>
                </div>
                <div class="houseTwoLeftBottom">
                    <div class="houseTwoLeftBottomWindow"></div>
                    <div class="houseTwoLeftBottomWindow"></div>
                    <div class="houseTwoLeftBottomWindow"></div>
                    <div class="houseTwoLeftBottomWindow"></div>
                </div>
            </div>
            <div class="houseTwoRight">
                <div class="houseTwoRightLeft">
                    <div class="houseTwoRightLeftWindow"></div>
                    <div class="houseTwoRightLeftWindow"></div>
                    <div class="houseTwoRightLeftWindow"></div>
                    <div class="houseTwoRightLeftWindow"></div>
                </div>
                <div class="houseTwoRightDoor"></div>
            </div>
            <div class="houseTwoMiddle">
                <div class="houseTwoMiddleTop">
                    <div class="houseTwoMiddleTopWindow"></div>
                    <div class="houseTwoMiddleTopWindow"></div>
                </div>
                <div class="houseTwoMiddleMiddle">
                    <div class="houseTwoMiddleMiddleWindow"></div>
                    <div class="houseTwoMiddleMiddleWindow"></div>
                    <div class="houseTwoMiddleMiddleWindow"></div>
                    <div class="houseTwoMiddleMiddleWindow"></div>
                </div>
                <div class="houseTwoMiddleBottom">
                    <div class="houseTwoMiddleBottomWindow"></div>
                    <div class="houseTwoMiddleBottomWindow"></div>
                </div>
                <div class="houseTwoMiddleDoor1"></div>
                <div class="houseTwoMiddleDoor2"></div>
            </div>
        </div>

        <!-- Christmas tree 5 -->
        <div class="ChrisTreeContainer" id="ChrisTree5Container">
            <div class="ChrisTreeLeavesContainer">
                <div class="ChrisTreeLeave ChrisTreeLeave1"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave2"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave3"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave4"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave5"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave6"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave7"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave8"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave9"></div>
            </div>
            <div class="ChrisTreeTrunk"></div>
        </div>

        <!-- Christmas tree 6 -->
        <div class="ChrisTreeContainer" id="ChrisTree6Container">
            <div class="ChrisTreeLeavesContainer">
                <div class="ChrisTreeLeave ChrisTreeLeave1"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave2"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave3"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave4"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave5"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave6"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave7"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave8"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave9"></div>
            </div>
            <div class="ChrisTreeTrunk"></div>
        </div>

        <!-- Christmas tree 7 -->
        <div class="ChrisTreeContainer" id="ChrisTree7Container">
            <div class="ChrisTreeLeavesContainer">
                <div class="ChrisTreeLeave ChrisTreeLeave1"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave2"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave3"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave4"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave5"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave6"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave7"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave8"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave9"></div>
            </div>
            <div class="ChrisTreeTrunk"></div>
        </div>

        <!-- Christmas tree 8 -->
        <div class="ChrisTreeContainer" id="ChrisTree8Container">
            <div class="ChrisTreeLeavesContainer">
                <div class="ChrisTreeLeave ChrisTreeLeave1"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave2"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave3"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave4"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave5"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave6"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave7"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave8"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave9"></div>
            </div>
            <div class="ChrisTreeTrunk"></div>
        </div>

        <!-- bush 6 -->
        <div class="bushContainer" id="bush6Container">
            <div class="bushLeft"></div>
            <div class="bushRight"></div>
            <div class="bushMid"></div>
        </div>

        <!-- bush 14 -->
        <div class="bushContainer" id="bush14Container">
            <div class="bushLeft"></div>
            <div class="bushRight"></div>
            <div class="bushMid"></div>
        </div>

        <!-- bush 16 -->
        <div class="bushContainer" id="bush16Container">
            <div class="bushLeft"></div>
            <div class="bushRight"></div>
            <div class="bushMid"></div>
        </div>

        <!-- house two 2 -->
        <div class="houseTwoContainer" id="houseTwoContainer2">
            <div class="houseTwoLeft">
                <div class="houseTwoLeftTop">
                    <div class="houseTwoLeftTopWindow"></div>
                    <div class="houseTwoLeftTopWindow"></div>
                    <div class="houseTwoLeftTopWindow"></div>
                    <div class="houseTwoLeftTopWindow"></div>
                </div>
                <div class="houseTwoLeftBottom">
                    <div class="houseTwoLeftBottomWindow"></div>
                    <div class="houseTwoLeftBottomWindow"></div>
                    <div class="houseTwoLeftBottomWindow"></div>
                    <div class="houseTwoLeftBottomWindow"></div>
                </div>
            </div>
            <div class="houseTwoRight">
                <div class="houseTwoRightLeft">
                    <div class="houseTwoRightLeftWindow"></div>
                    <div class="houseTwoRightLeftWindow"></div>
                    <div class="houseTwoRightLeftWindow"></div>
                    <div class="houseTwoRightLeftWindow"></div>
                </div>
                <div class="houseTwoRightDoor"></div>
            </div>
            <div class="houseTwoMiddle">
                <div class="houseTwoMiddleTop">
                    <div class="houseTwoMiddleTopWindow"></div>
                    <div class="houseTwoMiddleTopWindow"></div>
                </div>
                <div class="houseTwoMiddleMiddle">
                    <div class="houseTwoMiddleMiddleWindow"></div>
                    <div class="houseTwoMiddleMiddleWindow"></div>
                    <div class="houseTwoMiddleMiddleWindow"></div>
                    <div class="houseTwoMiddleMiddleWindow"></div>
                </div>
                <div class="houseTwoMiddleBottom">
                    <div class="houseTwoMiddleBottomWindow"></div>
                    <div class="houseTwoMiddleBottomWindow"></div>
                </div>
                <div class="houseTwoMiddleDoor1"></div>
                <div class="houseTwoMiddleDoor2"></div>
            </div>
        </div>

        <!-- Christmas tree 19 -->
        <div class="ChrisTreeContainer" id="ChrisTree19Container">
            <div class="ChrisTreeLeavesContainer">
                <div class="ChrisTreeLeave ChrisTreeLeave1"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave2"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave3"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave4"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave5"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave6"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave7"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave8"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave9"></div>
            </div>
            <div class="ChrisTreeTrunk"></div>
        </div>

        <!-- Christmas tree 20 -->
        <div class="ChrisTreeContainer" id="ChrisTree20Container">
            <div class="ChrisTreeLeavesContainer">
                <div class="ChrisTreeLeave ChrisTreeLeave1"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave2"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave3"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave4"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave5"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave6"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave7"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave8"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave9"></div>
            </div>
            <div class="ChrisTreeTrunk"></div>
        </div>

        <!-- Christmas tree 21 -->
        <div class="ChrisTreeContainer" id="ChrisTree21Container">
            <div class="ChrisTreeLeavesContainer">
                <div class="ChrisTreeLeave ChrisTreeLeave1"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave2"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave3"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave4"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave5"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave6"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave7"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave8"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave9"></div>
            </div>
            <div class="ChrisTreeTrunk"></div>
        </div>

        <!-- bush 7 -->
        <div class="bushContainer" id="bush7Container">
            <div class="bushLeft"></div>
            <div class="bushRight"></div>
            <div class="bushMid"></div>
        </div>

        <!-- house Three 1 -->
        <div class="houseThreeContainer" id="houseThreeContainer1">
            <div class="houseThreeLeft">
                <div class="houseThreeLeftTopLeft">
                    <div class="houseThreeLeftTopLeftWindow"></div>
                    <div class="houseThreeLeftTopLeftWindow"></div>
                    <div class="houseThreeLeftTopLeftWindow"></div>
                    <div class="houseThreeLeftTopLeftWindow"></div>
                </div>
                <div class="houseThreeLeftTopRight">
                    <div class="houseThreeLeftTopRightWindow"></div>
                    <div class="houseThreeLeftTopRightWindow"></div>
                    <div class="houseThreeLeftTopRightWindow"></div>
                </div>
                <div class="houseThreeLeftBottom">
                    <div class="houseThreeLeftBottomWindow"></div>
                    <div class="houseThreeLeftBottomWindow"></div>
                    <div class="houseThreeLeftBottomWindow"></div>
                </div>
                <div class="houseThreeLeftDoor"></div>
            </div>
            <div class="houseThreeRight">
                <div class="houseThreeRightRight">
                    <div class="houseThreeRightRightWindow"></div>
                    <div class="houseThreeRightRightWindow"></div>
                    <div class="houseThreeRightRightWindow"></div>
                </div>
                <div class="houseThreeLeftRightTop"></div>
                <div class="houseThreeLeftRightBottom">
                    <div class="houseThreeLeftRightBottomWindow"></div>
                    <div class="houseThreeLeftRightBottomWindow"></div>
                </div>
            </div>
            <div class="houseThreeMiddle">
                <div class="houseThreeMiddleLeft">
                    <div class="houseThreeMiddleLeftWindow"></div>
                    <div class="houseThreeMiddleLeftWindow"></div>
                    <div class="houseThreeMiddleLeftWindow"></div>
                    <div class="houseThreeMiddleLeftWindow"></div>
                </div>
                <div class="houseThreeMiddleRight">
                    <div class="houseThreeMiddleRightWindow"></div>
                    <div class="houseThreeMiddleRightWindow"></div>
                </div>
                <div class="houseThreeMiddleDoor"></div>
            </div>
        </div>

        <!-- Christmas tree 9 -->
        <div class="ChrisTreeContainer" id="ChrisTree9Container">
            <div class="ChrisTreeLeavesContainer">
                <div class="ChrisTreeLeave ChrisTreeLeave1"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave2"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave3"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave4"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave5"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave6"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave7"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave8"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave9"></div>
            </div>
            <div class="ChrisTreeTrunk"></div>
        </div>

        <!-- Christmas tree 10 -->
        <div class="ChrisTreeContainer" id="ChrisTree10Container">
            <div class="ChrisTreeLeavesContainer">
                <div class="ChrisTreeLeave ChrisTreeLeave1"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave2"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave3"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave4"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave5"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave6"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave7"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave8"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave9"></div>
            </div>
            <div class="ChrisTreeTrunk"></div>
        </div>

        <!-- Christmas tree 11 -->
        <div class="ChrisTreeContainer" id="ChrisTree11Container">
            <div class="ChrisTreeLeavesContainer">
                <div class="ChrisTreeLeave ChrisTreeLeave1"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave2"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave3"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave4"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave5"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave6"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave7"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave8"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave9"></div>
            </div>
            <div class="ChrisTreeTrunk"></div>
        </div>

        <!-- Christmas tree 12 -->
        <div class="ChrisTreeContainer" id="ChrisTree12Container">
            <div class="ChrisTreeLeavesContainer">
                <div class="ChrisTreeLeave ChrisTreeLeave1"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave2"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave3"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave4"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave5"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave6"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave7"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave8"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave9"></div>
            </div>
            <div class="ChrisTreeTrunk"></div>
        </div>

        <!-- Christmas tree 13 -->
        <div class="ChrisTreeContainer" id="ChrisTree13Container">
            <div class="ChrisTreeLeavesContainer">
                <div class="ChrisTreeLeave ChrisTreeLeave1"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave2"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave3"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave4"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave5"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave6"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave7"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave8"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave9"></div>
            </div>
            <div class="ChrisTreeTrunk"></div>
        </div>

        <!-- bush 8 -->
        <div class="bushContainer" id="bush8Container">
            <div class="bushLeft"></div>
            <div class="bushRight"></div>
            <div class="bushMid"></div>
        </div>

        <!-- bush 9 -->
        <div class="bushContainer" id="bush9Container">
            <div class="bushLeft"></div>
            <div class="bushRight"></div>
            <div class="bushMid"></div>
        </div>

        <!-- bush 10 -->
        <div class="bushContainer" id="bush10Container">
            <div class="bushLeft"></div>
            <div class="bushRight"></div>
            <div class="bushMid"></div>
        </div>

        <!-- house Three 2 -->
        <div class="houseThreeContainer" id="houseThreeContainer2">
            <div class="houseThreeLeft">
                <div class="houseThreeLeftTopLeft">
                    <div class="houseThreeLeftTopLeftWindow"></div>
                    <div class="houseThreeLeftTopLeftWindow"></div>
                    <div class="houseThreeLeftTopLeftWindow"></div>
                    <div class="houseThreeLeftTopLeftWindow"></div>
                </div>
                <div class="houseThreeLeftTopRight">
                    <div class="houseThreeLeftTopRightWindow"></div>
                    <div class="houseThreeLeftTopRightWindow"></div>
                    <div class="houseThreeLeftTopRightWindow"></div>
                </div>
                <div class="houseThreeLeftBottom">
                    <div class="houseThreeLeftBottomWindow"></div>
                    <div class="houseThreeLeftBottomWindow"></div>
                    <div class="houseThreeLeftBottomWindow"></div>
                </div>
                <div class="houseThreeLeftDoor"></div>
            </div>
            <div class="houseThreeRight">
                <div class="houseThreeRightRight">
                    <div class="houseThreeRightRightWindow"></div>
                    <div class="houseThreeRightRightWindow"></div>
                    <div class="houseThreeRightRightWindow"></div>
                </div>
                <div class="houseThreeLeftRightTop"></div>
                <div class="houseThreeLeftRightBottom">
                    <div class="houseThreeLeftRightBottomWindow"></div>
                    <div class="houseThreeLeftRightBottomWindow"></div>
                </div>
            </div>
            <div class="houseThreeMiddle">
                <div class="houseThreeMiddleLeft">
                    <div class="houseThreeMiddleLeftWindow"></div>
                    <div class="houseThreeMiddleLeftWindow"></div>
                    <div class="houseThreeMiddleLeftWindow"></div>
                    <div class="houseThreeMiddleLeftWindow"></div>
                </div>
                <div class="houseThreeMiddleRight">
                    <div class="houseThreeMiddleRightWindow"></div>
                    <div class="houseThreeMiddleRightWindow"></div>
                </div>
                <div class="houseThreeMiddleDoor"></div>
            </div>
        </div>

        <!-- Christmas tree 1 -->
        <div class="ChrisTreeContainer" id="ChrisTree1Container">
            <div class="ChrisTreeLeavesContainer">
                <div class="ChrisTreeLeave ChrisTreeLeave1"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave2"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave3"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave4"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave5"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave6"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave7"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave8"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave9"></div>
            </div>
            <div class="ChrisTreeTrunk"></div>
        </div>

        <!-- Christmas tree 2 -->
        <div class="ChrisTreeContainer" id="ChrisTree2Container">
            <div class="ChrisTreeLeavesContainer">
                <div class="ChrisTreeLeave ChrisTreeLeave1"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave2"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave3"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave4"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave5"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave6"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave7"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave8"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave9"></div>
            </div>
            <div class="ChrisTreeTrunk"></div>
        </div>

        <!-- Christmas tree 3 -->
        <div class="ChrisTreeContainer" id="ChrisTree3Container">
            <div class="ChrisTreeLeavesContainer">
                <div class="ChrisTreeLeave ChrisTreeLeave1"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave2"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave3"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave4"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave5"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave6"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave7"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave8"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave9"></div>
            </div>
            <div class="ChrisTreeTrunk"></div>
        </div>

        <!-- Christmas tree 4 -->
        <div class="ChrisTreeContainer" id="ChrisTree4Container">
            <div class="ChrisTreeLeavesContainer">
                <div class="ChrisTreeLeave ChrisTreeLeave1"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave2"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave3"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave4"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave5"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave6"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave7"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave8"></div>
                <div class="ChrisTreeLeave ChrisTreeLeave9"></div>
            </div>
            <div class="ChrisTreeTrunk"></div>
        </div>

        <!-- tarctor 1-->
        <div class="tractorContainer" id="tractorContainer1">
            <div class="tractorBody">
                <div class="engine">
                    <div class="exhaust">
                        <div class="exhaustTop"></div>
                        <div class="exhaustBottom"></div>
                    </div>
                    <div class="grill">
                        <div class="grillItem"></div>
                        <div class="grillItem"></div>
                        <div class="grillItem"></div>
                        <div class="grillItem"></div>
                        <div class="grillItem"></div>
                    </div>
                </div>
                <div class="drive">
                    <div class="driveLeft"></div>
                    <div class="driveRight"></div>
                    <div class="driveGlass">
                        <div class="driveGlassRight"></div>
                        <div class="driveGlassLeft"></div>
                    </div>
                </div>
            </div>
            <div class="bigWheel">
                <div class="bigWheelMetal"></div>
            </div>
            <div class="smallWheel">
                <div class="smallWheelMetal"></div>
            </div>
        </div>

        <!-- tarctor 2-->
        <div class="tractorContainer" id="tractorContainer2">
            <div class="tractorBody">
                <div class="engine">
                    <div class="exhaust">
                        <div class="exhaustTop"></div>
                        <div class="exhaustBottom"></div>
                    </div>
                    <div class="grill">
                        <div class="grillItem"></div>
                        <div class="grillItem"></div>
                        <div class="grillItem"></div>
                        <div class="grillItem"></div>
                        <div class="grillItem"></div>
                    </div>
                </div>
                <div class="drive">
                    <div class="driveLeft"></div>
                    <div class="driveRight"></div>
                    <div class="driveGlass">
                        <div class="driveGlassRight"></div>
                        <div class="driveGlassLeft"></div>
                    </div>
                </div>
            </div>
            <div class="bigWheel">
                <div class="bigWheelMetal"></div>
            </div>
            <div class="smallWheel">
                <div class="smallWheelMetal"></div>
            </div>
        </div>

        <!-- tarctor 3-->
        <div class="tractorContainer" id="tractorContainer3">
            <div class="tractorBody">
                <div class="engine">
                    <div class="exhaust">
                        <div class="exhaustTop"></div>
                        <div class="exhaustBottom"></div>
                    </div>
                    <div class="grill">
                        <div class="grillItem"></div>
                        <div class="grillItem"></div>
                        <div class="grillItem"></div>
                        <div class="grillItem"></div>
                        <div class="grillItem"></div>
                    </div>
                </div>
                <div class="drive">
                    <div class="driveLeft"></div>
                    <div class="driveRight"></div>
                    <div class="driveGlass">
                        <div class="driveGlassRight"></div>
                        <div class="driveGlassLeft"></div>
                    </div>
                </div>
            </div>
            <div class="bigWheel">
                <div class="bigWheelMetal"></div>
            </div>
            <div class="smallWheel">
                <div class="smallWheelMetal"></div>
            </div>
        </div>

        <!-- tarctor 4-->
        <div class="tractorContainer" id="tractorContainer4">
            <div class="tractorBody">
                <div class="engine">
                    <div class="exhaust">
                        <div class="exhaustTop"></div>
                        <div class="exhaustBottom"></div>
                    </div>
                    <div class="grill">
                        <div class="grillItem"></div>
                        <div class="grillItem"></div>
                        <div class="grillItem"></div>
                        <div class="grillItem"></div>
                        <div class="grillItem"></div>
                    </div>
                </div>
                <div class="drive">
                    <div class="driveLeft"></div>
                    <div class="driveRight"></div>
                    <div class="driveGlass">
                        <div class="driveGlassRight"></div>
                        <div class="driveGlassLeft"></div>
                    </div>
                </div>
            </div>
            <div class="bigWheel">
                <div class="bigWheelMetal"></div>
            </div>
            <div class="smallWheel">
                <div class="smallWheelMetal"></div>
            </div>
        </div>

        <!-- tarctor 5-->
        <div class="tractorContainer" id="tractorContainer5">
            <div class="tractorBody">
                <div class="engine">
                    <div class="exhaust">
                        <div class="exhaustTop"></div>
                        <div class="exhaustBottom"></div>
                    </div>
                    <div class="grill">
                        <div class="grillItem"></div>
                        <div class="grillItem"></div>
                        <div class="grillItem"></div>
                        <div class="grillItem"></div>
                        <div class="grillItem"></div>
                    </div>
                </div>
                <div class="drive">
                    <div class="driveLeft"></div>
                    <div class="driveRight"></div>
                    <div class="driveGlass">
                        <div class="driveGlassRight"></div>
                        <div class="driveGlassLeft"></div>
                    </div>
                </div>
            </div>
            <div class="bigWheel">
                <div class="bigWheelMetal"></div>
            </div>
            <div class="smallWheel">
                <div class="smallWheelMetal"></div>
            </div>
        </div>

        <!-- bush 15 -->
        <div class="bushContainer" id="bush15Container">
            <div class="bushLeft"></div>
            <div class="bushRight"></div>
            <div class="bushMid"></div>
        </div>

        <!-- bush 1 -->
        <div class="bushContainer" id="bush1Container">
            <div class="bushLeft"></div>
            <div class="bushRight"></div>
            <div class="bushMid"></div>
        </div>

        <!-- tree 2 -->
        <div class="treeContainer" id="tree2Container">
            <div class="treeLeaves"></div>
            <div class="treeTrunk"></div>
        </div>

        <!-- tree 1 -->
        <div class="treeContainer" id="tree1Container">
            <div class="treeLeaves"></div>
            <div class="treeTrunk"></div>
        </div>

        <!-- tree 3 -->
        <div class="treeContainer" id="tree3Container">
            <div class="treeLeaves"></div>
            <div class="treeTrunk"></div>
        </div>

        <!-- tree 4 -->
        <div class="treeContainer" id="tree4Container">
            <div class="treeLeaves"></div>
            <div class="treeTrunk"></div>
        </div>

        <!-- tree 5 -->
        <div class="treeContainer" id="tree5Container">
            <div class="treeLeaves"></div>
            <div class="treeTrunk"></div>
        </div>

        <!-- tree 6 -->
        <div class="treeContainer" id="tree6Container">
            <div class="treeLeaves"></div>
            <div class="treeTrunk"></div>
        </div>

        <!-- tree 7 -->
        <div class="treeContainer" id="tree7Container">
            <div class="treeLeaves"></div>
            <div class="treeTrunk"></div>
        </div>

        <!-- tree 8 -->
        <div class="treeContainer" id="tree8Container">
            <div class="treeLeaves"></div>
            <div class="treeTrunk"></div>
        </div>

        <!-- tree 9 -->
        <div class="treeContainer" id="tree9Container">
            <div class="treeLeaves"></div>
            <div class="treeTrunk"></div>
        </div>


        <!-- tree 13 -->
        <div class="treeContainer" id="tree13Container">
            <div class="treeLeaves"></div>
            <div class="treeTrunk"></div>
        </div>

        <!-- tree 10 -->
        <div class="treeContainer" id="tree10Container">
            <div class="treeLeaves"></div>
            <div class="treeTrunk"></div>
        </div>

        <!-- tree 11 -->
        <div class="treeContainer" id="tree11Container">
            <div class="treeLeaves"></div>
            <div class="treeTrunk"></div>
        </div>

        <!-- tree 12 -->
        <div class="treeContainer" id="tree12Container">
            <div class="treeLeaves"></div>
            <div class="treeTrunk"></div>
        </div>


        <!-- tree 14 -->
        <div class="treeContainer" id="tree14Container">
            <div class="treeLeaves"></div>
            <div class="treeTrunk"></div>
        </div>

        <!-- tree 16 -->
        <div class="treeContainer" id="tree16Container">
            <div class="treeLeaves"></div>
            <div class="treeTrunk"></div>
        </div>

        <!-- tree 15 -->
        <div class="treeContainer" id="tree15Container">
            <div class="treeLeaves"></div>
            <div class="treeTrunk"></div>
        </div>

        <!-- tree 17 -->
        <div class="treeContainer" id="tree17Container">
            <div class="treeLeaves"></div>
            <div class="treeTrunk"></div>
        </div>

        <!-- glare -->
        <div id="glare"></div>
    </div>
              
            
!

CSS

              
                * {
    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%);
}
              
            
!

JS

              
                // Nothing to see here!

// Oh, If you want a more organized code just visit the GitHub repository: https://github.com/moPsych/hills
              
            
!
999px

Console