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

              
                <!-- Let's have some comets flyings around :) -->
<div class="container">


	<div class="solar-system-animation">
		<svg id="animation-scene" class="animation-scene" viewBox="0 0 1400 1400">
			<g id="Solar-system">
				<g id="system-sun" class="system-sun">
					<!-- <rect id="box" x="504.8" y="504.8" class="st0" width="390.5" height="390.5" style="fill:none;stroke:#DE00E7;stroke-miterlimit:10;"/> -->
					<g class="shadow-02-container">
						<path id="Shadow-2" class="sun-system-shadow-02" d="M891,701.53c-.73-17.83-24.69-14.39-27-34.15-.62-14.17,22.33-20.33,13.08-40.67-7.35-16.19-28.2-3.64-37.76-21-5.88-12.84,13-27.52-3.14-42.69-12.85-12.07-27.42,7.67-42.74-4.61-10.24-9.56,1.73-30.51-18.88-38.2-16.4-6.13-22.46,17.81-41.22,12.46-13-4.82-9.83-28.86-31.75-27.91-17.44.76-14.09,25.24-33.42,27.64-13.85.64-19.88-22.82-39.78-13.36-15.84,7.52-3.57,28.83-20.54,38.6-12.56,6-26.91-13.3-41.75,3.22-11.82,13.14,7.49,28-4.52,43.69-9.36,10.47-29.85-1.76-37.38,19.31-6,16.76,17.41,23,12.18,42.13-4.72,13.33-28.24,10-27.31,32.46.73,17.83,24.69,14.39,27,34.15.62,14.17-22.33,20.33-13.08,40.67,7.35,16.19,28.19,3.64,37.75,21,5.89,12.84-13,27.51,3.14,42.69,12.86,12.07,27.43-7.68,42.76,4.61,10.22,9.56-1.73,30.51,18.87,38.2,16.4,6.13,22.46-17.81,41.22-12.46,13,4.82,9.83,28.86,31.75,27.91,17.45-.76,14.09-25.24,33.42-27.64,13.85-.64,19.88,22.82,39.78,13.36,15.84-7.52,3.57-28.82,20.53-38.6,12.57-6,26.92,13.3,41.77-3.22,11.81-13.14-7.5-28,4.52-43.69,9.35-10.47,29.84,1.75,37.37-19.31,6-16.76-17.41-23-12.18-42.13C868.4,720.66,891.91,723.94,891,701.53Z" />
					</g>
					<g class="shadow-01-container">
						<path id="Shadow-1" class="sun-system-shadow-01" d="M853.11,701.23c-.59-14.3-19.79-11.54-21.66-27.38-.51-11.36,17.89-16.3,10.48-32.61-5.9-13-22.61-2.92-30.27-16.82-4.72-10.29,10.43-22.06-2.52-34.22-10.31-9.68-22,6.15-34.27-3.7-8.21-7.66,1.39-24.46-15.13-30.63-13.15-4.91-18,14.28-33,10-10.46-3.87-7.88-23.14-25.45-22.38-14,.61-11.3,20.23-26.8,22.16-11.11.51-15.94-18.3-31.89-10.72-12.7,6-2.86,23.12-16.47,31-10.07,4.82-21.57-10.66-33.47,2.58-9.48,10.54,6,22.47-3.63,35-7.5,8.4-23.93-1.41-30,15.48-4.8,13.44,14,18.41,9.77,33.78-3.78,10.69-22.64,8.06-21.89,26,.59,14.3,19.79,11.54,21.66,27.38.51,11.36-17.89,16.3-10.48,32.61,5.9,13,22.6,2.92,30.27,16.81,4.72,10.3-10.44,22.07,2.52,34.23,10.31,9.68,22-6.15,34.27,3.7,8.2,7.67-1.38,24.46,15.13,30.63,13.15,4.91,18-14.28,33-10,10.46,3.87,7.88,23.14,25.45,22.38,14-.61,11.3-20.23,26.8-22.16,11.11-.51,15.94,18.3,31.89,10.72,12.7-6,2.86-23.12,16.46-31,10.07-4.82,21.58,10.66,33.48-2.58,9.48-10.54-6-22.47,3.63-35,7.5-8.39,23.93,1.4,30-15.48,4.8-13.44-14-18.41-9.77-33.78C835,716.56,853.86,719.19,853.11,701.23Z" />
					</g>
					<g id="Sun-Center" class="sun-center">
						<g id="sun-bg">
							<ellipse class="sun-system-bg" cx="700.1" cy="700.02" rx="112.62" ry="111.31" />
						</g>
						<g id="solar-pattern" class="sun-system-patterns">

							<path d="M645.23,691.65c-22.92-1.52-43.41,35.65-17.18,45.57,23.25,3.94,10-15.63,23.57-22C666.1,709.92,671.45,691.23,645.23,691.65Z" />
							<path d="M677.68,619.74c-11,4.66,2.61,17.09,7.19,6.73C686.21,622.31,681.56,618.62,677.68,619.74Z" />
							<path d="M677.33,650.71c-2.92-9.79-21.62-11.71-23.4-.51C626.38,669.21,686.18,680.3,677.33,650.71Z" />
							<path d="M692.35,637.33c-4.34,0-4.35,6.75,0,6.75S696.71,637.33,692.35,637.33Z" />
							<path d="M796.8,693.83c-2.73-40.32-54.15-24.47-22.92,8.42,3.83,12.2-32.82,31.45-1.68,34.78C789.86,732.64,796.87,710.12,796.8,693.83Z" />
							<path d="M760.72,702c-3.23-6.51-12.89-1.75-10.73,4.83C752.53,714.43,764,708.8,760.72,702Z" />
							<path d="M752.51,745.21c-4.35,0-4.35,6.76,0,6.76S756.87,745.21,752.51,745.21Z" />
							<path d="M645.85,742.12c-4.35,0-4.36,6.75,0,6.75S650.2,742.12,645.85,742.12Z" />
						</g>
					</g>
				</g>
			</g>
		</svg>
	
	</div>
