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 is required to process package imports. If you need a different preprocessor remove all packages first.

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

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.

Editor Settings

Code Indentation

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

Visit your global Editor Settings.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

HTML

            
              <div class="snow-globe">
	<div class="globe-wrapper">
	<div class="globe">
		<div class="globe-inner">
			<div class="snow-storm"></div>
			<div class="tree">
				<span class="star">&#9734;</span>
					<span class="bulbs">
						<span class="bulb"></span>
						<span class="bulb"></span>
						<span class="bulb"></span>
						<span class="bulb"></span>
						<span class="bulb"></span>
						<span class="bulb"></span>
						<span class="bulb"></span>
						<span class="bulb"></span>
						<span class="bulb"></span>
						<span class="bulb"></span>
						<span class="bulb"></span>
						<span class="bulb"></span>
						<span class="bulb"></span>
					</span>
					<div class="tree-section">
						<div class="tree-leaves"></div>
						<div class="tree-snow"></div>
					</div>
					<div class="tree-section">
						<div class="tree-leaves"></div>
						<div class="tree-snow"></div>
					</div>
					<div class="tree-section">
						<div class="tree-leaves"></div>
						<div class="tree-snow"></div>
					</div>
					<div class="tree-section">
						<div class="tree-leaves"></div>
						<div class="tree-snow"></div>
					</div>
					<div class="tree-section">
						<div class="tree-leaves"></div>
						<div class="tree-snow"></div>
					</div>
			</div>
			<div class="snowman">
				<div class="buddy">
					<div class="head">
						<div class="ear left">
							<div class="hat"></div>
						</div>
						<div class="ear right"></div>
						<div class="face">
							<div class="eyes">
								<div class="eyefix right"></div>
								<div class="eyefix left"></div>
								<div class="eye left">
									<div class="eyelid top"></div>
									<div class="eyelid bottom"></div>
									<div class="pupil"></div>
								</div>
								<div class="eye right">
									<div class="eyelid top"></div>
									<div class="eyelid bottom"></div>
									<div class="pupil"></div>
								</div>
							</div>
								<div class="snoot"></div>
								<div class="mouth">
									<div class="whisker-pad left">
										<div class="whiskers">
											<div class="whisker"></div>
											<div class="whisker"></div>
											<div class="whisker"></div>
										</div>
									</div>
									<div class="whisker-pad right">
										<div class="whiskers">
											<div class="whisker"></div>
											<div class="whisker"></div>
											<div class="whisker"></div>
										</div>
									</div>
								</div>
							<div class="snow-face"></div>
						</div>
					</div>
					<div class="body">
					<div class="chest"></div>
					<div class="back-leg left"></div>
					<div class="back-leg right"></div>
					<div class="front-leg left">
						<div class="foot left">
							<div class="bean"></div>
							<div class="bean"></div>
							<div class="bean"></div>
						</div>
					</div>
					<div class="front-leg right">
						<div class="foot right">
							<div class="bean"></div>
							<div class="bean"></div>
							<div class="bean"></div>
						</div>
					</div>
				</div>
				<div class="tail"></div>
<div class="snow-pile-head"></div>	
<div class="snow-pile-upper-body"></div>	
<div class="snow-pile-lower-body"></div>	
<div class="snow-pile-feet left"></div>	
<div class="snow-pile-feet right"></div>	
</div>
			</div>
			<div class="hill front-mask"></div>
			<div class="hill front"></div>
			<div class="hill middle"></div>
			<div class="hill back"></div>
		</div>
	</div>
		</div>
	<div class="base">
		<div class="base-top">
			<div class="plate-top"></div>
			<div class="plate-sides"></div>
			<div class="plate-bottom"></div>
		</div>
		<div class="base-middle">
			<div class="plate-top"></div>
			<div class="plate-sides">
				<label class="switch">
					<input type="checkbox" name="globe-switch">
					<span class="button round"></span>
				</label>
			</div>
			<div class="plate-bottom"></div>
		</div>
		<div class="base-bottom">
			<div class="plate-top"></div>
			<div class="plate-sides"></div>
			<div class="plate-bottom"></div>
		</div>
<!-- 		<div class="circle bottom"></div> -->
	</div>
</div>
            
          
!

CSS

            
              :root {
	--floofMain: grey;
	--floofHighlight: lightgrey;
	--floofOutline: #444444;
	--icyHighlights: rgba(173, 216,230,1);
	--hillMain: #7fc885;
	--hillHighlight: #538257;
	--snow: rgba(255,255,255,1);
	--snowHighlight: rgba(0,212,255,1);
	
	--primaryAnimationDuration: 12s;
	--snowballAnimationDelay: 1.5s;
	--snowStormAnimationDelay: 8.75s;
	--addAllSnowAnimationDelay: 11s;
	--addSnowToFieldsAnimationDuration: 19s;
	--animationAddSnow: all-the-snow 1s var(--addAllSnowAnimationDelay);
	
	--side-gradient: linear-gradient(87deg, rgba(140,140,140,1) 0%, rgba(208,208,208,1) 8%, rgba(140,140,140,1) 50%, rgba(208,208,208,1) 92%, rgba(140,140,140,1) 100%);
--top-gradient: linear-gradient(87deg, rgba(140,140,140,1) 55%, rgba(208,208,208,1) 92%);
}

