body {
	background: black;
	margin: 0;
	overflow: hidden;
}
#wrapper {
	will-change: background;
}
#canvas {
	will-change: transform;
	background: black;
	transition: .4s all;
	width: 110vw;
	height: 110vh;
	position: fixed;
	top: -5vh;
	left: -5vw;
	mix-blend-mode: multiply;
	z-index: 1;
}
* {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	 -khtml-user-select: none;
	   -moz-user-select: none;
		-ms-user-select: none;
			user-select: none;
}
.psycho {
	background: linear-gradient(-45deg, #000000, #60aeff, #fff86b, #ff0000);
	background-size: 400% 400%;
	animation: gradient 5s ease infinite;
	height: 100vh;
}
@keyframes merrygoround {
	0% { transform: rotate(0deg) }
	50% { transform: rotate(180deg) }
	100% { transform: rotate(360deg) }
}
@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}
@keyframes skew {
	0% {
		transform: skewX(10deg);
	}
	50% {
		transform: skewX(-10deg);
	}
	100% {
		transform: skewX(10deg);
	}
}
@keyframes pulse {
	0% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.2);
	}
	100% {
		transform: scale(1);
	}
}
@keyframes explode {
  0% {
	transform: translateX(0) scale(1);
  }
  50% {
	transform: translateX(300px) scale(0.1);
  }
  100% {
	transform: translatex(600px) scale(0.001);
  }
}
@keyframes snow {
  0% {
	top: 0;
	transform: translateY(0) translatex(-20px) rotate(-5deg) rotateY(-180deg);
  }
  50% {
	transform: translateY(10%) translateX(20px) rotate(5deg) rotateY(180deg);
  }
  100% {
	top: 140%;
	transform: translateY(0) translatex(-20ox) rotate(-5deg) rotateY(360deg);
  }
}
@keyframes fall {
  0% {
	top: 0;
	transform: translatex(-20px);
  }
  50% {
	transform: translateX(20px);
  }
  100% {
	top: 140%;
	transform: translatex(-20px);
  }
}
.snowflake {
  will-change: top, transform;
  transform: translateZ(0);
  animation: snow 10s linear infinite;
  transition: .4s color;
  font-size: 40px;
  position: absolute;
  z-index: 1;
}
.snowflake:nth-child(2n) {
  animation-delay: 5s;
}
.snowflake-inner {
  transform: translateZ(0);
  position: absolute;
  transform-origin: center;
}
.snowflake-glyph {
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
}
.glyph {
	will-change: transform;	
	position: relative;
	z-index: 11;
}
.snowflake-glyph .glyph {
	display: none!important;
}
.snowflake-explode {
  display: block!important;
}		  
.snowflake-explode .glyph {
  mix-blend-mode: multiply;
  display: block!important;
  animation: explode linear forwards;
}
#snowflakes {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}
#snowball {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}
#snowball .snowflake {
  animation: fall 10s linear forwards;
  animation-iteration-count: 1;
  width: 100px;
  height: 100px;
  z-index: 2;
}
#snowball .snowflake-inner {
  display: none;
  z-index: 10;
  font-size: 60px;
  line-height: 100px;
  width: 100px;
  height: 100px;
}
#snowball .snowflake-glyph {
	width: 200px;
	height: 200px;
	margin-left: -100px;
	margin-right: -100px;
}
#snowball .snowflake-inner:first-child { display: block }
#go {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	font-size: 200px;
	font-family: sans-serif;
	color: white;
}
#total {
	display: none;
	position: fixed;
	top: 40px;
	right: 120px;
	font-size: 100px;
	font-family: sans-serif;
	cursor: default;
	color: HSL(197, 70%, 70%);
	z-index: 1;
}
#total-pics {
	position: fixed;
	display: flex;
	flex-direction: column;
	gap: 20px;
	top: 40px;
	left: 20px;
	font-size: 36px;
	font-family: sans-serif;
	cursor: default;
	color: HSL(197, 70%, 70%);
	z-index: 1;
	max-height: calc(100% - 60px);
	flex-wrap: wrap;
}
#total-pics .item {
	height: 50px;
	display: flex;
	align-items: center;
}
#total-pics .item .pic {
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
	margin-right: 20px;
	width: 50px;
	height: 50px;
}