html,
body {
	font-family: "Poppins", sans-serif;
	padding: 0;
	margin: 0;
}

.hidden {
	display: none !important;
}

.content {
	width: 100vw;
	height: 100vh;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 0.5fr 2fr 2fr;
}

.title {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	padding: 10px;
	color: white;
	background-color: black;
}

.title .crt-header {
	font-size: 3em;
	display: flex;
	flex-direction: row;
	justify-content: left;
	align-items: center;
}

.title .crt-header .crt-logo {
	height: 55px;
}

.title .crt-header .text {
	padding-left: 0.25em;
}

.title .clock {
	text-align: right;
}

.title .clock .time-container {
	font-size: 4em;
}

.title .clock .date {
	font-size: 3em;
}

.countdown-container {
	background-color: black;
	color: white;
	display: flex;
	justify-content: center;
	align-items: center;
}

.countdown .timer,
.countdown .desc {
	text-align: center;
}

.countdown .timer {
	font-weight: normal;
	font-size: 150px;
	margin: 0;
}

.countdown .desc {
	font-weight: normal;
	font-size: 50px;
	margin: 0;
}

.double {
	grid-row-start: span 2;
}

.info-container,
.madness-container {
	min-height: 100%;
	max-height: 100%;
}

.info-container {
	display: flex;
	flex-direction: row;
	background-position: center;
	background-size: cover;
	justify-content: center;
	align-items: center;
	background-color: black;
}

.info-container .info-text,
.info-container .info-qr {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	padding-left: 10px;
	padding-right: 10px;
}

.info-container .info-qr {
	height: 100%;
}

.info-container .info-qr .qr-code {
	height: 90%;
}

.info-container h1,
.info-container h2 {
	margin: 10px;
	padding: 10px;
	background-color: rgba(0, 0, 0, 0.5);
	border-radius: 10px;
	color: white;
}

.info-container h1 {
	font-size: 75px;
}

.info-container h2 {
	font-size: 50px;
}

.madness-container {
	padding-left: 2em;
	padding-right: 2em;
}

.madness-container h1 {
	font-size: 4em;
	margin-bottom: 0;
	margin-top: 0.25em;
	text-align: center;
	font-weight: normal;
}

.madness-container h2 {
	font-size: 2em;
	margin-bottom: 0;
	margin-top: 1em;
	text-align: center;
	font-weight: normal;
}

.madness-container .row {
	max-height: 100%;
	display: flex;
	flex-direction: row;
	padding-left: 2em;
	padding-right: 2em;
}

.madness-container ol {
	margin-top: 0.25em;
	margin-bottom: 0;
}

.madness-container .row .column {
	width: 50%;
	max-height: 100%
}

.madness-text {
	font-size: 3em;
}

@counter-style medals {
	system: cyclic;
	symbols: "\1f947" "\1f948" "\1f949";
	range: 1 3;
}

.madness-list-1 {
	list-style: medals;
}

.dot1 {
	animation: visibility 3s linear infinite;
}

@keyframes visibility {
	0% {
		opacity: 1;
	}

	65% {
		opacity: 1;
	}

	66% {
		opacity: 0;
	}

	100% {
		opacity: 0;
	}
}

.dot2 {
	animation: visibility2 3s linear infinite;
}

@keyframes visibility2 {
	0% {
		opacity: 0;
	}

	21% {
		opacity: 0;
	}

	22% {
		opacity: 1;
	}

	65% {
		opacity: 1;
	}

	66% {
		opacity: 0;
	}

	100% {
		opacity: 0;
	}
}

.dot3 {
	animation: visibility3 3s linear infinite;
}

@keyframes visibility3 {
	0% {
		opacity: 0;
	}

	43% {
		opacity: 0;
	}

	44% {
		opacity: 1;
	}

	65% {
		opacity: 1;
	}

	66% {
		opacity: 0;
	}

	100% {
		opacity: 0;
	}
}

#tsparticles {
	width: 100%;
	height: 100%;
}