html,body {
	background: #4bbee3;
	display: flex;
	width: 100%;
	height: 100%;
}

/*************************/
/******* SNOW GLOBE ******/
/*************************/

.snow-globe {
	margin: auto;
	transform-origin: top;
	transform: scale(0.8,0.8);
}

// Wrapped for mounting
.globe-wrapper {
	display: flex;
    z-index: 1;
    // border-radius: 50%;
    margin: auto;
    width: 800px;
    height: 800px;
    position: relative;
    overflow: hidden;
	clip-path: ellipse(85% 47% at 50% 48%);
	-webkit-clip-path: ellipse(85% 47% at 50% 48%);
	// background: orange;
}

.globe {
	
	&.frosty {	
		// animation: snowy-floof 1s var(--addAllSnowAnimationDelay);
		// animation-fill-mode: forwards;
	}
	
	display: flex;
	z-index: 1;
	border-radius: 50%;
	margin: auto;
	width: 95%;
	height: 95%;
	top: 10px;
	position: relative;
	// overflow: hidden;
	background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, rgba(206,240,255,0.4234068627450981) 100%);
	border-bottom: 3px solid white;
	border-top: 1px solid white;
}

.globe-inner {
	width: 95%;
	height: 95%;
	padding: 10px;
	position: relative;
	margin: auto;
	border-radius: 50%;
	overflow: hidden;
	z-index: 1;
	// background: radial-gradient(circle, rgba(255,255,255,1) 20%, rgba(75,190,227,1) 75%);
    // background-position: 40% -10%;
    // background-size: 130% 130%;

	// GLOBE SHINE
	&:after {
		content: '';
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 999;
		border-radius: 50%;
		
		background: radial-gradient(circle, rgba(255, 255, 255, 0) 50%, rgba(206, 240, 255, 1) 100%);
	}
}

/*************************/
/******* LANDSCAPE *******/
/*************************/

.hill {
	border-radius: 50%;
	width: 130%;
	height: 60%;
	position: absolute;
	overflow: hidden;
	background: var(--hillMain);
	
	.frosty & {
		animation: snowy-fields-main var(--addSnowToFieldsAnimationDuration);
		animation-fill-mode: forwards;
	}
				
	&.front {
		bottom: -210px;
		right: -260px;
		z-index: 4;

		&:after {
			content: '';
			position: absolute;
			background: linear-gradient(-15deg, rgba(255,255,255,0) 84%, var(--hillHighlight) 100%);
			width: 100%;
			height: 100%;
			
			.frosty & {
				animation: snowy-fields-highlights-front 1s var(--addAllSnowAnimationDelay);
				animation-fill-mode: forwards;
			}
	}
}
	
	&.front-mask {
		z-index: 11;
		bottom: -305px;
		right: -260px;
    z-index: 11;
    background: var(--hillMain);
    border-radius: 0;
    transform: rotate(-8deg);
		box-shadow: 5px 10px 21px 20px rgba(127,200,133,1);
		
		.frosty & {
			animation: snowy-fields-main var(--addSnowToFieldsAnimationDuration), border-fix var(--addSnowToFieldsAnimationDuration);
			animation-fill-mode: forwards;
		}
		
		&:after {
			content: '';
			position: absolute;
			background: linear-gradient(180deg, rgba(255, 255, 255, 0) 50%, var(--hillHighlight) 100%);
			bottom: 245px;
			right: 40px;
			border-radius: 50% 50% 50% 50%;
			width: 99%;
			height: 60%;
			transform: rotate(-3deg);
			
			.frosty & {
				animation: snowy-fields-highlights-front-mask 1s var(--addAllSnowAnimationDelay);
				animation-fill-mode: forwards;
			}
		}
	}
	
	&.middle {
		bottom: -180px;
		right: 200px;
		z-index: 3;
		
		&:after {
			content: '';
			position: absolute;
			background: linear-gradient(171deg, rgba(255,255,255,0) 24%, var(--hillHighlight) 100%);
			width: 100%;
			height: 100%;
			
			.frosty & {
				animation: snowy-fields-highlights-middle 1s var(--addAllSnowAnimationDelay);
				animation-fill-mode: forwards;
			}
		}
	}
	
	&.back {
		bottom: -120px;
		right: -310px;
		width: 90%;
		z-index: 2;
			
		&:after {
			content: '';
			position: absolute;
			background: linear-gradient(207deg, rgba(255,255,255,0) 24%, var(--hillHighlight) 100%);
			width: 100%;
			height: 100%;
			
			.frosty & {
				animation: snowy-fields-highlights-back 1s var(--addAllSnowAnimationDelay);
				animation-fill-mode: forwards;
			}
		}
	}
}

/*************************/
/********* TREE **********/
/*************************/

.tree {
	position: absolute;
	width: 27%;
	height: 50%;
	z-index: 10;
	bottom: 30%;
	left: 10%;
	z-index: 3;
}

