@import url("https://fonts.googleapis.com/css2?family=Pacifico&display=swap");

body {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
}

.merry-christmas {
	position: absolute;
	font-size: 50px;
	font-family: "Pacifico", cursive;
	color: red;
	transform: translatey(350px) translatex(-100px) rotate(-5deg) skewX(10deg);
	text-shadow: -2px 0 black, 0 10px black, 2px 0 black, 0 -2px black;
	opacity: 0;
}
#Christmas {
	position: absolute;
	top: 100px;
	right: -180px;
}

.merry-christmas-noshow {
	opacity: 0;
	animation: fadeout 2s;
}

.merry-christmas-show {
	opacity: 100;
	animation: fadein 2s;
}

.emoji {
	position: relative;
	transform: translatex(-80px) translatey(300px);
}

.hat {
	z-index: 50;
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 180px;
	height: 180px;
	transform: translatex(-10px) translatey(-120px) rotate(-10deg);
	opacity: 0;
}

.hat-noshow {
	opacity: 0;
	animation: fadeout 2s;
}

.hat-show {
	opacity: 100;
	animation: fadein 2s;
}

.hat-bottom {
	z-index: 60;
	position: absolute;
	width: 100%;
	height: 20%;
	background: white;
	border-radius: 10%;
	bottom: 0;
}

.hat-middle {
	z-index: 50;
	position: absolute;
	clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
	background: #c40000;
	height: 80%;
	width: 80%;
}

.hat-point {
	z-index: 40;
	position: absolute;
	clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
	background: #6f0101;
	height: 40%;
	width: 20%;
	transform: translatex(-100%) translatey(-75%) rotate(-90deg);
}

.hat-ball {
	z-index: 50;
	border-radius: 50%;
	width: 15%;
	height: 15%;
	background: white;
	transform: translatex(-220%) translatey(-200%);
}

.tree {
	position: absolute;
	height: 80%;
	width: 50%;
	display: flex;
	justify-content: center;
}

.switch {
	position: absolute;
	background: red;
	width: 100px;
	height: 100px;
	border-radius: 50%;
	animation: 1s ease-out 2s 1 slideInFromRight;
	display: flex;
	justify-content: center;
	align-items: center;
	font-family: "Pacifico", cursive;
}

.switch-wrapper {
	z-index: 100;
	position: fixed;
	overflow: hidden;
	width: 200px;
	height: 200px;
	bottom: 0px;
	right: 0px;
	animation: fadein 2s;
	animation-delay: 1s;
	opacity: 0;
	animation-fill-mode: forwards;
}

@keyframes slideInFromRight {
	-200% {
		transform: translateX(0%);
	}
	0% {
		transform: translateX(200%);
	}
}

@keyframes fadein {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@keyframes fadeout {
	from {
		opacity: 1;
	}
	to {
		opacity: 0;
	}
}

.switch:hover {
	cursor: pointer;
	color: white;
}

.tree-wrapper {
	z-index: -10;
	position: absolute;
	width: 500px;
	height: 500px;
	transform: translatex(100px) translatey(200px);
	opacity: 0;
}

.tree-wrapper-noshow {
	opacity: 0;
	animation: fadeout 2s;
}

.tree-wrapper-show {
	opacity: 100;
	animation: fadein 2s;
}

.snowflake {
	color: #fff;
	font-size: 1em;
	text-shadow: 0 0 1px #000;
}

@keyframes snowflakes-fall {
	0% {
		top: -10%;
	}
	100% {
		top: 100%;
	}
}
@keyframes snowflakes-shake {
	0% {
		transform: translateX(0px);
	}
	50% {
		transform: translateX(80px);
	}
	100% {
		transform: translateX(0px);
	}
}
.snowflake {
	position: fixed;
	top: -10%;
	user-select: none;
	cursor: default;
	animation-name: snowflakes-fall, snowflakes-shake;
	animation-duration: 10s, 3s;
	animation-timing-function: linear, ease-in-out;
	animation-iteration-count: infinite, infinite;
	animation-play-state: running, running;
}
.snowflake:nth-of-type(0) {
	left: 1%;
	animation-delay: 0s, 0s;
}
.snowflake:nth-of-type(1) {
	left: 10%;
	animation-delay: 1s, 1s;
}
.snowflake:nth-of-type(2) {
	left: 20%;
	animation-delay: 6s, 0.5s;
}
.snowflake:nth-of-type(3) {
	left: 30%;

	animation-delay: 4s, 2s;
}
.snowflake:nth-of-type(4) {
	left: 40%;
	animation-delay: 2s, 2s;
}
.snowflake:nth-of-type(5) {
	left: 50%;
	animation-delay: 8s, 3s;
}
.snowflake:nth-of-type(6) {
	left: 60%;
	animation-delay: 6s, 2s;
}
.snowflake:nth-of-type(7) {
	left: 70%;
	animation-delay: 2.5s, 1s;
}
.snowflake:nth-of-type(8) {
	left: 80%;
	animation-delay: 1s, 0s;
}
.snowflake:nth-of-type(9) {
	left: 90%;
	animation-delay: 3s, 1.5s;
}

.snow-wrapper {
	z-index: 1;
	position: absolute;
	width: 2000px;
	height: 2000px;
	opacity: 0;
}

.snow-wrapper-noshow {
	opacity: 0;
	animation: fadeout 2s;
}

.snow-wrapper-show {
	opacity: 100;
	animation: fadein 2s;
}

footer {
	z-index: 100;
	position: fixed;
	overflow: hidden;
	bottom: 2rem;
	left: 2rem;
	color: grey;
	font-family: "Pacifico", cursive;
}

footer a {
	color: red;
	text-decoration: none;
}