HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html>
tag. If you want to add classes there that can affect the whole document, this is the place to do it.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. If you need things in the <head>
of the document, put that code here.
The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.
CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.
It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.
To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit-
or -moz-
.
We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).
Any URLs added here will be added as <link>
s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.
You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.
You can also link to another Pen here (use the .css
URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
JavaScript preprocessors can help make authoring JavaScript easier and more convenient.
Babel includes JSX processing.
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.
You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.
If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.
You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
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.
Using packages here is powered by Skypack, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ES6 import
usage.
All packages are different, so refer to their docs for how they work.
If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.
If active, Pens will autosave every 30 seconds after being saved once.
If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.
If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.
Visit your global Editor Settings.
<div class='day-night-light'></div>
<svg version="1.1" id="ufo" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 111.5 205.5" style="enable-background:new 0 0 111.5 205.5;" xml:space="preserve">
<g id="sheep-and-baloons">
<g id="baloons">
<g>
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="79.2246" y1="219.9888" x2="88.3022" y2="149.889" gradientTransform="matrix(-0.9966 -0.0824 -0.0824 0.9966 157.8044 -63.1591)">
<stop offset="0" style="stop-color:#F4D8AF"/>
<stop offset="0.1892" style="stop-color:#EACCA4"/>
<stop offset="0.5059" style="stop-color:#D3AF8A"/>
<stop offset="0.9089" style="stop-color:#B38968"/>
<stop offset="1" style="stop-color:#AC8060"/>
</linearGradient>
<path style="fill:url(#SVGID_1_);" d="M65.935,88.882c-0.453-0.354-1.664-1.081-2.135-1.233
c-1.064-0.287-2.203-0.087-3.307,0.432c-1.137,0.545-2.182,1.417-3.088,2.443c-1.072,1.188-1.889,2.596-2.303,3.864
c-1.715,5.472-1.875,9.446-1.23,12.127c1.089-1.041,2.386-1.689,3.658-2.022c1.457-0.406,2.908-0.378,4.063-0.085l0,0
c1.33,0.365,2.205,1.128,2.203,2.169c-0.076,2.306-1.373,3.995-3.045,4.759c-0.973,0.414-2.074,0.531-3.143,0.271
c-1.068-0.258-2.102-0.889-2.92-1.936c-0.406-0.553-0.774-1.216-1.069-1.992c-2.203,2.717-3.052,7.62,0.185,15.707
c0.771,1.939,1.759,3.463,2.75,4.959c1.875,2.834,3.721,5.638,4.072,11.387c0.195,2.992-0.025,5.548-0.84,7.97
c-0.816,2.419-2.221,4.649-4.391,6.993l-0.453-0.384c2.107-2.29,3.475-4.464,4.254-6.802c0.809-2.334,1.023-4.832,0.82-7.736
c-0.334-5.605-2.154-8.35-3.971-11.152c-1.021-1.496-2.01-3.02-2.803-5.047c-3.433-8.594-2.353-13.74,0.16-16.547L53.405,107
c-0.817-2.782-0.697-6.962,1.139-12.8c0.418-1.325,1.271-2.789,2.379-4.032c0.971-1.079,2.111-2.029,3.313-2.599
c1.201-0.599,2.492-0.815,3.732-0.456c0.563,0.16,1.084,0.432,1.592,0.848L65.935,88.882z M55.173,109.334
c0.736,0.926,1.627,1.486,2.574,1.736c0.918,0.217,1.896,0.121,2.748-0.275c1.48-0.662,2.639-2.162,2.697-4.236
c0.004-0.723-0.703-1.299-1.77-1.586l0,0c-1.033-0.283-2.395-0.305-3.73,0.082c-1.27,0.333-2.57,1.01-3.634,2.112
C54.347,108.028,54.738,108.751,55.173,109.334L55.173,109.334z"/>
<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="81.5771" y1="160.7964" x2="80.0887" y2="158.4667" gradientTransform="matrix(-0.9966 -0.0824 -0.0824 0.9966 157.8044 -63.1591)">
<stop offset="0" style="stop-color:#F3D653"/>
<stop offset="0.3272" style="stop-color:#DAA03C"/>
<stop offset="0.638" style="stop-color:#C97B2F"/>
<stop offset="0.8712" style="stop-color:#C06529"/>
<stop offset="1" style="stop-color:#BD5C27"/>
</linearGradient>
<path style="fill-rule:evenodd;clip-rule:evenodd;fill:url(#SVGID_2_);" d="M65.56,88.309l0.402,0.263
c-0.535-0.129-1.732,0.788-0.973,1.426c0.592,0.509-2.58,1.125-2.176-1.097c0.064-0.399,0.279-0.411,0.465-0.107
c0,0,0.236-0.646,0.395-0.72C64.822,87.411,64.591,87.972,65.56,88.309L65.56,88.309z"/>
<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="80.5425" y1="159.5732" x2="78.8521" y2="157.9478" gradientTransform="matrix(-0.9966 -0.0824 -0.0824 0.9966 157.8044 -63.1591)">
<stop offset="0" style="stop-color:#F3D653"/>
<stop offset="0.3272" style="stop-color:#DAA03C"/>
<stop offset="0.638" style="stop-color:#C97B2F"/>
<stop offset="0.8712" style="stop-color:#C06529"/>
<stop offset="1" style="stop-color:#BD5C27"/>
</linearGradient>
<path style="fill-rule:evenodd;clip-rule:evenodd;fill:url(#SVGID_3_);" d="M66.884,87.719c0.525,0.214-0.578,2.122-1.451,0.665
c-0.422-0.727-0.145-2.178,0.857-0.799c0.055,0.062,0.137,0.156,0.188,0.274L66.884,87.719z"/>
<path style="fill-rule:evenodd;clip-rule:evenodd;fill:#E69F52;" d="M97.264,47.347c-10.102-5.018-22.719-0.926-28.161,9.134
c-5.299,9.782-6.377,24.696-2.682,31.316c16.494,7.082,33.823-3.167,39.266-13.228C111.156,64.541,107.369,52.336,97.264,47.347
L97.264,47.347z"/>
<path style="fill-rule:evenodd;clip-rule:evenodd;fill:#FDFDFE;" d="M93.131,76.208c1.502-1.962,2.516-3.875,3.234-5.87
c1.027,0.37,2.074,0.857,3.09,1.371c-1.697,2.12-3.666,3.873-5.602,4.557L93.131,76.208L93.131,76.208z M100.311,70.563
c-1.156-0.612-2.354-1.139-3.523-1.608c0.834-2.997,0.961-6.194,0.779-9.706c2.275,0.643,4.498,1.569,6.662,2.781
c-0.09,0.339-0.188,0.765-0.322,1.274C103.395,65.373,102.066,68.129,100.311,70.563L100.311,70.563z"/>
</g>
<g>
<linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="85.916" y1="211.4253" x2="93.8516" y2="150.1447" gradientTransform="matrix(-0.9966 -0.0824 -0.0824 0.9966 157.8044 -63.1591)">
<stop offset="0" style="stop-color:#CACEE8"/>
<stop offset="0.1896" style="stop-color:#C7CAE6"/>
<stop offset="0.3708" style="stop-color:#BDBFDF"/>
<stop offset="0.5486" style="stop-color:#AEADD4"/>
<stop offset="0.7244" style="stop-color:#9B96C5"/>
<stop offset="0.897" style="stop-color:#847CB5"/>
<stop offset="1" style="stop-color:#766CAB"/>
</linearGradient>
<path style="fill:url(#SVGID_4_);" d="M52.547,76.353c2.947,0.233,3.761,2.716,3.462,6.169
c-0.527,6.107-4.542,15.063-6.945,20.417c-0.901,2.046-1.578,3.555-1.758,4.222c-2.521,9.553,2.085,13.693,6.577,17.755
c4.297,3.866,8.485,7.624,5.936,16.093c-0.775,2.66-1.557,3.631-3.115,5.547c-0.234,0.26-0.473,0.569-0.742,0.9l0.662,0.381
c0.27-0.307,0.508-0.617,0.744-0.9c1.625-1.987,2.438-2.98,3.252-5.738c2.643-8.84-1.713-12.736-6.123-16.715
c-4.382-3.948-8.85-7.953-6.417-17.162c0.174-0.615,0.848-2.123,1.75-4.145c2.403-5.378,6.456-14.407,6.989-20.59
c0.336-3.854-0.697-6.632-4.214-6.91L52.547,76.353z"/>
<path style="fill-rule:evenodd;clip-rule:evenodd;fill:#56BFD8;" d="M49.574,6.1C34.063,8.979,24.06,23.823,27.207,39.244
c3.062,15.009,15.358,32.105,25.387,36.221c24.304-5.854,33.892-31.28,30.746-46.7C80.191,13.372,65.054,3.189,49.574,6.1
L49.574,6.1z"/>
<path style="fill-rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;" d="M71.056,41.954c-0.289-3.663-1.131-6.88-2.387-9.839
c1.588-0.54,3.262-0.985,5.02-1.338c0.254,4.066-0.201,7.932-1.701,10.559L71.056,41.954L71.056,41.954z M73.482,28.621
c-2.002,0.392-3.924,0.903-5.762,1.51c-2.174-4.275-5.357-8.081-9.23-11.97c3.271-1.418,6.846-2.465,10.594-3.094
c0.264,0.454,0.545,1.026,0.938,1.75C71.619,19.718,72.931,24.127,73.482,28.621L73.482,28.621z"/>
<linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="93.7764" y1="150.6167" x2="93.8394" y2="148.2213" gradientTransform="matrix(-0.9966 -0.0824 -0.0824 0.9966 157.8044 -63.1591)">
<stop offset="0" style="stop-color:#924198"/>
<stop offset="0.63" style="stop-color:#72489C"/>
<stop offset="1" style="stop-color:#5B4B9F"/>
</linearGradient>
<path style="fill-rule:evenodd;clip-rule:evenodd;fill:url(#SVGID_5_);" d="M52.336,75.646l0.591,0.162
c0.644,0.976,0.577,1.028,0.495,1.976c-0.023,0.258-0.412,0.575-0.222,0.821c0.291,0.484-0.482,0.684-1.372,0.093
c-2-1.372-0.958-1.521-0.851-1.367c0.142,0.127,1.553-0.081,1.587-1.175C52.581,75.954,52.471,75.83,52.336,75.646L52.336,75.646
z"/>
<linearGradient id="SVGID_6_" gradientUnits="userSpaceOnUse" x1="94.6533" y1="148.1147" x2="93.0885" y2="146.9411" gradientTransform="matrix(-0.9966 -0.0824 -0.0824 0.9966 157.8044 -63.1591)">
<stop offset="0" style="stop-color:#924198"/>
<stop offset="0.63" style="stop-color:#72489C"/>
<stop offset="1" style="stop-color:#5B4B9F"/>
</linearGradient>
<path style="fill-rule:evenodd;clip-rule:evenodd;fill:url(#SVGID_6_);" d="M52.24,75.35c0.406-0.142,1.449,0.404,0.897,0.822
c-0.097,0.079-0.789,0.371-0.955,0.185C51.883,75.986,52.114,75.397,52.24,75.35L52.24,75.35z"/>
</g>
<g>
<linearGradient id="SVGID_7_" gradientUnits="userSpaceOnUse" x1="92.4063" y1="217.4448" x2="100.9451" y2="151.5052" gradientTransform="matrix(-0.9966 -0.0824 -0.0824 0.9966 157.8044 -63.1591)">
<stop offset="0" style="stop-color:#CACEE8"/>
<stop offset="0.0035" style="stop-color:#CACDE7"/>
<stop offset="0.3591" style="stop-color:#C094A7"/>
<stop offset="0.6553" style="stop-color:#B87084"/>
<stop offset="0.8773" style="stop-color:#B35971"/>
<stop offset="1" style="stop-color:#B2506A"/>
</linearGradient>
<path style="fill:url(#SVGID_7_);" d="M40.118,101.459c-4.032,4.042-6.823,8.092-7.868,12.424
c-1.988,8.2,1.683,19.035,11.807,18.647c0.257,0.007,0.536-0.017,0.816-0.038c-0.261-0.691-0.125-1.359,0.191-1.926
c0.363-0.657,0.991-1.195,1.588-1.443c0.653-0.283,1.278-0.248,1.631,0.234c0.608,0.775,0.646,1.485,0.273,2.057
c-0.293,0.51-0.903,0.932-1.723,1.227c-0.328,0.113-0.688,0.201-1.075,0.289c0.727,0.852,2.384,1.682,5.586,2.129
c1.63,0.233,3.288,0.779,4.827,1.563c2.102,1.051,3.99,2.573,5.26,4.434c1.301,1.859,1.98,4.053,1.662,6.444
c-0.133,1.009-0.432,2.06-0.955,3.128l-0.504,0.982l-0.502-0.243l0.504-0.982c0.5-1.011,0.775-2.002,0.914-2.954
c0.275-2.246-0.365-4.3-1.568-6.051c-1.234-1.779-3.033-3.225-5.045-4.254c-1.51-0.756-3.109-1.278-4.682-1.518
c-3.631-0.496-5.418-1.516-6.108-2.598c-0.361,0.059-0.698,0.088-1.064,0.088c-10.518,0.422-14.446-10.762-12.378-19.34
c1.086-4.479,3.899-8.59,8.013-12.693L40.118,101.459z M46.642,132.088c0.686-0.229,1.192-0.556,1.439-0.946
c0.242-0.419,0.198-0.9-0.221-1.464c-0.191-0.24-0.583-0.207-0.988-0.031c-0.49,0.212-1.016,0.625-1.332,1.194
c-0.238,0.475-0.329,1.024-0.112,1.546C45.873,132.323,46.289,132.231,46.642,132.088L46.642,132.088z"/>
<linearGradient id="SVGID_8_" gradientUnits="userSpaceOnUse" x1="102.0957" y1="177.1533" x2="103.176" y2="175.1198" gradientTransform="matrix(-0.9966 -0.0824 -0.0824 0.9966 157.8044 -63.1591)">
<stop offset="0" style="stop-color:#DC4544"/>
<stop offset="0.2174" style="stop-color:#D94446"/>
<stop offset="0.4252" style="stop-color:#D03F4A"/>
<stop offset="0.6291" style="stop-color:#C33851"/>
<stop offset="0.8293" style="stop-color:#B12E58"/>
<stop offset="1" style="stop-color:#9F225E"/>
</linearGradient>
<path style="fill-rule:evenodd;clip-rule:evenodd;fill:url(#SVGID_8_);" d="M39.77,102.252l0.098-0.426
c0.016,0.521,1.024,1.439,1.312,0.566c0.24-0.674,1.512,2.143-0.286,2.26c-0.306,0.033-0.378-0.174-0.207-0.391
c0.002-0.03-0.507-0.1-0.619-0.195C39.268,103.138,39.747,103.205,39.77,102.252L39.77,102.252z"/>
<path style="fill-rule:evenodd;clip-rule:evenodd;fill:#D86D50;" d="M39.722,101.547c3.029-1.375,5.289-7.862,6.59-10.701
c2.27-4.948,4.221-10.784,3.632-16.265c-0.688-6.402-3.401-12.636-8.291-17.111c-5.096-4.664-13.289-9.238-20.627-8.216
C5.471,51.423-3.38,69.829,6.313,85.573c10.589,17.201,32.667,17.195,33.925,16.556L39.722,101.547z"/>
<linearGradient id="SVGID_9_" gradientUnits="userSpaceOnUse" x1="102.3652" y1="173.1323" x2="104.5203" y2="174.6343" gradientTransform="matrix(-0.9966 -0.0824 -0.0824 0.9966 157.8044 -63.1591)">
<stop offset="0" style="stop-color:#DC4544"/>
<stop offset="0.2174" style="stop-color:#D94446"/>
<stop offset="0.4252" style="stop-color:#D03F4A"/>
<stop offset="0.6291" style="stop-color:#C33851"/>
<stop offset="0.8293" style="stop-color:#B12E58"/>
<stop offset="1" style="stop-color:#9F225E"/>
</linearGradient>
<path style="fill-rule:evenodd;clip-rule:evenodd;fill:url(#SVGID_9_);" d="M39.444,101.546c0.073-0.514,1.999-0.362,0.774,0.841
c-0.689,0.611-2.338,0.741-0.84-0.818L39.444,101.546z"/>
<path style="fill-rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;" d="M38.763,76.8c-0.864-2.265-2.001-4.175-3.342-5.842
c0.931-0.591,1.918-1.148,2.933-1.675c0.9,2.527,1.35,5.048,0.85,6.974L38.763,76.8L38.763,76.8z M37.83,67.97
c-1.17,0.572-2.313,1.204-3.344,1.904c-2.19-2.341-4.874-4.201-8.046-6.041c1.819-1.417,3.865-2.671,6.136-3.706
c0.249,0.25,0.556,0.564,0.918,0.939C35.022,62.633,36.677,65.22,37.83,67.97L37.83,67.97z"/>
</g>
</g>
<g id="sheep">
<path style="fill:#050406;" d="M56.083,196.217c0,3.836,0.988,6.945,2.207,6.945s2.207-3.109,2.207-6.945
s-0.988-6.945-2.207-6.945S56.083,192.381,56.083,196.217"/>
<path style="fill:#050406;" d="M30.524,195.049c0,3.836,0.988,6.945,2.207,6.945s2.207-3.109,2.207-6.945
s-0.988-6.945-2.207-6.945S30.524,191.213,30.524,195.049"/>
<path style="fill:#050406;" d="M36.335,192.803c0,3.836,0.988,6.945,2.207,6.945c1.22,0,2.207-3.109,2.207-6.945
s-0.987-6.945-2.207-6.945C37.323,185.858,36.335,188.967,36.335,192.803"/>
<path style="fill:#050406;" d="M61.14,191.375c0,3.836,0.986,6.943,2.205,6.943s2.207-3.107,2.207-6.943s-0.988-6.945-2.207-6.945
S61.14,187.54,61.14,191.375"/>
<path style="fill:#F3EDDB;" d="M85.992,160.127c1.773-1.232,2.938-3.281,2.938-5.604c0-3.77-3.055-6.824-6.825-6.824
c-0.061,0-0.117,0.008-0.178,0.008c0.922-1.162,1.479-2.631,1.479-4.232c0-3.768-3.057-6.822-6.824-6.822
c-0.053,0-0.105,0.006-0.158,0.008c-0.668-3.07-3.396-5.369-6.664-5.369c-1.352,0-2.607,0.398-3.668,1.074
c0.057-0.35,0.094-0.707,0.094-1.074c0-3.77-3.055-6.824-6.824-6.824c-2.102,0-3.98,0.953-5.233,2.447
c-0.871-2.51-3.251-4.314-6.058-4.314c-3.334,0-6.072,2.541-6.387,5.793c-1.048-1.441-2.742-2.383-4.661-2.383
c-1.91,0-3.599,0.934-4.648,2.365c-0.757-0.367-1.603-0.578-2.5-0.578c-2.278,0-4.243,1.326-5.18,3.246
c-0.424-0.1-0.864-0.158-1.318-0.158c-3.186,0-5.768,2.582-5.768,5.768c0,0.373,0.039,0.736,0.106,1.09
c-2.891,0.313-5.143,2.76-5.143,5.732c0,1.059,0.29,2.047,0.786,2.898c-0.181-0.021-0.356-0.055-0.543-0.055
c-2.646,0-4.792,2.146-4.792,4.793c0,1.049,0.347,2.012,0.918,2.799c-0.249,0.76-0.417,1.57-0.51,2.414
c-1.674,0.748-2.845,2.42-2.845,4.371c0,2.615,2.097,4.734,4.699,4.783c-1.391,1.305-2.263,3.152-2.263,5.209
c0,3.201,2.105,5.91,5.007,6.82c-0.135,0.549-0.215,1.119-0.215,1.709c0,3.518,2.542,6.434,5.889,7.029
c0.941,2.848,3.62,4.906,6.784,4.906c0.376,0,0.743-0.037,1.104-0.094c1.267,2.006,3.496,3.344,6.044,3.344
c2.167,0,4.104-0.969,5.415-2.49c0.556,0.139,1.135,0.221,1.733,0.221c0.894,0,1.744-0.172,2.531-0.471
c1.916,1.582,4.375,2.533,7.055,2.533c2.247,0,4.334-0.672,6.081-1.822c0.895,0.535,1.938,0.848,3.055,0.848
c2.094,0,3.932-1.078,4.996-2.711c0.809,0.408,1.717,0.643,2.684,0.643c2.574,0,4.76-1.633,5.598-3.918
c0.123,0.008,0.244,0.018,0.369,0.018c3.297,0,5.969-2.67,5.969-5.967c0-0.422-0.045-0.832-0.129-1.23
c0.498,0.135,1.018,0.213,1.559,0.213c3.295,0,5.967-2.672,5.967-5.969c0-0.854-0.184-1.664-0.506-2.4
c2.313-1.092,3.918-3.439,3.918-6.166C88.93,163.409,87.765,161.36,85.992,160.127"/>
<path style="fill:#F3EDDB;" d="M85.992,160.127c1.773-1.232,2.938-3.281,2.938-5.604c0-3.77-3.055-6.824-6.825-6.824
c-0.061,0-0.117,0.008-0.178,0.008c0.922-1.162,1.479-2.631,1.479-4.232c0-3.768-3.057-6.822-6.824-6.822
c-0.053,0-0.105,0.006-0.158,0.008c-0.668-3.07-3.396-5.369-6.664-5.369c-1.352,0-2.607,0.398-3.668,1.074
c0.057-0.35,0.094-0.707,0.094-1.074c0-3.77-3.055-6.824-6.824-6.824c-2.102,0-3.98,0.953-5.233,2.447
c-0.871-2.51-3.251-4.314-6.058-4.314c-3.334,0-6.072,2.541-6.387,5.793c-1.048-1.441-2.742-2.383-4.661-2.383
c-1.91,0-3.599,0.934-4.648,2.365c-0.757-0.367-1.603-0.578-2.5-0.578c-2.278,0-4.243,1.326-5.18,3.246
c-0.424-0.1-0.864-0.158-1.318-0.158c-3.186,0-5.768,2.582-5.768,5.768c0,0.373,0.039,0.736,0.106,1.09
c-2.891,0.313-5.143,2.76-5.143,5.732c0,1.059,0.29,2.047,0.786,2.898c-0.181-0.021-0.356-0.055-0.543-0.055
c-2.646,0-4.792,2.146-4.792,4.793c0,1.049,0.347,2.012,0.918,2.799c-0.249,0.76-0.417,1.57-0.51,2.414
c-1.674,0.748-2.845,2.42-2.845,4.371c0,2.615,2.097,4.734,4.699,4.783c-1.391,1.305-2.263,3.152-2.263,5.209
c0,3.201,2.105,5.91,5.007,6.82c-0.135,0.549-0.215,1.119-0.215,1.709c0,3.518,2.542,6.434,5.889,7.029
c0.941,2.848,3.62,4.906,6.784,4.906c0.376,0,0.743-0.037,1.104-0.094c1.267,2.006,3.496,3.344,6.044,3.344
c2.167,0,4.104-0.969,5.415-2.49c0.556,0.139,1.135,0.221,1.733,0.221c0.894,0,1.744-0.172,2.531-0.471
c1.916,1.582,4.375,2.533,7.055,2.533c2.247,0,4.334-0.672,6.081-1.822c0.895,0.535,1.938,0.848,3.055,0.848
c2.094,0,3.932-1.078,4.996-2.711c0.809,0.408,1.717,0.643,2.684,0.643c2.574,0,4.76-1.633,5.598-3.918
c0.123,0.008,0.244,0.018,0.369,0.018c3.297,0,5.969-2.67,5.969-5.967c0-0.422-0.045-0.832-0.129-1.23
c0.498,0.135,1.018,0.213,1.559,0.213c3.295,0,5.967-2.672,5.967-5.969c0-0.854-0.184-1.664-0.506-2.4
c2.313-1.092,3.918-3.439,3.918-6.166C88.93,163.409,87.765,161.36,85.992,160.127"/>
<path style="fill:#E1D7BC;" d="M86.265,150.102c0,2.324-1.164,4.373-2.938,5.605c1.436,0.996,2.471,2.529,2.814,4.309
c1.688-1.242,2.788-3.236,2.788-5.494c0-2.238-1.079-4.225-2.745-5.469C86.238,149.395,86.265,149.745,86.265,150.102"/>
<path style="fill:#E1D7BC;" d="M86.183,160.27c0.053,0.34,0.082,0.688,0.082,1.043c0,2.727-1.604,5.074-3.918,6.166
c0.324,0.734,0.506,1.545,0.506,2.4c0,3.297-2.672,5.967-5.967,5.967c-0.539,0-1.061-0.078-1.559-0.211
c0.084,0.396,0.129,0.809,0.129,1.23c0,3.295-2.672,5.967-5.967,5.967c-0.125,0-0.248-0.01-0.371-0.018
c-0.836,2.283-3.023,3.918-5.598,3.918c-0.965,0-1.875-0.236-2.682-0.643c-1.064,1.631-2.904,2.711-4.998,2.711
c-1.117,0-2.16-0.313-3.053-0.848c-1.747,1.148-3.835,1.822-6.082,1.822c-2.68,0-5.138-0.951-7.054-2.533
c-0.788,0.299-1.639,0.469-2.531,0.469c-0.599,0-1.178-0.08-1.733-0.221c-1.312,1.523-3.249,2.49-5.415,2.49
c-2.547,0-4.777-1.336-6.044-3.344c-0.36,0.057-0.728,0.096-1.104,0.096c-3.163,0-5.843-2.059-6.784-4.906
c-1.16-0.207-2.224-0.693-3.119-1.387c0.511,2.953,2.834,5.281,5.783,5.807c0.94,2.848,3.62,4.906,6.784,4.906
c0.376,0,0.743-0.037,1.104-0.094c1.266,2.006,3.495,3.344,6.043,3.344c2.167,0,4.104-0.969,5.415-2.49
c0.556,0.139,1.135,0.221,1.733,0.221c0.893,0,1.744-0.172,2.531-0.471c1.916,1.582,4.375,2.533,7.055,2.533
c2.247,0,4.335-0.672,6.081-1.822c0.895,0.535,1.938,0.848,3.055,0.848c2.094,0,3.932-1.078,4.996-2.711
c0.809,0.408,1.717,0.643,2.684,0.643c2.574,0,4.76-1.633,5.598-3.918c0.123,0.008,0.244,0.02,0.369,0.02
c3.297,0,5.969-2.672,5.969-5.969c0-0.422-0.045-0.832-0.129-1.23c0.498,0.135,1.018,0.213,1.559,0.213
c3.295,0,5.967-2.672,5.967-5.969c0-0.854-0.184-1.664-0.506-2.4c2.313-1.092,3.918-3.438,3.918-6.166
C88.93,163.495,87.847,161.514,86.183,160.27"/>
<path style="fill:#050406;" d="M22.402,138.786c-0.499-0.73-0.952-1.451-1.37-2.148c0.007,0.01,0.013,0.02,0.02,0.031
c-1.009,1.066-4.569,3.316-5.063,3.42c-0.097-0.301-0.188-0.604-0.27-0.904c1.712-0.959,3.328-2.08,4.83-3.367
c0.025,0.043,0.053,0.092,0.079,0.135c-2.195-3.785-3.317-6.6-4.655-5.166c-1.599,1.715-1.159,6.84,0.805,11.422
C19.306,140.247,20.551,139.52,22.402,138.786 M15.171,136.577c-0.041-0.283-0.077-0.564-0.103-0.838
c1.438-0.773,2.781-1.734,3.884-2.764c0.111,0.197,0.228,0.402,0.347,0.615C19.234,133.629,16.94,135.696,15.171,136.577"/>
<path style="fill:#B17F4A;" d="M18.952,132.975c0.111,0.197,0.228,0.402,0.347,0.615c-0.064,0.039-2.358,2.105-4.128,2.986
c-0.041-0.283-0.077-0.564-0.103-0.838C16.507,134.965,17.85,134.004,18.952,132.975"/>
<path style="fill:#68635E;" d="M18.952,132.975c0.111,0.197,0.228,0.402,0.347,0.615c-0.064,0.039-2.358,2.105-4.128,2.986
c-0.041-0.283-0.077-0.564-0.103-0.838C16.507,134.965,17.85,134.004,18.952,132.975"/>
<g style="opacity:0.4;">
<g>
<defs>
<rect id="SVGID_10_" x="20.629" y="135.952" width="0.403" height="0.686"/>
</defs>
<clipPath id="SVGID_11_">
<use xlink:href="#SVGID_10_" style="overflow:visible;"/>
</clipPath>
<path style="clip-path:url(#SVGID_11_);fill:#B17F4A;" d="M21.032,136.637c-0.139-0.232-0.272-0.461-0.403-0.686
C20.76,136.178,20.894,136.405,21.032,136.637"/>
</g>
</g>
<path style="fill:#B17F4A;" d="M15.989,140.088c-0.097-0.303-0.188-0.604-0.27-0.904c1.713-0.959,3.328-2.08,4.83-3.367
c0.025,0.043,0.053,0.092,0.079,0.135c0.13,0.227,0.265,0.453,0.403,0.686c0.007,0.01,0.013,0.02,0.019,0.031
C20.043,137.735,16.482,139.985,15.989,140.088"/>
<path style="fill:#68635E;" d="M15.989,140.088c-0.097-0.303-0.188-0.604-0.27-0.904c1.713-0.959,3.328-2.08,4.83-3.367
c0.025,0.043,0.053,0.092,0.079,0.135c0.13,0.227,0.265,0.453,0.403,0.686c0.007,0.01,0.013,0.02,0.019,0.031
C20.043,137.735,16.482,139.985,15.989,140.088"/>
<path style="fill:#050406;" d="M39.89,143.704c2.372-4.383,3.276-9.447,1.839-11.301c-1.2-1.549-2.574,1.15-5.104,4.721
c0.029-0.041,0.062-0.084,0.091-0.125c1.379,1.416,2.885,2.68,4.505,3.791c-0.11,0.293-0.229,0.584-0.353,0.877
c-0.48-0.148-3.821-2.713-4.729-3.867c0.007-0.01,0.014-0.02,0.021-0.029c-0.479,0.656-0.997,1.334-1.561,2.014
C36.377,140.684,37.551,141.52,39.89,143.704 M38.163,134.893c0.138-0.201,0.272-0.395,0.401-0.58
c1.004,1.123,2.254,2.203,3.616,3.105c-0.051,0.27-0.112,0.547-0.179,0.824C40.321,137.206,38.224,134.938,38.163,134.893"/>
<path style="fill:#B17F4A;" d="M38.564,134.313c-0.129,0.186-0.264,0.379-0.401,0.58c0.061,0.045,2.158,2.313,3.839,3.35
c0.066-0.277,0.128-0.555,0.179-0.824C40.818,136.516,39.568,135.436,38.564,134.313"/>
<path style="fill:#68635E;" d="M38.564,134.313c-0.129,0.186-0.264,0.379-0.401,0.58c0.061,0.045,2.158,2.313,3.839,3.35
c0.066-0.277,0.128-0.555,0.179-0.824C40.818,136.516,39.568,135.436,38.564,134.313"/>
<g style="opacity:0.4;">
<g>
<defs>
<rect id="SVGID_12_" x="36.16" y="137.124" width="0.464" height="0.646"/>
</defs>
<clipPath id="SVGID_13_">
<use xlink:href="#SVGID_12_" style="overflow:visible;"/>
</clipPath>
<path style="clip-path:url(#SVGID_13_);fill:#B17F4A;" d="M36.16,137.77c0.158-0.219,0.313-0.434,0.464-0.646
C36.473,137.336,36.318,137.551,36.16,137.77"/>
</g>
</g>
<path style="fill:#B17F4A;" d="M40.867,141.667c0.124-0.293,0.242-0.584,0.352-0.877c-1.619-1.111-3.125-2.375-4.504-3.791
c-0.029,0.041-0.062,0.084-0.091,0.125c-0.15,0.213-0.306,0.428-0.464,0.646c-0.008,0.01-0.015,0.02-0.021,0.029
C37.046,138.954,40.387,141.518,40.867,141.667"/>
<path style="fill:#68635E;" d="M40.867,141.667c0.124-0.293,0.242-0.584,0.352-0.877c-1.619-1.111-3.125-2.375-4.504-3.791
c-0.029,0.041-0.062,0.084-0.091,0.125c-0.15,0.213-0.306,0.428-0.464,0.646c-0.008,0.01-0.015,0.02-0.021,0.029
C37.046,138.954,40.387,141.518,40.867,141.667"/>
<path style="fill:#F3EDDB;" d="M28.566,146.323v-4.35c0.003,0.014,0.01,0.023,0.015,0.035c1.252-1.496,3.13-2.447,5.232-2.447
c3.748,0,6.787,3.023,6.82,6.762H28.566z"/>
<path style="fill:#F3EDDB;" d="M27.929,145.1l-1-4.734c-0.002,0.016-0.007,0.027-0.009,0.041c-1.705-1.34-3.97-1.943-6.258-1.461
c-4.079,0.861-6.691,4.85-5.868,8.928L27.929,145.1z"/>
<path style="fill:#423E34;" d="M16.794,153.229c0.368-0.107,0.798-0.307,1.246-0.568c-0.272,0.32-0.539,0.65-0.8,0.984
c-0.101,0.041-0.2,0.078-0.296,0.105c-1.753,0.502-5.575-0.512-7.031-1.93C11.364,153.233,15.105,153.711,16.794,153.229"/>
<path style="fill:#050406;" d="M9.913,151.821c1.451,1.412,5.192,1.891,6.881,1.408c0.368-0.107,0.798-0.307,1.246-0.568
c1.007-1.184,2.099-2.268,3.256-3.246c-0.072-0.264-0.14-0.529-0.202-0.799c-0.061-0.258-0.118-0.518-0.171-0.779
c-1.45-0.584-3.679-0.676-5.722-0.113c-2.632,0.725-4.79,2.545-5.283,4.086H9.917C9.916,151.813,9.914,151.817,9.913,151.821
M11.975,151.725c0.062-0.191,0.173-0.391,0.308-0.592c0.577-0.859,1.775-1.729,3.191-2.119c1.384-0.379,2.888-0.301,3.845,0.109
c0.225,0.096,0.429,0.205,0.583,0.338c-0.321,1.301-2.257,2.877-3.374,3.195C15.411,152.977,12.936,152.661,11.975,151.725"/>
<path style="fill:#68635E;" d="M12.282,151.133c0.578-0.859,1.775-1.729,3.191-2.119c1.384-0.379,2.888-0.301,3.845,0.109
c0.225,0.096,0.429,0.205,0.583,0.338c-0.322,1.301-2.257,2.877-3.374,3.195c-1.116,0.32-3.592,0.004-4.553-0.932
C12.036,151.534,12.147,151.334,12.282,151.133"/>
<path style="fill:#423E34;" d="M40.579,152.954c-0.375-0.078-0.817-0.246-1.284-0.475c0.296,0.301,0.585,0.609,0.87,0.924
c0.104,0.033,0.206,0.063,0.304,0.084c1.784,0.371,5.522-0.92,6.871-2.441C45.995,152.561,42.299,153.311,40.579,152.954"/>
<path style="fill:#050406;" d="M47.334,151.036L47.334,151.036c-0.605-1.5-2.89-3.16-5.568-3.689
c-2.079-0.41-4.294-0.154-5.698,0.533c-0.033,0.264-0.071,0.527-0.113,0.789c-0.043,0.271-0.091,0.543-0.143,0.813
c1.226,0.891,2.393,1.891,3.483,2.996c0.467,0.23,0.909,0.398,1.284,0.477c1.72,0.357,5.416-0.393,6.761-1.908
C47.338,151.043,47.336,151.04,47.334,151.036 M40.804,152.366c-1.138-0.236-3.183-1.666-3.599-2.941
c0.144-0.143,0.34-0.268,0.557-0.379c0.925-0.48,2.419-0.668,3.826-0.391c1.441,0.285,2.7,1.064,3.339,1.881
c0.148,0.189,0.274,0.379,0.35,0.568C44.387,152.106,41.941,152.602,40.804,152.366"/>
<path style="fill:#68635E;" d="M44.927,150.536c-0.639-0.816-1.897-1.596-3.339-1.881c-1.407-0.277-2.901-0.09-3.826,0.391
c-0.217,0.111-0.412,0.236-0.557,0.379c0.416,1.275,2.461,2.705,3.599,2.941s3.583-0.26,4.473-1.262
C45.201,150.915,45.076,150.725,44.927,150.536"/>
<path style="fill:#050406;" d="M21.458,147.225c2.37-3.059,4.701-5.98,9.49-5.98s8.136,3.174,8.672,7.008
c0.52,3.719-0.338,13.717-0.693,15.471c-0.914,4.506-5.437,8.324-12.142,8.324s-12.845-3.781-12.141-8.324
C15.803,156.262,19.893,149.245,21.458,147.225"/>
<path style="fill:#68635E;" d="M17.563,152.026c2.908-3.752,5.767-7.336,11.642-7.336s9.98,3.895,10.638,8.596
c0.639,4.563-0.415,16.826-0.851,18.979c-1.12,5.527-6.668,10.213-14.894,10.213c-8.225,0-15.758-4.641-14.894-10.213
C10.625,163.114,15.643,154.504,17.563,152.026"/>
<path style="fill:#423E34;" d="M9.205,172.264c1.42-9.15,6.437-17.76,8.357-20.238c0.986-1.273,1.971-2.521,3.065-3.623
c-0.013,0.016-0.025,0.033-0.038,0.049c-1.573,2.029-5.682,9.082-6.846,16.576c-0.708,4.564,5.461,8.365,12.198,8.365
s11.281-3.838,12.199-8.365c0.331-1.639,1.1-10.438,0.785-14.668c0.455,0.916,0.772,1.9,0.916,2.926
c0.638,4.563-0.416,16.826-0.852,18.979c-1.12,5.527-6.668,10.213-14.893,10.213C15.872,182.477,8.34,177.836,9.205,172.264"/>
<path style="fill:#050406;" d="M20.553,179.467c9.479,0,15.872-5.398,17.163-11.77c0.393-1.934,1.217-10.965,1.211-17.338
c0.455,0.916,0.772,1.9,0.916,2.926c0.638,4.563-0.416,16.826-0.852,18.979c-1.12,5.527-6.668,10.213-14.894,10.213
c-5.369,0-10.441-1.979-13.077-4.9C13.816,178.768,17.131,179.467,20.553,179.467"/>
<path style="fill:#FFFFFF;" d="M27.647,149.516c0.678,3.295,3.9,5.418,7.196,4.74c3.296-0.68,5.418-3.902,4.74-7.197
c-0.679-3.297-3.9-5.418-7.196-4.74C29.091,142.999,26.969,146.219,27.647,149.516"/>
<path style="fill:#FFFFFF;" d="M17.955,149.993c0.679,3.297,3.9,5.418,7.197,4.74c3.296-0.68,5.417-3.9,4.739-7.197
s-3.9-5.418-7.196-4.74C19.399,143.475,17.276,146.696,17.955,149.993"/>
<path style="fill:#ECECEC;" d="M22.72,142.758c0.174-0.035,0.347-0.059,0.521-0.078c-3,0.891-4.872,3.941-4.229,7.064
c0.643,3.121,3.567,5.186,6.676,4.818c-0.168,0.051-0.336,0.098-0.511,0.133c-3.296,0.678-6.519-1.443-7.196-4.74
C17.301,146.661,19.423,143.438,22.72,142.758"/>
<path style="fill:#ECECEC;" d="M32.411,142.282c0.174-0.035,0.348-0.059,0.521-0.08c-3,0.891-4.872,3.943-4.23,7.064
c0.644,3.123,3.568,5.188,6.676,4.82c-0.167,0.049-0.336,0.098-0.51,0.133c-3.297,0.678-6.519-1.443-7.196-4.74
C26.992,146.182,29.114,142.961,32.411,142.282"/>
<path class="eye" style="fill:#1D1D1B;" d="M29.911,147.629c0.255,1.236,1.461,2.031,2.694,1.775c1.235-0.254,2.03-1.461,1.776-2.693
c-0.255-1.234-1.462-2.031-2.695-1.775C30.452,145.19,29.657,146.397,29.911,147.629"/>
<path class="eye" style="fill:#1D1D1B;" d="M20.349,147.563c0.254,1.234,1.461,2.029,2.694,1.775c1.235-0.254,2.03-1.461,1.775-2.695
c-0.254-1.234-1.46-2.029-2.694-1.775S20.095,146.329,20.349,147.563"/>
<path style="fill:none;stroke:#E1D7BC;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" d="
M74.251,140.899c0,0-3.217-4.207-7.148-2.113c-0.121-0.908-0.035-4.523-4.412-3.986"/>
<path style="fill:none;stroke:#E1D7BC;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" d="
M53.116,131.387c-0.586-0.703-2.438-3.811-5.858-1.027"/>
<path style="fill:none;stroke:#E1D7BC;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" d="
M60.076,169.686c-0.885-0.227-4.205-1.668-5.354,2.592"/>
<path style="fill:none;stroke:#E1D7BC;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" d="
M35.28,132.815c-0.811-0.424-3.713-2.584-5.803,1.301"/>
<path style="fill:none;stroke:#E1D7BC;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" d="
M64.978,166.915c0,0,2.254-3.867,5.852-0.721c0.279-0.871,0.834-4.447,5.049-3.146"/>
<path style="fill:#010101;" d="M15.271,172.772c1.098-0.576,2.102-0.668,2.99-0.273c1.105,0.494,1.716,1.602,2.011,2.33
c2.022-1.957,5.954,0.293,6.134,0.396c0.177,0.104,0.236,0.33,0.134,0.508c-0.063,0.109-0.173,0.174-0.29,0.184
c-0.074,0.006-0.149-0.01-0.218-0.049c-0.042-0.025-4.122-2.363-5.568-0.102c-0.541,1.232-0.533,2.428-0.387,3.322
c0.15,0.916,0.446,1.521,0.452,1.533c0.058,0.113,0.045,0.242-0.013,0.344c-0.26-0.08-0.513-0.168-0.763-0.26
c-0.132-0.322-0.342-0.93-0.446-1.715c-0.126-0.951-0.094-2.156,0.438-3.424c-0.124-0.416-0.632-1.873-1.786-2.389
c-0.67-0.299-1.457-0.215-2.341,0.252c-0.183,0.094-0.407,0.025-0.503-0.156S15.089,172.868,15.271,172.772"/>
</g>
</g>
</svg>
<svg version="1.1" id="farm" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 612 464.748" enable-background="new 0 0 612 464.748" xml:space="preserve">
<path id="horizon-3" opacity="0.8" fill="#DEF0F6" enable-background="new " d="M31.793,425.501
c-8.216-29.642-12.631-61.075-12.632-93.633c0-178.587,132.857-323.361,296.74-323.361c163.887,0,296.743,144.774,296.743,323.361
c0,31.125-4.036,61.223-11.566,89.707"/>
<path id="horizon-2" opacity="0.3" fill="#A6D8E2" enable-background="new " d="M590.262,382.254
c0,0,22.324-127.599-11.6-184.917c-33.924-57.321-110.76-4.63-169.009-55.845c-58.248-51.219-142.901-48.524-200.959-18.588
c-58.056,29.938-54.983,69.463-104.852,84.664c-49.87,15.201-68.754,39.683-73.775,63.567
c-5.023,23.885,0.899,111.118,0.899,111.118H590.262L590.262,382.254z"/>
<path id="horizon-1" opacity="0.4" fill="#A6D8E2" enable-background="new " d="M37.503,361.736c0,0-8.208-77.436,50.843-124.599
c59.049-47.163,108.623,19.354,153.241,0c44.617-19.354,78.883-68.429,135.069-53.706c56.185,14.723,50.603,49.875,89.436,53.706
c38.835,3.832,101.005-19.83,124.171,23.52c23.169,43.349,0,101.079,0,101.079H37.503z"/>
<path fill="#CFCF83" d="M36.27,351.681c0,0,107.868-102.338,131.537-103.164c23.67-0.824,134.774,103.164,134.774,103.164H36.27z"/>
<path fill="#DFDE9F" d="M95.216,302.183c3.578,1.566,7.711-0.135,10.976-1.707c7.318-3.52,15.919-7.437,23.6-2.448
c1.919,1.246,4.092,3.997,6.406,4.426c4.043,0.749,8.317-1.896,11.886-3.401c7.939-3.352,14.942-2.474,21.12,3.626
c2.367,2.334,5.182,5.277,8.899,4.271c3.03-0.819,5.367-2.854,7.838-4.697c5.718-4.268,12.253-6.039,19.045-3.011
c3.337,1.489,6.138,3.98,9.495,5.397c4.49,1.897,6.168-1.099,9.037-3.865c2.694-2.6,5.982-5.132,9.76-5.841
c1.436-0.271,2.882-0.43,4.332-0.545c-28.864-23.958-58.792-46.254-69.802-45.87c-11.896,0.415-45.062,26.477-75.113,52.295
C93.509,301.331,94.347,301.801,95.216,302.183z"/>
<path fill="#D2B350" d="M208.114,354.909c0,0,143.996-136.61,175.589-137.712c31.598-1.101,179.912,137.712,179.912,137.712H208.114
z"/>
<path fill="#E5C56E" d="M310.55,283.775c7.62-0.036,13.947-5.479,21.517-6.004c5.814-0.402,11.214,1.676,16.139,4.618
c4.283,2.559,8.666,6.058,13.718,6.879c6.312,1.028,10.865-4.045,16.49-5.865c7.6-2.465,14.315-0.55,21.82,1.066
c4.122,0.888,7.382,1.051,10.633-1.832c2.179-1.931,4.416-3.713,7.167-4.762c7.749-2.955,14.86-1.147,22.355,1.716
c0.088,0.033,0.161,0.075,0.244,0.112c4.229-1.271,8.5-2.792,10.569-5.957c2.365-3.614,4.101-7.604,5.536-11.697
c-31.552-25.063-60.899-45.276-73.035-44.853c-13.948,0.485-49.803,27.383-85.503,57.278
C301.048,279.248,304.921,283.802,310.55,283.775z"/>
<path fill="#E5C56E" d="M296.844,293.256c0,0.967-0.783,1.749-1.748,1.749c-0.966,0-1.75-0.782-1.75-1.749
c0-0.964,0.784-1.748,1.75-1.748C296.062,291.508,296.844,292.292,296.844,293.256z"/>
<path fill="#E5C56E" d="M306.755,300.728c0,2.36-1.917,4.276-4.277,4.276c-2.362,0-4.277-1.916-4.277-4.276
c0-2.362,1.915-4.277,4.277-4.277C304.839,296.45,306.755,298.365,306.755,300.728z"/>
<circle fill="#E5C56E" cx="313.021" cy="298.927" r="2.477"/>
<path fill="#E5C56E" d="M369.13,300.821c0,1.048-0.85,1.896-1.895,1.896c-1.047,0-1.896-0.848-1.896-1.896
c0-1.046,0.85-1.896,1.896-1.896C368.28,298.926,369.13,299.775,369.13,300.821z"/>
<path fill="#E5C56E" d="M392.155,305.192c0,2.093-1.698,3.789-3.79,3.789c-2.091,0-3.788-1.696-3.788-3.789
c0-2.092,1.697-3.789,3.788-3.789C390.458,301.403,392.155,303.101,392.155,305.192z"/>
<path fill="#E5C56E" d="M379.039,300.676c0,0.967-0.784,1.749-1.748,1.749c-0.967,0-1.75-0.782-1.75-1.749
c0-0.966,0.783-1.75,1.75-1.75C378.255,298.926,379.039,299.71,379.039,300.676z"/>
<path fill="#E5C56E" d="M437.916,297.629c0,2.415-1.957,4.372-4.373,4.372c-2.413,0-4.37-1.956-4.3
@import "compass/reset";
@import "compass/css3";
$day-light: #fff;
$night-light: #17182D;
@include keyframes(tructor-animation) {
0% {
@include transform(translate(0%));
}
100% {
@include transform(translate(1000%));
}
}
@include keyframes(clouds-animation) {
0% {
@include transform(translate(0%));
}
100% {
@include transform(translate(-250%));
}
}
@include keyframes(windmill-animation) {
0% {
@include transform(rotate(0deg));
}
100% {
@include transform(rotate(-360deg));
}
}
@include keyframes(wheels-animation) {
0% {
@include transform(rotate(0deg));
}
100% {
@include transform(rotate(360deg));
}
}
@include keyframes(sheep-animation) {
0% {
top: 0%;
right: -20%;
@include filter(none);
}
10% {
top: 13%;
right: -8%;
}
20% {
top: 0%;
right: 4%;
}
30% {
top: 13%;
right: 16%;
}
40% {
top: 0%;
right: 28%;
}
49% {
@include filter(none);
}
50% {
top: 13%;
right: 40%;
@include filter(brightness(0.2) hue-rotate(130deg));
}
60% {
top: 0%;
right: 52%;
}
70% {
top: 13%;
right: 64%;
}
80% {
top: 0%;
right: 76%;
}
90% {
top: 13%;
right: 88%;
@include filter(brightness(0.2) hue-rotate(130deg));
}
99% {
@include filter(brightness(0.2) hue-rotate(130deg));
}
100% {
top: 0%;
right: 100%;
}
}
@include keyframes(sheep-eyes-animation) {
0% {
@include transform(scaleY(1));
}
1% {
@include transform(scaleY(0.3));
}
2% {
@include transform(scaleY(1));
}
}
@include keyframes(horizon-animation) {
0% {
@include transform(translateY(0px));
}
50% {
@include transform(translateY(-15px));
}
100% {
@include transform(translateY(0px));
}
}
@include keyframes(day-night-animation) {
0% {
@include filter(none);
}
49% {
@include filter(none);
}
50% {
@include filter(brightness(0.2) hue-rotate(130deg));
}
99% {
@include filter(brightness(0.2) hue-rotate(130deg));
}
}
@include keyframes(background-color-animation) {
0% {
background-color: $day-light;
}
49% {
background-color: $day-light;
}
50% {
background-color: $night-light;
}
99% {
background-color: $night-light;
}
}
html, body {
margin: 0;
padding: 0;
overflow: hidden;
.day-night-light {
position:absolute;
top:0px;
left:0px;
right:0px;
bottom:0px;
z-index:-1;
@include animation(background-color-animation 100s infinite linear);
}
#farm {
z-index: -1;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
@include animation(day-night-animation 100s infinite linear);
#horizon-1, #horizon-2 {
@include animation(horizon-animation 10s infinite linear);
}
#clouds {
@include animation(clouds-animation 60s infinite linear);
}
#trucktor {
@include animation(tructor-animation 80s infinite linear);
.wheel {
.axe {
// @include transform-origin(50%);
// @include animation(wheels-animation 2s infinite linear);
}
}
}
#sails {
@include transform-origin(177px, 292px);
@include animation(windmill-animation 15s infinite linear);
}
}
#ufo {
z-index: 2;
width: 15%;
position: absolute;
@include animation(sheep-animation 100s infinite linear);
.eye {
@include transform-origin(50%);
@include animation(sheep-eyes-animation 8s infinite linear);
}
}
}
Also see: Tab Triggers