.tree-section {
	width: 30%;
	height: 30%;
	margin: 0 auto;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	
	&:nth-of-type(1) {
    z-index: 1;
    height: 30%;
		bottom: 2%;
    width: 95%;
	}
	
	&:nth-of-type(2) {
    z-index: 2;
    height: 30%;
    width: 80%;
    bottom: 14%;
	}
	
	&:nth-of-type(3) {
    z-index: 3;
    height: 30%;
    width: 60%;
    bottom: 27%;
	}
	
	&:nth-of-type(4) {
    z-index: 4;
    height: 30%;
    width: 50%;
    bottom: 39%;
	}
	
	&:nth-of-type(5) {
    z-index: 5;
    height: 25%;
    width: 36%;
    bottom: 52%;
	}
}

.tree-snow {
	z-index: 10;
	position: absolute;
	border-radius: 130% 120% 100% 70%;
	margin: 0 auto;
	transform-origin: top;
	background: linear-gradient(180deg, var(--snow) 0%, rgba(201,246,255,1) 86%, var(--snowHighlight) 100%);
	background-size: 400% 400%;
	background-position: 16% -80%;
	height: 7%;
	border-radius: 50% 60% 30% 30%;
	width: 100%;
	left: 0;
	right: 0;
	bottom: -2%;
	opacity: 0;
	
	.frosty & {
		animation: var(--animationAddSnow);
		animation-fill-mode: forwards;
	}
}

.tree-leaves {
	background: linear-gradient(0deg, rgba(107,167,112,1) 0%, rgba(83,130,87,1) 80%, rgba(54,85,57,1) 100%);
	-webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
	clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
	height: 100%;
	
	.tree-section:nth-of-type(5) & {
background: rgb(107,167,112);
background: linear-gradient(0deg, rgba(107,167,112,1) 0%, rgba(127,200,133,1) 100%);
	}
}

// DECORATIONS

.bulbs {
position: absolute;
	top: 22%;
	left: 16%;
	right: 16%;
	bottom: 0;
	z-index: 7;
	opacity: 0;
	
	.frosty & {
		animation: var(--animationAddSnow);
		animation-fill-mode: forwards;
	}
}

.bulb {
	width: 15px;
	height: 15px;
	position: absolute;
	border-radius: 50%;
	top: 40px;
	left: 25px;
	z-index: 1;
	
	&:nth-child(3n+1) {
		background: lightblue;
		animation: colours-one 2s ease-in-out infinite;
	}
	
	&:nth-child(3n+2) {
		background: gold;
		animation: colours-two 2s ease-in-out infinite;
	}
	
	&:nth-child(3n+3) {
		background: purple;
		animation: colours-three 2s ease-in-out infinite;
	}
	
	// Bulb positioning
	
	&:nth-child(1) {
		top: 35px;
		left: 61px;
	}
	
	&:nth-child(2) {
		top: 65px;
		left: 55px;
	}
	
	&:nth-child(3) {
		top: 122px;
		left: 84px;
	}
	
	&:nth-child(4) {
		top: 105px;
		left: 65px;
	}
	
	&:nth-child(5) {
		top: 120px;
		left: 40px;
	}
	
	&:nth-child(6) {
		top: 155px;
		left: 30px;
	}
	
	&:nth-child(7) {
		top: 165px;
		left: 58px;
	}
	
	&:nth-child(8) {
		top: 155px;
		left: 90px;
	}
	
	&:nth-child(9) {
		top: 215px;
		left: 110px;
	}
	
	&:nth-child(10) {
		top: 215px;
		left: 60px;
	}
	
	&:nth-child(11) {
		top: 215px;
		left: 10px;
	}
	
	&:nth-child(12) {
		top: 200px;
		left: 30px;
	}
	
	&:nth-child(13) {
		top: 200px;
		left: 90px;
	}
}

.star {
	font-size: 70px;
	color: gold;
	display: inline-block;
	position: absolute;
	left: 0;
	right: 0;
	margin: 0 auto;
	width: 35%;
	text-align: center;
	bottom: 69%;
	z-index: 10;
	font-weight: bold;
	opacity: 0;
	
	.frosty & {
		animation: var(--animationAddSnow);
		animation-fill-mode: forwards;
	}
}

/*************************/
/******** SNOWMAN ********/
/*************************/

.snowman {
	position: absolute;
	width: 200px;
	height: 400px;
	// background: green;
	right: 30%;
	bottom: 25%;
	margin: auto;
	z-index: 5;
}

/*************************/
/********* SNOW **********/
/*************************/

.flake {
	position:absolute;
	cursor: default;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	-o-user-select: none;
	user-select: none;
	
	opacity: 0;
	animation: snow-fade-in 0.5s 0.5s;
	animation-fill-mode: forwards;
}

.snow-storm {
	width: 500%;
	height: 100%;
	background: orange;
	position: absolute;
	left: -500%;
	right: 0;
	top: 0;
	bottom: 0;
	z-index: 20;
	background: rgb(255,255,255);
background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.41780462184873945) 15%, rgba(221,249,255,1) 40%, rgba(221,249,255,1) 60%, rgba(255,255,255,0.4514180672268907) 85%, rgba(255,255,255,0) 100%);
	
	.frosty & {
		animation: snow-storm var(--primaryAnimationDuration) var(--snowStormAnimationDelay) ease-out;
		animation-fill-mode: forwards;
	}
}