</div>
              
            
!

CSS

              
                :root {
	/* Fixed colors that don't get transition/animation */
	--dark-cosmos-color: hsl(290, 34%, 10%);
	--star-color: hsl(272, 57%, 95%);
	--t-sun-color: hsl(47, 100%, 88%);
	--sunsys-color: hsl(41, 99%, 75%);
	--sunsys-patterns-color: hsl(33, 95%, 73%);
}

/* Uncomment the transfor-origin to make this work */ 
.system-sun {	
	 	// transform-origin: 700px 700px;
		animation: 4s linear infinite Rotation;
}



@keyframes Rotation {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

















/* CSS solar system animation */
.sun-system-bg,
.sun-system-shadow-01,
.sun-system-shadow-02 {
	fill: var(--sunsys-color);
}

.sun-system-shadow-01,
.sun-system-shadow-02 {
	opacity: 0.4;
}

.sun-system-patterns {
	fill: var(--sunsys-patterns-color);
}

/* Layout */

body {
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100vh;
	padding: 0 6em;
}

.container {
	position: relative;
	z-index: 100;
	padding: 0 2em;
	flex-basis: 30vh;
}


svg.animation-scene {
	width: 100%;
	border: 1px solid yellow;
	background: rgba(255, 255, 255, 0.1);
}

/* Utilities and pen background */

html {
	background: var(--dark-cosmos-color);
	color: var(--dark-cosmos-color);
	
}

/* collapsing the SVG on the body */

body {
	background-size: 360px;
	background-image: url("data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMTkuNTQgMzE4Ljk2Ij4KICA8ZGVmcz4KICAgIDxzdHlsZT4KICAgICAgLmNscy0xIHsKICAgICAgICBmaWxsOiAjZmFlY2NhOwogICAgICB9CiAgICA8L3N0eWxlPgogIDwvZGVmcz4KICA8Zz4KICAgIDxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTIyNS41NywxMDAuNThhLjIzLjIzLDAsMCwwLDAsLjQ1QzIyNS44MywxMDEsMjI1LjgzLDEwMC41OCwyMjUuNTcsMTAwLjU4WiIvPgogICAgPHBhdGggY2xhc3M9ImNscy0xIiBkPSJNMjU2LjgyLDU1Ljc4YS4yMy4yMywwLDAsMCwwLC40NUMyNTcuMDgsNTYuMjMsMjU3LjA4LDU1Ljc4LDI1Ni44Miw1NS43OFoiLz4KICAgIDxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTI0Mi44NSwyMC43NGMtLjI2LDAtLjI2LjQ1LDAsLjQ1QS4yMy4yMywwLDAsMCwyNDIuODUsMjAuNzRaIi8+CiAgICA8cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik0yOTQuNzIsMTU4YS4yMy4yMywwLDAsMCwwLC40NUMyOTUsMTU4LjQ4LDI5NSwxNTgsMjk0LjcyLDE1OFoiLz4KICAgIDxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTMxNS42Niw3Mi43NmMtLjI2LDAtLjI2LjQ1LDAsLjQ1QS4yMy4yMywwLDAsMCwzMTUuNjYsNzIuNzZaIi8+CiAgICA8cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik0yODYuNzQsMTE5LjczYS4yMy4yMywwLDAsMCwwLC40NUMyODcsMTIwLjE4LDI4NywxMTkuNzMsMjg2Ljc0LDExOS43M1oiLz4KICAgIDxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTMxNywuMTRjLS4yNiwwLS4yNi40NSwwLC40NUEuMjMuMjMsMCwwLDAsMzE3LC4xNFoiLz4KICAgIDxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTE2My43MywxNy4xMmEuMjMuMjMsMCwwLDAsMCwuNDVDMTY0LDE3LjU3LDE2NCwxNy4xMiwxNjMuNzMsMTcuMTJaIi8+CiAgICA8cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik01Ni42OCw4LjQ1YS4yMy4yMywwLDAsMCwwLC40NUM1Ni45NCw4LjksNTYuOTQsOC40NSw1Ni42OCw4LjQ1WiIvPgogICAgPHBhdGggY2xhc3M9ImNscy0xIiBkPSJNMTAwLjU2LDIwLjc0YS4yMy4yMywwLDAsMCwwLC40NUEuMjMuMjMsMCwwLDAsMTAwLjU2LDIwLjc0WiIvPgogICAgPHBhdGggY2xhc3M9ImNscy0xIiBkPSJNMTY2LjA2LDgzLjA5YS4yMy4yMywwLDAsMCwwLC40NUMxNjYuMzIsODMuNTQsMTY2LjMyLDgzLjA5LDE2Ni4wNiw4My4wOVoiLz4KICAgIDxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTk5LjQ4LDE3Ny45YS4yMy4yMywwLDAsMCwwLC40NUM5OS43NCwxNzguMzUsOTkuNzQsMTc3LjksOTkuNDgsMTc3LjlaIi8+CiAgICA8cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik0xMjcuNzMsMTM0LjE2YS4yMy4yMywwLDAsMCwwLC40NUEuMjMuMjMsMCwwLDAsMTI3LjczLDEzNC4xNloiLz4KICAgIDxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTEwNy43OCw3OS40NmMtLjI2LDAtLjI2LjQ0LDAsLjQ0QS4yMi4yMiwwLDAsMCwxMDcuNzgsNzkuNDZaIi8+CiAgICA8cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik0yMzUuMzYsMjAwLjQ1Yy0uMjYsMC0uMjYuNDUsMCwuNDVBLjIzLjIzLDAsMCwwLDIzNS4zNiwyMDAuNDVaIi8+CiAgICA8cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik0yODAuMDksMjEwLjQxYS4yMy4yMywwLDAsMCwwLC40NUEuMjMuMjMsMCwwLDAsMjgwLjA5LDIxMC40MVoiLz4KICAgIDxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTI0MSwxNTYuNzNhLjIzLjIzLDAsMCwwLDAsLjQ1QzI0MS4yOCwxNTcuMTgsMjQxLjI4LDE1Ni43MywyNDEsMTU2LjczWiIvPgogICAgPHBhdGggY2xhc3M9ImNscy0xIiBkPSJNNTMuNjMsMjY3LjgzYS4yMi4yMiwwLDAsMCwwLC40NEM1My44OSwyNjguMjcsNTMuODksMjY3LjgzLDUzLjYzLDI2Ny44M1oiLz4KICAgIDxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTS4yLDEzMS42NmEuMjMuMjMsMCwwLDAsMCwuNDVBLjIzLjIzLDAsMCwwLC4yLDEzMS42NloiLz4KICAgIDxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTcuODMsMTM2LjVjLS4yNiwwLS4yNi40NCwwLC40NEEuMjIuMjIsMCwwLDAsNy44MywxMzYuNVoiLz4KICAgIDxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTcuODMsMTI1LjQ0Yy0uMjYsMC0uMjYuNDUsMCwuNDVBLjIzLjIzLDAsMCwwLDcuODMsMTI1LjQ0WiIvPgogICAgPHBhdGggY2xhc3M9ImNscy0xIiBkPSJNMTUuNDYsMjUuOWMtLjI2LDAtLjI2LjQ1LDAsLjQ1QS4yMy4yMywwLDAsMCwxNS40NiwyNS45WiIvPgogICAgPHBhdGggY2xhc3M9ImNscy0xIiBkPSJNMTI1Ljc5LDIwMC4wOWEuMjMuMjMsMCwwLDAsMCwuNDVBLjIzLjIzLDAsMCwwLDEyNS43OSwyMDAuMDlaIi8+CiAgICA8cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik00MS41NCwxOTYuNjNjLS4yNiwwLS4yNi40NSwwLC40NUEuMjMuMjMsMCwwLDAsNDEuNTQsMTk2LjYzWiIvPgogICAgPHBhdGggY2xhc3M9ImNscy0xIiBkPSJNNDYsMTMxYS4yMy4yMywwLDAsMCwwLC40NUM0Ni4yNiwxMzEuNDIsNDYuMjYsMTMxLDQ2LDEzMVoiLz4KICAgIDxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTIzNi44MSwyOTguOTNjLS4yNiwwLS4yNi40NSwwLC40NUEuMjMuMjMsMCwwLDAsMjM2LjgxLDI5OC45M1oiLz4KICAgIDxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTI4NS4xNSwyODAuMjdjLS4yNiwwLS4yNi40NSwwLC40NUEuMjMuMjMsMCwwLDAsMjg1LjE1LDI4MC4yN1oiLz4KICAgIDxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTIxOSwyMzAuNWMtLjI2LDAtLjI2LjQ1LDAsLjQ1QS4yMy4yMywwLDAsMCwyMTksMjMwLjVaIi8+CiAgICA8cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik0xODkuNzQsMzEwLjY4Yy0uMjYsMC0uMjYuNDUsMCwuNDVBLjIzLjIzLDAsMCwwLDE4OS43NCwzMTAuNjhaIi8+CiAgICA8cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik0xMDcuNjksMzE4LjI4Yy0uMjYsMC0uMjYuNDUsMCwuNDVBLjIzLjIzLDAsMCwwLDEwNy42OSwzMTguMjhaIi8+CiAgICA8cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik0yNi45MSwzMTAuNjhjLS4yNiwwLS4yNi40NSwwLC40NUEuMjMuMjMsMCwwLDAsMjYuOTEsMzEwLjY4WiIvPgogICAgPHBhdGggY2xhc3M9ImNscy0xIiBkPSJNMjYuOTEsMjQ1Yy0uMjYsMC0uMjYuNDQsMCwuNDRBLjIyLjIyLDAsMCwwLDI2LjkxLDI0NVoiLz4KICAgIDxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTIxMi42NCwxMjUuOWMtLjUzLDAtLjUzLjksMCwuOVMyMTMuMTcsMTI1LjksMjEyLjY0LDEyNS45WiIvPgogICAgPHBhdGggY2xhc3M9ImNscy0xIiBkPSJNMjE1LjE5LDQ5Ljg3YS40NS40NSwwLDAsMCwwLC45QzIxNS43Miw1MC43NywyMTUuNzIsNDkuODcsMjE1LjE5LDQ5Ljg3WiIvPgogICAgPHBhdGggY2xhc3M9ImNscy0xIiBkPSJNMjk1LjMzLDkyLjczYy0uNTMsMC0uNTMuODksMCwuODlTMjk1Ljg2LDkyLjczLDI5NS4zMyw5Mi43M1oiLz4KICAgIDxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTE5Ny4zOCwyNjMuNTZjLS41MywwLS41NC45LDAsLjlTMTk3LjkxLDI2My41NiwxOTcuMzgsMjYzLjU2WiIvPgogICAgPHBhdGggY2xhc3M9ImNscy0xIiBkPSJNMTY0Ljk0LDIzNi41Yy0uNTMsMC0uNTMuODksMCwuODlTMTY1LjQ3LDIzNi41LDE2NC45NCwyMzYuNVoiLz4KICAgIDxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTgyLjI1LDI5My44N2MtLjUzLDAtLjUzLjg5LDAsLjg5UzgyLjc4LDI5My44Nyw4Mi4yNSwyOTMuODdaIi8+CiAgICA8cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik0xMjguMDUsMTcuMzhjLS41MywwLS41NC45LDAsLjlTMTI4LjU4LDE3LjM4LDEyOC4wNSwxNy4zOFoiLz4KICAgIDxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTI0LjM3LDQ1Yy0uNTMsMC0uNTMuOSwwLC45UzI0LjksNDUsMjQuMzcsNDVaIi8+CiAgICA8cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik03Ni41MywxNTIuMTdhLjQ1LjQ1LDAsMCwwLDAsLjlDNzcuMDYsMTUzLjA3LDc3LjA2LDE1Mi4xNyw3Ni41MywxNTIuMTdaIi8+CiAgICA8cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik0yMS4xOSwxNzAuODNjLS41MywwLS41My45LDAsLjlTMjEuNzIsMTcwLjgzLDIxLjE5LDE3MC44M1oiLz4KICAgIDxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTYxLjksMjI4LjJjLS41MywwLS41NC45LDAsLjlTNjIuNDMsMjI4LjIsNjEuOSwyMjguMloiLz4KICAgIDxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTEyLjI4LDI2Ni4yMmMtLjUzLDAtLjUzLjksMCwuOUEuNDUuNDUsMCwwLDAsMTIuMjgsMjY2LjIyWiIvPgogICAgPHBhdGggY2xhc3M9ImNscy0xIiBkPSJNMjYwLjM1LDMxOC4wNmEuNDUuNDUsMCwwLDAsMCwuOUMyNjAuODgsMzE5LDI2MC44OCwzMTguMDYsMjYwLjM1LDMxOC4wNloiLz4KICAgIDxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTI1My4zNSwyNjEuMzhjLS41MywwLS41My45LDAsLjlTMjUzLjg4LDI2MS4zOCwyNTMuMzUsMjYxLjM4WiIvPgogICAgPHBhdGggY2xhc3M9ImNscy0xIiBkPSJNMzEwLjU5LDIzNS4xMWMtLjUzLDAtLjUzLjksMCwuOUEuNDUuNDUsMCwwLDAsMzEwLjU5LDIzNS4xMVoiLz4KICAgIDxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTIxOSw3LjQ4Yy0uNzksMC0uOCwxLjM1LDAsMS4zNVMyMTkuOCw3LjQ4LDIxOSw3LjQ4WiIvPgogICAgPHBhdGggY2xhc3M9ImNscy0xIiBkPSJNMTc4LjkzLDM3LjJjLS44LDAtLjgsMS4zNSwwLDEuMzVTMTc5LjczLDM3LjIsMTc4LjkzLDM3LjJaIi8+CiAgICA8cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik0yOTcuODcsMTAuMjVjLS43OSwwLS44LDEuMzQsMCwxLjM0UzI5OC42NywxMC4yNSwyOTcuODcsMTAuMjVaIi8+CiAgICA8cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik0yODksNTkuMzJjLS44LDAtLjgsMS4zNSwwLDEuMzVTMjg5Ljc3LDU5LjMyLDI4OSw1OS4zMloiLz4KICAgIDxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTE2Ni44NSwyNTdjLS44LDAtLjgsMS4zNSwwLDEuMzVTMTY3LjY0LDI1NywxNjYuODUsMjU3WiIvPgogICAgPHBhdGggY2xhc3M9ImNscy0xIiBkPSJNMTI4LjA1LDI0NC41N2MtLjgsMC0uOCwxLjM0LDAsMS4zNFMxMjguODUsMjQ0LjU3LDEyOC4wNSwyNDQuNTdaIi8+CiAgICA8cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik0zMTAuNTksMjY5LjQ1Yy0uNzksMC0uNzksMS4zNSwwLDEuMzVTMzExLjM5LDI2OS40NSwzMTAuNTksMjY5LjQ1WiIvPgogICAgPHBhdGggY2xhc3M9ImNscy0xIiBkPSJNMzA0Ljg3LDMxMS42MWMtLjgsMC0uOCwxLjM1LDAsMS4zNVMzMDUuNjcsMzExLjYxLDMwNC44NywzMTEuNjFaIi8+CiAgICA8cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik0xMi45Miw4OC4zNWMtLjgsMC0uOCwxLjM1LDAsMS4zNVMxMy43Miw4OC4zNSwxMi45Miw4OC4zNVoiLz4KICAgIDxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTQyLjgyLDI5LjZjLS44LDAtLjgsMS4zNSwwLDEuMzVTNDMuNjEsMjkuNiw0Mi44MiwyOS42WiIvPgogICAgPHBhdGggY2xhc3M9ImNscy0xIiBkPSJNODcuMzQsMjYzLjkyYy0uOCwwLS44LDEuMzUsMCwxLjM1Uzg4LjE0LDI2My45Miw4Ny4zNCwyNjMuOTJaIi8+CiAgICA8cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik03Ni41MywzMTMuNjljLS44LDAtLjgsMS4zNCwwLDEuMzRTNzcuMzIsMzEzLjY5LDc2LjUzLDMxMy42OVoiLz4KICAgIDxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTIwMS4yOSw3Ni44NGEuMjIuMjIsMCwwLDAsMCwuNDRDMjAxLjU1LDc3LjI4LDIwMS41NSw3Ni44NCwyMDEuMjksNzYuODRaIi8+CiAgICA8cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik0yNjAsMS4xNWEuMjMuMjMsMCwwLDAsMCwuNDVDMjYwLjI4LDEuNiwyNjAuMjgsMS4xNSwyNjAsMS4xNVoiLz4KICAgIDxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTI2My44NC4yYS4yMi4yMiwwLDAsMCwwLC40NEEuMjIuMjIsMCwwLDAsMjYzLjg0LjJaIi8+CiAgICA8cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik0yNjMsNi45MWEuMjMuMjMsMCwwLDAsMCwuNDVDMjYzLjIyLDcuMzYsMjYzLjIyLDYuOTEsMjYzLDYuOTFaIi8+CiAgICA8cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik0yNjYuMTksNWMtLjI2LDAtLjI2LjQ1LDAsLjQ1QS4yMy4yMywwLDAsMCwyNjYuMTksNVoiLz4KICAgIDxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTI2OS4xMywxMy4zYy0uMjYsMC0uMjYuNDUsMCwuNDVBLjIzLjIzLDAsMCwwLDI2OS4xMywxMy4zWiIvPgogICAgPHBhdGggY2xhc3M9ImNscy0xIiBkPSJNMjc2Ljg4LDMuM2MtLjI2LDAtLjI2LjQ0LDAsLjQ0QS4yMi4yMiwwLDAsMCwyNzYuODgsMy4zWiIvPgogICAgPHBhdGggY2xhc3M9ImNscy0xIiBkPSJNMjY5LjMsMjM5Ljc4YS4yMy4yMywwLDAsMCwwLC40NUMyNjkuNTYsMjQwLjIzLDI2OS41NywyMzkuNzgsMjY5LjMsMjM5Ljc4WiIvPgogICAgPHBhdGggY2xhc3M9ImNscy0xIiBkPSJNMjgwLjY3LDIyOS44OWMtLjI2LDAtLjI2LjQ1LDAsLjQ1QS4yMy4yMywwLDAsMCwyODAuNjcsMjI5Ljg5WiIvPgogICAgPHBhdGggY2xhc3M9ImNscy0xIiBkPSJNMjgzLDIzNS42NmEuMjMuMjMsMCwwLDAsMCwuNDVDMjgzLjIxLDIzNi4xMSwyODMuMjEsMjM1LjY2LDI4MywyMzUuNjZaIi8+CiAgICA8cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik0yODAuNjcsMjQwLjYxYy0uMjYsMC0uMjYuNDUsMCwuNDVBLjIzLjIzLDAsMCwwLDI4MC42NywyNDAuNjFaIi8+CiAgICA8cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik0yNzMuMDksMjQ5LjY3YS4yMy4yMywwLDAsMCwwLC40NUEuMjMuMjMsMCwwLDAsMjczLjA5LDI0OS42N1oiLz4KICAgIDxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTI3My4wOSwyMzEuNTRhLjIzLjIzLDAsMCwwLDAsLjQ1QS4yMy4yMywwLDAsMCwyNzMuMDksMjMxLjU0WiIvPgogICAgPHBhdGggY2xhc3M9ImNscy0xIiBkPSJNMjk3LjM1LDIxNS4wNmMtLjI2LDAtLjI2LjQ1LDAsLjQ1QS4yMy4yMywwLDAsMCwyOTcuMzUsMjE1LjA2WiIvPgogICAgPHBhdGggY2xhc3M9ImNscy0xIiBkPSJNODcuNzIsMjE0LjI0Yy0uMjYsMC0uMjYuNDUsMCwuNDVBLjIzLjIzLDAsMCwwLDg3LjcyLDIxNC4yNFoiLz4KICAgIDxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTk5LjEsMjIyLjQ4YS4yMy4yMywwLDAsMCwwLC40NUM5OS4zNiwyMjIuOTMsOTkuMzYsMjIyLjQ4LDk5LjEsMjIyLjQ4WiIvPgogICAgPHBhdGggY2xhc3M9ImNscy0xIiBkPSJNMTI2Ljg1LDIwNy42NWEuMjMuMjMsMCwwLDAsMCwuNDVDMTI3LjExLDIwOC4xLDEyNy4xMSwyMDcuNjUsMTI2Ljg1LDIwNy42NVoiLz4KICAgIDxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTg5LjI0LDE5MmEuMjMuMjMsMCwwLDAsMCwuNDVBLjIzLjIzLDAsMCwwLDg5LjI0LDE5MloiLz4KICAgIDxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTk2LjgyLDIxNS4wNmMtLjI2LDAtLjI2LjQ1LDAsLjQ1QS4yMy4yMywwLDAsMCw5Ni44MiwyMTUuMDZaIi8+CiAgICA8cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik0xMTAuMDcsMjMyLjM3YS4yMy4yMywwLDAsMCwwLC40NUMxMTAuMzMsMjMyLjgyLDExMC4zMywyMzIuMzcsMTEwLjA3LDIzMi4zN1oiLz4KICAgIDxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTIyMi4yOSwzMDAuNzZhLjIzLjIzLDAsMCwwLDAsLjQ1QzIyMi41NSwzMDEuMjEsMjIyLjU1LDMwMC43NiwyMjIuMjksMzAwLjc2WiIvPgogICAgPHBhdGggY2xhc3M9ImNscy0xIiBkPSJNMjEzLjE5LDMxOC4wNmEuMjMuMjMsMCwwLDAsMCwuNDVDMjEzLjQ1LDMxOC41MSwyMTMuNDYsMzE4LjA2LDIxMy4xOSwzMTguMDZaIi8+CiAgICA8cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik0yMjMuMDUsMjYzYS4yMy4yMywwLDAsMCwwLC40NUMyMjMuMzEsMjYzLjQxLDIyMy4zMSwyNjMsMjIzLjA1LDI2M1oiLz4KICAgIDxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTE4NC41OCwxODAuNDNhLjIzLjIzLDAsMCwwLDAtLjQ1QzE4NC4zMiwxODAsMTg0LjMyLDE4MC40MywxODQuNTgsMTgwLjQzWiIvPgogICAgPHBhdGggY2xhc3M9ImNscy0xIiBkPSJNMjMxLjY1LDE2OC42OGEuMjMuMjMsMCwwLDAsMC0uNDVBLjIzLjIzLDAsMCwwLDIzMS42NSwxNjguNjhaIi8+CiAgICA8cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik0yMjQsMTk0LjQ4Yy41MywwLC41My0uOSwwLS45UzIyMy40OCwxOTQuNDgsMjI0LDE5NC40OFoiLz4KICAgIDxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTE5OS4xMSwxNzguNmMuMjYsMCwuMjYtLjQ0LDAtLjQ0QS4yMi4yMiwwLDAsMCwxOTkuMTEsMTc4LjZaIi8+CiAgICA8cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik0yMDguMiwxNjEuM2EuMjMuMjMsMCwwLDAsMC0uNDVDMjA3Ljk0LDE2MC44NSwyMDcuOTQsMTYxLjMsMjA4LjIsMTYxLjNaIi8+CiAgICA8cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik0xOTguMzUsMTk1LjA4Yy4yNiwwLC4yNi0uNDQsMC0uNDRBLjIyLjIyLDAsMCwwLDE5OC4zNSwxOTUuMDhaIi8+CiAgICA8cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik0xMjEuNDQsMzA1LjdjLS4yNiwwLS4yNy40NSwwLC40NUEuMjMuMjMsMCwwLDAsMTIxLjQ0LDMwNS43WiIvPgogICAgPHBhdGggY2xhc3M9ImNscy0xIiBkPSJNMjUzLjM4LDEuNjVhLjIzLjIzLDAsMCwwLDAsLjQ1QzI1My42NCwyLjEsMjUzLjY0LDEuNjUsMjUzLjM4LDEuNjVaIi8+CiAgICA8cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik0yMzYuNjksMTQuODNjLS4yNiwwLS4yNi40NSwwLC40NUEuMjMuMjMsMCwwLDAsMjM2LjY5LDE0LjgzWiIvPgogICAgPHBhdGggY2xhc3M9ImNscy0xIiBkPSJNMjU0Ljg5LDMwLjQ5Yy0uMjYsMC0uMjYuNDUsMCwuNDVBLjIzLjIzLDAsMCwwLDI1NC44OSwzMC40OVoiLz4KICAgIDxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTI1NS42NSwxNGEuMjMuMjMsMCwwLDAsMCwuNDVBLjIzLjIzLDAsMCwwLDI1NS42NSwxNFoiLz4KICAgIDxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTI4NC40NiwyMC42Yy0uMjYsMC0uMjYuNDUsMCwuNDVBLjIzLjIzLDAsMCwwLDI4NC40NiwyMC42WiIvPgogICAgPHBhdGggY2xhc3M9ImNscy0xIiBkPSJNMjk1LjA4LDQuMTJhLjIzLjIzLDAsMCwwLDAsLjQ1QS4yMy4yMywwLDAsMCwyOTUuMDgsNC4xMloiLz4KICAgIDxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTI4OC4yNiwwYS4yMy4yMywwLDAsMCwwLC40NUMyODguNTIuNDUsMjg4LjUyLDAsMjg4LjI2LDBaIi8+CiAgICA8cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik0zMDguNzMsMy4zYS4yMi4yMiwwLDAsMCwwLC40NEMzMDksMy43NCwzMDksMy4zLDMwOC43MywzLjNaIi8+CiAgICA8cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik0zMTkuMzQsMTQuODNjLS4yNiwwLS4yNi40NSwwLC40NUEuMjMuMjMsMCwwLDAsMzE5LjM0LDE0LjgzWiIvPgogICAgPHBhdGggY2xhc3M9ImNscy0xIiBkPSJNNjIuNTYsOTQuMDhhLjIzLjIzLDAsMCwwLDAsLjQ1QzYyLjgyLDk0LjUzLDYyLjgyLDk0LjA4LDYyLjU2LDk0LjA4WiIvPgogICAgPHBhdGggY2xhc3M9ImNscy0xIiBkPSJNNjMuNjEsMTAxLjY0Yy0uMjYsMC0uMjYuNDUsMCwuNDVBLjIzLjIzLDAsMCwwLDYzLjYxLDEwMS42NFoiLz4KICAgIDxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTU1LjI3LDEwOS4wNWEuMjMuMjMsMCwwLDAsMCwuNDVBLjIzLjIzLDAsMCwwLDU1LjI3LDEwOS4wNVoiLz4KICAgIDxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTEyMi4zNywyODcuNjhjLjMxLS4zNS0uMTgtLjg4LS41LS41NFMxMjIuMDUsMjg4LDEyMi4zNywyODcuNjhaIi8+CiAgICA8cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik0xMTIuNzksMjgwYy4zMi0uMzUtLjE3LS44OS0uNDktLjU0UzExMi40OCwyODAuMzYsMTEyLjc5LDI4MFoiLz4KICAgIDxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTExNC42MSwyNjAuMzJjLjMxLS4zNC0uMTgtLjg4LS41LS41M1MxMTQuMjksMjYwLjY3LDExNC42MSwyNjAuMzJaIi8+CiAgICA8cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik05My43NywxMzAuNTJjLS4yNiwwLS4yNi40NSwwLC40NUEuMjMuMjMsMCwwLDAsOTMuNzcsMTMwLjUyWiIvPgogICAgPHBhdGggY2xhc3M9ImNscy0xIiBkPSJNMTQ0LjUxLDkzLjg1YS4yMy4yMywwLDAsMCwwLC40NUMxNDQuNzcsOTQuMywxNDQuNzcsOTMuODUsMTQ0LjUxLDkzLjg1WiIvPgogICAgPHBhdGggY2xhc3M9ImNscy0xIiBkPSJNMTY5LjQzLDkyLjA4Yy4yLS4xOS0uMDctLjUyLS4yNy0uMzNTMTY5LjIzLDkyLjI3LDE2OS40Myw5Mi4wOFoiLz4KICAgIDxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTE3MywxNDguMTZjLjItLjE5LS4wNy0uNTItLjI3LS4zM1MxNzIuODQsMTQ4LjM1LDE3MywxNDguMTZaIi8+CiAgICA8cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik0xMjUuNjgsMTc3LjQ3Yy4yLS4xOS0uMDctLjUyLS4yNy0uMzNTMTI1LjQ4LDE3Ny42NiwxMjUuNjgsMTc3LjQ3WiIvPgogICAgPHBhdGggY2xhc3M9ImNscy0xIiBkPSJNMTExLjc4LDEyMS40M2MuMi0uMTktLjA3LS41My0uMjctLjM0UzExMS41OCwxMjEuNjIsMTExLjc4LDEyMS40M1oiLz4KICAgIDxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTIwOCwxMjIuODRjLjQtLjM4LS4xNC0xLjA2LS41NC0uNjhTMjA3LjU2LDEyMy4yMiwyMDgsMTIyLjg0WiIvPgogICAgPHBhdGggY2xhc3M9ImNscy0xIiBkPSJNMTIxLjY3LDE0Ny45Yy40LS4zOC0uMTQtMS4wNi0uNTQtLjY4UzEyMS4yNywxNDguMjgsMTIxLjY3LDE0Ny45WiIvPgogICAgPHBhdGggY2xhc3M9ImNscy0xIiBkPSJNMTQ2LjY5LDE2OC41Yy42LS41Ny0uMjEtMS41OS0uODEtMVMxNDYuMDksMTY5LjA3LDE0Ni42OSwxNjguNVoiLz4KICA8L2c+Cjwvc3ZnPgo=");
}

              
            
!

JS

              
                /* 
Look mah' no JS!!!!


*/
              
            
!
999px

Console