html,body {
	margin: 0;
	padding: 0;

	width: 100vw;
	height: 100vh;
	overflow: hidden;

	font-family: 'Manrope Regular', arial, sans-serif;
}

body {
	color: #0C2532;
	background: radial-gradient(circle at center, white 0, #c9c9c9 100%);
}

body a {
	color: inherit;
	text-decoration: none;
}

body.playing {
	animation-duration: 14s;
	animation-name: color-transition;
	animation-timing-function: ease-in;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}

.container {
	margin: 0;
	padding: 0;

	width: 100vw;
	height: 100vh;
	overflow: hidden;

	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.container video {
	margin: 0;
	padding: 0;

	width: 100%;
	height: 100%;
	object-fit: contain;

	cursor: pointer;
}


@keyframes color-transition {
	from {
		color: #0C2532;
		/*background-color: #e6e6e6;*/
		background: radial-gradient(circle at center, white 0, #c9c9c9 100%);
	}

	60% {
		color: #0C2532;
		/*background-color: #e6e6e6;*/
		background: radial-gradient(circle at center, white 0, #c9c9c9 100%);
	}

	65% {
		color: white;
		/*background: #0C2532;*/
		background: #0b222f;
	}

	to {
		color: white;
		/*background: #0C2532;*/
		background: #0b222f;
	}
}