// BUDDY!

.buddy {
	margin: auto;
	position: relative;
}

.head {
	position: relative;
	display: inline-block;
	margin: auto;
	z-index: 3;
}

.ear {
    width: 100px;
    height: 90px;
    background: var(--floofMain);
    border-radius: 111% 58% 0% 0%;
    position: absolute;
		top: -10px;
    border-radius: 70px 14px;	
	
	&.right {
		right: -5px;
		rotate: 45deg;
		border-top: 3px solid var(--floofHighlight);
	}
	
	&.left {
		left: -5px;
		transform: rotate(-90deg);
    border-right: 3px solid var(--floofHighlight);
	}
	
	.frosty & {
		animation: snowy-floof 1s var(--addAllSnowAnimationDelay);
		animation-fill-mode: forwards;
	}

}

.face {
	width: 200px;
	height: 200px; 
	background: var(--floofMain);
	border-radius: 50% 50% 50% 50%;
	z-index: 2;
	position: relative;
	border-left: 2px solid var(--floofHighlight);
	border-right: 2px solid var(--floofHighlight);
	border-bottom: 0.5px solid var(--floofHighlight);
	border-top: 6px solid var(--floofMain);
	
	.frosty & {
		animation: snowy-floof 1s var(--addAllSnowAnimationDelay), snowy-borders 1s var(--addAllSnowAnimationDelay);
		animation-fill-mode: forwards;
	}
}

.eyes {
	display: grid;
	width: 80%;
	justify-content: space-around;
	margin: 0 auto;
	left: 0;
	right: 0;
	top: 25%;
	position: absolute;
	grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
	justify-items: center;
	z-index: 1;
}

// Stop the borders clipping the edges
.eyefix {
	position: absolute;
	z-index: 999;
	border: 6px solid var(--floofMain);
	z-index: 999;
	border-radius: 50%;
	width: 68px;
	height: 68px;
	margin: auto;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	
	&.left {
		grid-column: 1 / span 1;
	}
	
	&.right {
		grid-column: 2 / span 1;
	}
	
	.frosty & {
		animation: snowy-floof-eye-fix 1s var(--addAllSnowAnimationDelay);
		animation-fill-mode: forwards;
	}
}

.eye {
  width: 70px;
  height: 70px;
  display: flex;
  border-radius: 50%;
  position: relative;
  overflow: hidden;
	grid-column: 1 / span 1;
	
	&.left {
		
	}
	
	&.right {
		grid-column: 2 / span 1;
	}
	
	
	&:before {
		content: '';
		width: 100%;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background: gold;
		position: absolute;
		border-radius: 50%;
	}
	
	&:after {
		content: '';
		width: 10px;
		height: 10px;
		background: white;
		border-radius: 50%;
		position: absolute;
		left: 10px;
		right: 0;
		margin: auto;
		top: 10px;
	}
}

.eyelid {
	position: absolute;
	width: 100%;
	z-index: 10;
	animation: blink 5s ease-out infinite;
	background: var(--floofMain);
	
	.hunter & {
		animation: none;
	}

	&.top {
		top: -1px;
		border-bottom: 1px solid var(--floofOutline);
	}

	&.bottom {
		
		bottom: -1px;
		border-top: 1px solid var(--floofOutline);
	}
}

.pupil {
	width: 20px;
  height: 40px;
  background: #000;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  border-radius: 50%;
	transition: height .4s, width .2s ease-in-out;
	
	.hunter & {
		width: 55px;
		height: 55px;
	}
}

.snoot {
	position: absolute;
	transform: rotate(45deg);
	width: 18px;
	height: 18px;
	border-radius: 100% 20% 50% 20%;
	top: 112px;
	background-color: var(--floofOutline);
	left: 0;
	right: 0;
	margin: auto;
	z-index: 2;
	
	.frosty & {
		animation: icy-background 1s var(--addAllSnowAnimationDelay);
		animation-fill-mode: forwards;
	}
}

.mouth {
	position: absolute;
	top: 110px;
	left: 0;
	right: 0;
	margin: auto;
	display: flex;
	justify-content: center;
	
	.whisker-pad {
		position: relative;
		width: 40px;
		height: 40px;
		border-radius: 50%;
		border-bottom: 5px solid var(--floofOutline);
		
		.frosty & {
			animation: icy-borders 1s var(--addAllSnowAnimationDelay);
			animation-fill-mode: forwards;
		}
	}
}

.whisker {
	width: 70px;
	height: 10px;
	margin: auto;
	border-radius: 50%;
	border-top: 2px solid var(--floofHighlight);
	position: absolute;
	
	&:nth-of-type(1) {
		transform: rotate(5deg);
		left: -52px;
		top: 17px;
		
		.right & {
			transform: rotate(-5deg);
			left: 25px;
		}
	}
	
	&:nth-of-type(2) {
		top: 25px;
		transform: rotate(0deg);
		left: -48px;
		
		.right & {
			transform: rotate(0deg);
			left: 21px;
		}
	}
	
	&:nth-of-type(3) {
		top: 36px;
		transform: rotate(-12deg);
		left: -26px;
		width: 50px;
		
		.right & {
			transform: rotate(12deg);
			left: 20px;
		}
	}
	
	.frosty & {
		animation: icy-borders 1s var(--addAllSnowAnimationDelay);
		animation-fill-mode: forwards;
	}
}

