root {
	--text-colour: #011627;
	font-size: 20px;
}

* {
	margin: 0px;
	padding: 0px;
	user-select: none;
}

body {
	overflow: hidden;
}

#noScript {
	position: absolute;
	z-index: -1;
	width: 100vw;
	height: 100vh;
	background-color: var(--text-colour,#011627);

	display: flex;
	align-items: flex-end;
}

#noScript p {
	font-family: "Cutive Mono", monospace;
	font-weight: 700;
	font-size: clamp(1em, 10em, 2vw);
	color: #02477d;

	margin: 5px;
}

#container {
	display: flex;
	flex-direction: column;

	align-content: center;
	align-items: center;

	justify-content: space-around;

	height: 100vh;
}

#card {
	width: clamp(2in, 3.5in, 85vw);
	min-width: 300px;
	height: calc(100vw * 0.45);
	max-height: 2in;

	background-color: rgba(153, 170, 181, 0.8);
	border-radius: 7px;

	text-align: center;
	font-family: "Cutive Mono", monospace;

	padding: 0.5rem;

	color:  var(--text-colour, #011627);
}

#card h1 {
	font-size: 2.3rem;
}

#card p {
	font-size: 1.7rem;
}

#socials {
	display: flex;
	justify-content: space-evenly;
	margin-top: 10%;
}

[class*="fa"]{
	width: 50px;
	text-align: end;
	text-decoration: none;
	transition: 1s;

	color: var(--text-colour, #011627);
	font-size: 1.8em;
}

[class*="fa"]:hover {
	opacity: 0.7;
}

[class*="fa-"]{
	width: auto;
	font-size: 2.2rem;
}

canvas {
	position: absolute;
	left: 0;
	top: 0;
	z-index: -1;
}