@font-face {
	font-family: "Limkin";
	src: url("https://toomuchtype.com/fonts/limkin/variable/TMT-LimkinVF.ttf") format(truetype),
		 url("https://toomuchtype.com/fonts/limkin/variable/TMT-LimkinVF.woff") format(woff),
		 url("https://toomuchtype.com/fonts/limkin/variable/TMT-LimkinVF.woff2") format(woff2);
	font-weight: 100 900;
}
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
body {
	font-family: "Limkin", sans-serif;
	font-weight: 900;
	background-color: #ddd;
	font-variation-settings: "wght" 900, "SRFF" 0;
}
.container {
	width: 100vw;
	height: 100dvh;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: 10px;
	text-align: center;
	padding: 20px;
	overflow: hidden;
	position: relative;
	background-image: url('/assets/media/snow.jpg');
	background-size: cover;
	background-position: bottom center;
}
.vignette {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 999999999;
	box-shadow: 0 0 min(5vw, 100px) hsl(180, 50%, 8%) inset, 0 0 min(10vw, 200px) hsl(240, 100%, 8%) inset;
	pointer-events: none;
	opacity: .5;
	animation: vignette 10s infinite ease-in-out alternate;
}
@keyframes vignette {
	from {
		opacity: .5;
	}
	to {
		opacity: .75;
	}
}

/* Text */
.title {
	top: .28em;
	left: .2em;
	position: absolute;
	font-size: max(5vw, 48px);
	font-variation-settings: "wght" 900, "SRFF" 0;
	font-weight: 900;
	letter-spacing: -.09em;
	padding-right: 0.09em;
	line-height: .9em;
	text-align: left;
	text-wrap: balance;
	padding-right: 1em;
	text-shadow: 0 0 20px rgba(255,255,255,.1), 0 0 40px rgba(255,255,255,.2);
}
.title a {
	color: white;
	text-decoration: none;
	transition: transform .5s;
	display: block;
	transform-origin: 0% 10%;
}
.title a:hover {
	transform: scale(1.5);
}
.title a:active {
	transform: scale(.5);
}
.credit {
	bottom: .07em;
	right: .2em;
	position: absolute;
	font-size: max(5vw, 48px);
	font-variation-settings: "wght" 900, "SRFF" 0;
	font-weight: 900;
	letter-spacing: -.09em;
	padding-right: 0.09em;
	line-height: .9em;
	text-align: right;
	text-wrap: balance;
	padding-left: 1em;
	text-shadow: 0 0 20px rgba(255,255,255,.1), 0 0 40px rgba(255,255,255,.2);
}
.credit a {
	color: white;
	text-decoration: none;
	transition: transform .5s;
	display: block;
	transform-origin: 100% 90%;
}
.credit a:hover {
	transform: scale(1.5);
}
.credit a:active {
	transform: scale(.5);
}

/* Start button */
.play {
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 200px;
	height: 200px;
	cursor: pointer;
	background-color: #eee;
	border: unset;
	transition: transform .5s;
	padding: 50px 50px 50px 60px;
	transform-origin: top left;
	border-radius: 50%;
	text-shadow: 0 0 20px rgba(255,255,255,.1), 0 0 40px rgba(255,255,255,.2);
	overflow: hidden;
	z-index: 9999999999;
}
.play[data-active="0"] {
	transform: translate(-50%, calc(-50% + 100vh)) !important;
}
.play svg {
	width: 100%;
	height: 100%;
	display: block;
	transition: transform .5s;
}
.play:hover {
	transform: scale(1.25) translate(-50%, -50%);
	background-color: white;
}
.play:hover svg {
	transform: scale(1.25);
}
.play:active {
	transform: scale(.5) translate(-50%, -50%);
	background-color: white;
}
.play:active svg {
	transform: scale(.5);
}

/* DOGS */
.dog-container {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	pointer-events: none;
}
.dog {
	position: absolute;
	left: -200px;
	pointer-events: none;
}
.dog > div {
	/* animation: dog-div infinite ease-in-out .5s alternate; */
	position: relative;
	transform: translateY(-50%);
}
@keyframes dog-div {
	from {
		transform: translateY(-10px);
	}
	to {
		transform: translateY(10px);
	}
}
.dog img {
	display: block;
	width: 100px;
	animation: dog-img infinite cubic-bezier(0.76, 0, 0.24, 1) .5s alternate;
	transform-origin: bottom center;
}
@keyframes dog-img {
	from {
		transform: rotate(-5deg) translateY(10px);
	}
	to {
		transform: rotate(5deg) translateY(0px);
	}
}
.dog-shadow {
	position: absolute;
	bottom: -20px;
	left: 10px;
	right: 10px;
	height: 20px;
	background-color: black;
	border-radius: 50%;
	filter: blur(5px);
	opacity: .25;
	z-index: -1;
}

/* SNOW */
.snow-container {
	/* display: none; */
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	position: absolute;
	z-index: 99999999999;
	pointer-events: none;
	/* filter: blur(1px) drop-shadow(0px 0px 10px rgba(0,0,0,.5)); */
}
.snow {
	position: absolute;
	z-index: 99999;
	pointer-events: none;
	top: -5vh;
	transition: top 10s linear;
}
.snow div {
	animation: snow-div 5s ease-in-out alternate infinite;
	background-color: white;
	border-radius: 50%;
	/* outline: 1px solid #aaa; */
	/* box-shadow: 1px 1px rgba(0,0,0,.1); */
}
@keyframes snow-div {
	from {
		transform: translateX(-40px) rotate(10deg);
	}
	to {
		transform: translateX(40px) rotate(-10deg);
	}
}

/* BOULES */
.boule-container {
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	position: absolute;
	z-index: 99999999999;
	pointer-events: none;
	opacity: .25;
}
.boule {
	position: absolute;
	border-radius: 50%;
	opacity: 0;
	animation: boule 10s infinite ease-in-out alternate;
	transform-origin: top left;
}
@keyframes boule {
	from {
		transform: scale(1) translate(-50%, -50%);
	}
	to {
		transform: scale(1.5) translate(-50%, -50%);
	}
}