.body {
	width: 160px;
	height: 240px;
	background: var(--floofMain);
	border-radius: 44%;
	margin: -40px auto 0;
	position: relative;
	z-index: 1;
}

.chest {
	background: var(--floofMain);
	position: absolute;
	z-index: 3;
	width: 120px;
	height: 90px;
	margin: 0 auto;
	left: 0;
	right: 0;
	top: 10px;
	border-radius: 50%;
}

	.back-leg {
		background: var(--floofMain);
    width: 100px;
    height: 180px;
    bottom: 0;
    position: absolute;
		
		&.left {
    	border-radius: 60% 0px 33% 50%;
			left: -30px;
			border-left: 2px solid var(--floofHighlight);
		}
		
		&.right {
			border-radius: 0px 60% 50% 33%;
    	right: -30px;
			border-right: 2px solid var(--floofHighlight);
		}
	}

	.front-leg {
		background: var(--floofMain);
    width: 50px;
    height: 240px;
    bottom: 0;
    position: absolute;
		border: 2px solid var(--floofHighlight);
		
		
		--shoulderCurve: 113%;
		--lowerLegInnerCurve: 85%;
		--lowerLegOuterCurve: 120%;
		
		&.left {
    	border-radius: var(--shoulderCurve) 50% var(--lowerLegInnerCurve) var(--lowerLegOuterCurve);
			left: -10px;
		}
		
		&.right {
			border-radius: 50% var(--shoulderCurve) var(--lowerLegOuterCurve) var(--lowerLegInnerCurve);
    	right: -10px;
		}
	}

.foot {
	width: 60px;
	height: 30px;
	display: flex;
	position: absolute;
	bottom: 0;
	left: -3px;
}

.bean {
	background: grey;
	width: 30px;
	height: 30px;
	border: 2px solid var(--floofHighlight);
	border-top: 0;
	position: absolute;
	bottom: -8px;
	
	.right & {
		border-radius: 40% 72% 50% 80%;
		border-left-color: var(--floofMain);
		transform: rotate(5deg);

		&:nth-of-type(1) {
			left: 20px;
			top: 4px;
		}

		&:nth-of-type(2) {
			top: 7px;
			left: 14px;
		}

		&:nth-of-type(3) {
			left: 5px;
			border-left-color: var(--floofHighlight);
		}
	}

	.left & {
		border-radius: 72% 40% 80% 50%;
		border-right-color: var(--floofMain);
		transform: rotate(5deg);

		&:nth-of-type(1) {
			left: 0px;
			top: 4px;

		}

		&:nth-of-type(2) {
			top: 7px;
			left: 6px;

		}

		&:nth-of-type(3) {
			left: 14px;
			border-right-color: var(--floofHighlight);
		}
	}
}

.tail {
	width: 25px;
	height: 200px;
	background: var(--floofMain);
	position: absolute;
	bottom: 20px;
	border: 3px solid var(--floofHighlight);
	border-radius: 100% 100% 60% 60%;
	left: 60px;
	transform: rotate(-45deg);
	transform-origin: bottom right;
	animation: tail 5s ease-out infinite;

	.hunter & {
		animation: none;
	}
	
	.frosty & {
		animation: snowy-floof 1s var(--addAllSnowAnimationDelay);
		animation-fill-mode: forwards;
	}
}


// SNOW STUFF HERE!!!!


.snow-pile-head {
	z-index: 3;	
	position: absolute;
	transform: rotate(230deg);
	width: 0px;
	height: 0px;
	border-radius: 150% 30% 100% 30%;
	background-color: var(--floofOutline);
	left: 0;
	right: 0;
	top: 20px;
	margin: 0 auto;
	transform-origin: top;	
	background: linear-gradient(-50deg, var(--snow) 54%, var(--snowHighlight) 100%);
	background-size: 400% 400%;
	background-position:6% -42%;

	.frosty & {
		animation: snow-animation-head var(--primaryAnimationDuration) var(--snowballAnimationDelay) ease-in;
		animation-fill-mode: forwards;
	}
}

.snow-pile-feet {
	z-index: 3;	
	position: absolute;
	width: 50px;
	height: 50px;
	opacity: 0;
	border-radius: 130% 120% 100% 70%;
	background-color: var(--floofOutline);
	left: 8px;
	bottom: 14px;
	margin: 0 auto;
	transform-origin: center bottom;
	transform: scale(0,0);
	background: linear-gradient(170deg, var(--snow) 54%, var(--snowHighlight) 100%);
	background-size: 400% 400%;
	background-position:16% -80%;

	
	&.right {
		left: auto;
		right: 10px;
	}
	
	.frosty & {
		animation: snow-animation-feet var(--primaryAnimationDuration) var(--snowballAnimationDelay) ease-in;
		animation-fill-mode: forwards;
	}
	
}

