* {
	font-family: Noto Sans, sans-serif;
	font-weight: 700;
	padding: 0px;
	margin: 0px;
}

body {
	cursor: url("images/white.webp") 64 64, auto;
	background-color: black;
	overflow-x: hidden;
	user-select: none;
	margin: 0px;
	width: 100vw;
	height: 100vh;
}

a {
	text-decoration: none;
}

#cardHolder {
	position: absolute;
	top: 0px;
	display: flex;
	justify-content: center;
	align-items: center;
	perspective: 50vmin;
	font-size: 3vmin;
	width: 100vw;
	height: 100vh;
	text-align: center;
	flex-direction: column;
}

#card {
	z-index: 2;
	width: 60vmin;
	height: 90vmin;
	border-radius: 4vmin;
	background-color: crimson;
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	box-shadow: 0px 0px 4vmin 1vmin crimson;
	transform: rotate3d( 0, 0, 0, 0turn );
}

#cardContent {
	width: 60%;
	height: 60%;
	border: 2px solid black;
	border-radius: 4px;
}

#cardContent h1,
#cardContent h2 {
	position: absolute;
	writing-mode: vertical-rl;
	transform: rotate( 180deg );
	padding: 1vmin;
}

.social {
	display: flex;
	height: 5.5vh;
	padding: 0.5vmin;
	border-radius: 2vmin;
	transition-duration: 0.25s;
}

.social:hover {
	background-color: crimson;
}

.social svg {
	padding-left: 0.5vh;
	width: 4.5vh;
}

.social p {
	padding-left: 1.5vh;
	font-size: 2.5vh;
	line-height: 6vh;
	color: black;
}

hr {
	width: 50%;
	margin: 2.5vmin;
	border: 1px solid black;
}

.star {
	position: absolute;
	background-image: url("images/star.webp");
	background-size: 100% 100%;
	z-index: 0;
}

#stars {
	overflow-x: hidden;
	width: 100vw;
	height: 100vh;
	z-index: 0;
}

.spades {
	background-image: url("images/spades.webp");
	background-size: 100% 100%;
	width: 12vmin;
	height: 12vmin;
	position: absolute;
}

@keyframes flicker {
	0% { opacity: 1; }
	10% { opacity: 0; }
	20% { opacity: 1; }
	100% { opacity: 1; }
}

.content {
	box-shadow: 0px 0px 4vmin 4vmin white;
	background: white;
	cursor: url("images/black.webp") 64 64, auto;
}

.area {
	padding-top: 4vmin;
	padding-bottom: 4vmin;
	width: min( 60vh, 80vw );
	margin-left: calc( 50vw - min( 60vh, 80vw ) / 2 );
}

.counter {
	width: 100%;
	height: auto;
}

.badge {
	width: 88px;
	transition-duration: 0.25s;
	image-rendering: pixelated;
	cursor: auto;
}

.badge:hover {
	transform: scale( 2 );
	position: relative;
	z-index: 3;
}