style.css

html,
body {
	height: 100%;
}
body {
	color-scheme: dark;
	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 16px;
	font-family: "Montserrat", sans-serif;
	background-color: #22222a;
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cg fill='%23000' fill-opacity='0.1'%3E%3Cpolygon fill-rule='evenodd' points='8 4 12 6 8 8 6 12 4 8 0 6 4 4 6 0 8 4'/%3E%3C/g%3E%3C/svg%3E" );
}

#title {
	display: flex;
	align-items: baseline;
	height: 50px;
	line-height: 50px;
	font-size: 24px;
	font-weight: bold;
	margin: auto 0 0 20px;
}
#title span:first-child {
	text-shadow: 0 0 20px #fff4;
}
#title span:last-child {
	margin-left: 1ch;
	font-size: 10px;
	color: #999;
}
#niceBorder {
	resize: both;
	overflow: hidden;
	width: 600px;
	height: 400px;
	min-width: 200px;
	min-height: 60px;
	max-width: calc( 100% - 4px * 2 );
	padding: 4px;
	border-radius: 4px;
	background-image: linear-gradient( 180deg, #f55, #c4a );
	box-shadow: 8px 8px 0px #0003;
}

#btns {
	display: flex;
	align-items: center;
	gap: 16px;
	font-size: 12px;
	margin-top: 16px;
}
#btns label {
	display: flex;
	align-items: center;
	font-size: inherit;
}
#gain {
	width: 80px;
}

#foot {
	display: flex;
	align-items: center;
	margin-top: auto;
	height: 48px;
	min-height: 48px;
}
#copyright {
	font-size: 11px;
	font-weight: bold;
	color: inherit;
	opacity: .5;
}
#copyright a {
	color: inherit;
}

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background-color: #222; }
::-webkit-scrollbar-thumb { background-color: #777; }