.snow-face {
	position: absolute;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	z-index: -1;
	background: linear-gradient(170deg, var(--snow) 54%, var(--snowHighlight) 100%);
	background-size: 400% 400%;
	background-position:16% -70%;
	opacity: 0;
	
	.frosty & {
		
		animation: var(--animationAddSnow);
		animation-fill-mode: forwards;
	}
}

.snow-pile-lower-body {
	z-index: 1;	
	position: absolute;
	width: 120%;
	height: 205px;
	border-radius: 50% 50% 40% 40%;
	border-bottom: 2px solid var(--icyHighlights);
	border-left: 1px solid var(--icyHighlights);
	border-right: 1px solid var(--icyHighlights);
	background-color: var(--floofOutline);
	left: -10%;
	right: -10%;
	bottom: -10px;
	margin: 0 auto;
	transform-origin: top;	
	background: linear-gradient(170deg, var(--snow) 54%, var(--snowHighlight) 100%);
	background-size: 400% 400%;
	background-position:16% -70%;
	opacity: 0;
	
	.frosty & {
		animation: var(--animationAddSnow);
		animation-fill-mode: forwards;
	}
}

.snow-pile-upper-body {
		z-index: 2;
    position: absolute;
    width: 200px;
		height: 150px;
    border-radius: 50% 50% 45% 45%;
    left: 0;
    right: 0;
    bottom: 130px;
    margin: 0 auto;
    transform-origin: top;
    background: linear-gradient(170deg, var(--snow) 54%, var(--snowHighlight) 100%);
		border-bottom: 2px solid var(--icyHighlights);
		border-left: 1px solid var(--icyHighlights);
		border-right: 1px solid var(--icyHighlights);
    background-size: 400% 400%;
    background-position: 16% -73%;
		opacity: 0;
	
	.frosty & {
			animation: var(--animationAddSnow);
		animation-fill-mode: forwards;
	}
}


// BASE OF GLOBE HERE!

.base {
	bottom: 91px;
	z-index: 0;
	position: relative;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.plate-top {
	width: 100%;
	height: 60px;
	background: var(--top-gradient);
	border-radius: 50%;
	position: relative;
	z-index: 3;
}

	.plate-sides {
		content: '';
		width: 100%;
		height: 20px;
		display: block;
		position: absolute;
		bottom: 10px;
		left: 0;
		right: 0;
		background: var(--side-gradient);
		z-index: 2;
	}
	
	.plate-bottom {
		content: '';
		width: 100%;
		height: 60px;
		display: block;
		position: absolute;
		bottom: -19px;
		left: 0;
		right: 0;
		background: var(--side-gradient);
		
		border-radius: 50%;
		z-index: 1;
	}

.base-top {
	position: relative;
	z-index: 3;
	width: 60%;
}

.base-middle {
	position: relative;
	z-index: 2;
	width: 70%;
	top: -30px;
	
	.plate-top {
		height: 70px;
	}
	
	.plate-sides {
		height: 90px;
		bottom: -55px;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.plate-bottom {
		bottom: -85px;
	}
}

.base-bottom {
	position: relative;
	z-index: 1;
	width: 80%;
	top: 10px;
	
	.plate-top {
		height: 70px;
		bottom: 5px;
	}
	.plate-sides {
		bottom: 20px;
	}
	.plate-bottom {
		bottom: -10px;
	}
}


.switch {
  position: relative;
  display: inline-block;
  width: 100px;
  height: 40px;
	margin: 60px auto 0;
}

.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.button {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle, rgba(0,0,0,1) 57%, rgba(140,140,140,1) 120%);
;
  -webkit-transition: .4s;
  transition: .4s;
	border-radius: 34px;
}

.button:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 5px;
  bottom: 5px;
  background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(221,185,0,1) 23%);
	background-size: 200% 200%;
	background-position: 41% 66%;
  transition: all .26s ease-in-out;
	border-radius: 50%;
	border: 2px solid black;
}

input:checked + .button:before {
  transform: translateX(60px);
}

.hat {
	width: 70px;
	height: 75px;
	background: linear-gradient(87deg, rgba(0,0,0,1) 0%, rgba(78,78,78,1) 81%, rgba(110,110,110,1) 100%);
	position: absolute;
	top: -27px;
	z-index: 10;
	left: 64px;
	transform: rotate(54deg);
	border-radius: 10px 10px 0 0;
	opacity: 0;
	
	&:before {
		content: '';
		background: linear-gradient(87deg, rgba(172,1,1,1) 0%, rgba(255,0,0,1) 44%, rgba(255,86,86,1) 100%);

		position: absolute;
		width: 102%;
		left: -1%;
		right: -1%;
		height: 10px;
		bottom: 0;
	}
	
	&:after {
		content: '';
		background: linear-gradient(87deg, rgba(0,0,0,1) 0%, rgba(78,78,78,1) 81%, rgba(110,110,110,1) 100%);
		position: absolute;
		width: 160%;
		left: -30%;
		right: -30%;
		height: 10px;
		bottom: -10px;
		border-radius: 4px;
	}
	
	.frosty & {
		animation: var(--animationAddSnow);
		animation-fill-mode: forwards;
	}
}

