style.css

body {
	background: #121212;
	color: #fff;
	font-family: Lato, 'Segoe UI', sans-serif;
	margin: 0;
	display: flex; justify-content: center; align-items: center;
	height: 100vh;
	scrollbar-color: #333 #222;
}

.card {
	background: #161616;
	color: #fff;
	width: 700px;
	max-width: 700px;
	height: 400px; max-height: 400px;
	padding: 25px 2.5vw; box-sizing: border-box;
	box-shadow: 0px 0px 5px 2px #0a0a0a;
	border-radius: 5px;
}

.info-pane {
	display: flex;
	height: 100%;
	padding: 10px; box-sizing:border-box;
	width: min-content;
	border: 1px #222 solid;
	box-shadow: 0px 0px 1px 2px #0f0f0f;
	flex-wrap: wrap;
	float: right;
}

.info-pane h1, .logo-body { padding: 10px; align-self: flex-end; font-family: 'Roboto Mono', 'Source Code Pro', monospace; letter-spacing: 0.75em; margin: 0; }

.logo-body { line-height: 1.2em; }

.content {
	height: 350px;
	max-height: 350px;
	overflow-y: auto;
	padding-right: 25px;
	line-height: 1.5em;
}

.socials { padding: 10px;  height: min-content; }
.socials ul { list-style: none; margin: 0; padding: 0; }
a {
	color: #ccc !important;
	text-decoration: underline #2d2d2d 2px;
}
.socials a {
	margin-right: 10px;
	text-decoration: none;
}
a:hover {
	text-decoration: underline #aaa;
}
a i {
	margin-right: 5px;
}

.logo-body { display: none; }

@media only screen and (max-width:500px) {
	body { display: block; margin: 58px 10px 10px 10px; }
	.card { width: 100%; }
	.card, .content { max-height: initial; height: auto; }
	.info-pane { left: 0; background-color: #111; flex-direction: column; display: flex; float: none; position: fixed; top: 0; height: 48px; width: 100%; margin: 0; padding: 0; height: auto; }
	.info-pane ul { display: flex; }
	.info-pane li { padding-bottom: 2px; }
	.info-pane li a { display: inline-block; text-align: center; }
	.info-pane h1 { display: none }
	.ignore-mobile { display: none; }
	.logo-body { display: block; }
}