/*************************/
/**** ANIMATIONS HERE ****/
/*************************/

// GENERAL BEHAVIOUR

@keyframes blink {
	0% {
		height: 0;
	}
	3% {
		height: 50%;
	}
	9% {
		height: 0;
	}
	100% {
		height: 0%;
	}
}

@keyframes tail {
	0% {
		transform: rotate(-45deg);
	}
	50% {
		transform: rotate(-45deg);
	}
	53% {
		transform: rotate(-20deg);
	}
	56% {
		transform: rotate(-45deg);
	}
	59% {
		transform: rotate(-20deg);
	}
	62% {
		transform: rotate(-45deg);
	}
	100% {
		transform: rotate(-45deg);
	}
}


// SNOW BASED

@keyframes snow-animation-feet {
	0% {
	}
	2% {
		opacity: 1;
	}
	70% {
		width: 60px;
		opacity: 1;
		background-position:16% -60%;
		transform: scale(1,1);
    border-radius: 80px 80px 60px 60px;
	}
	72% {
		opacity: 1
	}
	76% {
		opacity: 0;
	}
	100% {
		width: 60px;
		background-position:16% -60%;
		transform: scale(1,1);
    border-radius: 80px 80px 60px 60px;
		opacity: 0;
	}
}

@keyframes snow-animation-head {
	20% {
	}
	70% {
	background-position:6% -60%;
	width: 80px;
	height: 83px;
	border-radius: 100% 20% 40% 20%;
	left: -67px;
	top: 50px;
	opacity: 1;
	}
	72% {
		opacity: 1
	}
	76% {
		opacity: 0;
	}
	
	100% {
	background-position:6% -60%;
	width: 80px;
	height: 83px;
	border-radius: 100% 20% 40% 20%;
	left: -67px;
	top: 50px;
	opacity: 0;		
	}
}

@keyframes snow-storm {
	0% {
		left: -500%;
	}
	
	100% {
		left: 500%;
	}
}

@keyframes all-the-snow {
		0% {
	}
	
	100% {
		opacity: 1;
	}
}

@keyframes snowy-fields-main {
	0% {
	}
	100% {
		background: var(--snow);
	}
}

// Bit of a sneaky way to transition the hill colour!
// Works in Chrome only :()
// @keyframes snowy-fields-highlights {
// 		0% {
// 		// --hillHighlight: var(--snowHighlight);
// 	}
// 			100% {
// 		// --hillHighlight: var(--snowHighlight);
// 	}
// }

// Firefox work around:
@keyframes snowy-fields-highlights-front {
		0% {
			background: linear-gradient(-15deg, rgba(255,255,255,0) 84%, var(--snowHighlight) 100%);
	}
		100% {
			background: linear-gradient(-15deg, rgba(255,255,255,0) 84%, var(--snowHighlight) 100%);		
	}
}

@keyframes snowy-fields-highlights-front-mask {
		0% {
			background: linear-gradient(180deg, rgba(255, 255, 255, 0) 50%, var(--snowHighlight) 100%);
	}
		100% {
			background: linear-gradient(180deg, rgba(255, 255, 255, 0) 50%, var(--snowHighlight) 100%);		
	}
}

@keyframes snowy-fields-highlights-middle {
		0% {
			background: linear-gradient(171deg, rgba(255,255,255,0) 24%, var(--snowHighlight) 100%);
	}
		100% {
			background: linear-gradient(171deg, rgba(255,255,255,0) 24%, var(--snowHighlight) 100%);
	}
}

@keyframes snowy-fields-highlights-back {
		0% {
			background: linear-gradient(207deg, rgba(255,255,255,0) 24%, var(--snowHighlight) 100%);

	}
		100% {
			background: linear-gradient(207deg, rgba(255,255,255,0) 24%, var(--snowHighlight) 100%);

	}
}

// General colour change
@keyframes snowy-floof {
	0% {
		background: var(--snow);
		border-color: var(--icyHighlights);
	}
	100% {
		background: var(--snow);
		border-color: var(--icyHighlights);
	}
}

// Just for the rings that cover the eye gaps
@keyframes snowy-floof-eye-fix {
	0% {
		border-color: var(--snow);
	}
	100% {
		border-color: var(--snow);
	}
}

// Top of the head
@keyframes snowy-borders {
	0% {
		border-color: var(--snow);
	}
	100% {
		border-color: var(--snow);
	}
}

// Just whiskers
@keyframes icy-borders {
	0% {
		border-color: var(--icyHighlights);
	}
	100% {
		border-color: var(--icyHighlights);
	}
}

// Nose.
@keyframes icy-background {
	0% {
		background: var(--icyHighlights);
	}
	100% {
		background: var(--icyHighlights);
	}
}

@keyframes border-fix {
	0% {
		box-shadow: 5px 10px 21px 20px rgba(127,200,133,1);
	}
	100% {
		box-shadow: 5px 10px 21px 20px rgba(255,255,255,1);
	}
}

// Fade the snow in!

@keyframes snow-fade-in {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}


// Christmas lights!

@keyframes colours-one {
    0% {
		background: lightblue;
    }	
    50% {
			background: teal;
    }
	100% {
		background: lightblue;
	}
}

@keyframes colours-two {
    0% {
		background: gold;
    }	
    50% {
			background: hotpink;
    }
	100% {
		background: gold;
	}
}

@keyframes colours-three {
    0% {
		background: purple;
    }	
    50% {
			background: yellow;
    }
	100% {
		background: purple;
	}
}

            
          
!

JS

            
              // BUDDY!

const pupils = document.querySelectorAll('.pupil');
let trackingArea = document.querySelector('body');
const buddy = document.querySelector('.buddy');
const eyeTrigger = document.querySelectorAll('.switch');

const eyeTracking = (e) => {
	var x = event.clientX * 100 / window.innerWidth + "%";
	var y = event.clientY * 100 / window.innerHeight + "%";

	pupils.forEach(pupil => {
		pupil.style.left = x;
		pupil.style.top = y;
		pupil.style.transform = `translate(-${x}, -${y})`;
	});
};

trackingArea.addEventListener('mousemove', eyeTracking);

eyeTrigger.forEach(trigger => {
	trigger.addEventListener('mouseenter', e => {
			buddy.classList.add('hunter');
	});
	
	trigger.addEventListener('mouseleave', e => {
			buddy.classList.remove('hunter');
	});
});


// SNOW! based on kurisu brooks' snow.js

// Settings
// let snowMax = 100; SET IN THE TOGGLE.
const snowColor = ["#DDD", "#EEE"];
const snowEntity = "&#x2022;";
const snowSpeed = 0.3;
const snowMinSize = 8;
const snowMaxSize = 40;
const snowRefresh = 10;

let snow = [],
	pos = [],
	coords = [],
	lefr = [],
	marginBottom,
	marginRight;

const randomise = range => {
	rand = Math.floor(range * Math.random());
	return rand;
}
const initSnow = () => {
	
	if(snowMax > 0) {
	
	const globeypls = document.querySelector('.globe-inner');
	for (i = 0; i <= snowMax; i++) {
		const flake = document.createElement('span');
		flake.innerHTML = `${snowEntity}`;
		flake.classList.add(`flake`, `flake${i}`);
		globeypls.appendChild(flake);		
	}

	let snowSize = snowMaxSize - snowMinSize;
	marginBottom = document.body.scrollHeight - 5;
	marginRight = document.body.clientWidth - 15;
	for (i = 0; i <= snowMax; i++) {
		coords[i] = 0;
		lefr[i] = Math.random() * 15;
		pos[i] = 0.03 + Math.random() / 10;
		snow[i] = document.querySelector(".flake" + i);
		snow[i].style.fontFamily = "inherit";
		snow[i].size = randomise(snowSize) + snowMinSize;
		snow[i].style.fontSize = snow[i].size + "px";
		snow[i].style.color = snowColor[randomise(snowColor.length)];
		snow[i].style.zIndex = Math.round(Math.random() * 10);
		snow[i].sink = snowSpeed * snow[i].size / 5;
		snow[i].posX = randomise(marginRight - snow[i].size);
		snow[i].posY = randomise(2 * marginBottom - marginBottom - 2 * snow[i].size);
		snow[i].style.left = snow[i].posX + "px";
		snow[i].style.top = snow[i].posY + "px";
	}
	moveSnow();
	}
}
const resize = () => {
	marginBottom = document.body.scrollHeight - 5;
	marginRight = document.body.clientWidth - 15;
}

const moveSnow = () => {
	if(snowMax > 0) {
	for (i = 0; i <= snowMax; i++) {
		coords[i] += pos[i];
		snow[i].posY += snow[i].sink;
		snow[i].style.left = snow[i].posX + lefr[i] * Math.sin(coords[i]) + "px";
		snow[i].style.top = snow[i].posY + "px";

		if (snow[i].posY >= marginBottom - 2 * snow[i].size || parseInt(snow[i].style.left) > (marginRight - 3 * lefr[i])) {
			snow[i].posX = randomise(marginRight - snow[i].size);
			snow[i].posY = 0;
		}
	}

	setTimeout("moveSnow()", snowRefresh);
}
}


// GLOBE CONTROL

const checkbox = document.querySelector("input[name=globe-switch]");
const globe = document.querySelector('.globe');

checkbox.addEventListener( 'change', function() {
    if(this.checked) {
			snowMax = 100;
			
			// setTimeout(() => initSnow(), 1000);
			initSnow();
			globe.classList.add('frosty');
			// Maybe add a class that then does the fade up animation on the flakes?
			
			// Remove big eyes when clicking (mobile ux)
			buddy.classList.remove('hunter');
			
			// Remove tracking?
			// trackingArea.removeEventListener('mousemove', addTracking);
			
			// initSnow();
    } else {
			globe.classList.remove('frosty');
			// Reset everything and remove all of the flakes.
			// [TO DO] - Error on forloop that needs sorting.
			snowMax = 0;
			snow = [];
			pos = [];
			coords = [];
			lefr = [];
			let flakeQty = document.querySelectorAll('.flake');
			flakeQty.forEach(flake => {
				flake.remove();
			});
		}
});

            
          
!
999px

Console