body {
	width: 100%;
	height: 100vh;
	background:
		radial-gradient(black 3px, transparent 4px),
		radial-gradient(black 3px, transparent 4px),
		linear-gradient(#fff 4px, transparent 0),
		linear-gradient(45deg, transparent 74px, transparent 75px, #a4a4a4 75px, #a4a4a4 76px, transparent 77px, transparent 109px),
		linear-gradient(-45deg, transparent 75px, transparent 76px, #a4a4a4 76px, #a4a4a4 77px, transparent 78px, transparent 109px),
		#fff;
	background-size: 109px 109px, 109px 109px, 100% 6px, 109px 109px, 109px 109px;
	background-position: 54px 55px, 0px 0px, 0px 0px, 0px 0px, 0px 0px;
	background-attachment: fixed;
}

p {
	padding: .5rem;
}

#footer a {
	text-decoration: none;
	color: #109dff;
}

#footer a:visited {
	text-decoration: none;
	color: #109dff;
}

.container {
	width: 100%;
	height: calc(100vh - 6rem);
}

#footer {
	position: relative;
	background: #57606f;
	background-attachment: scroll;
	background-position: bottom;
	background-size: cover;
}

#footer-wrap {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 6rem;
	color: var(--light-grey);
	text-align: center;
}

.copyright {
	color: #f1f2f6;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Lato, Roboto, 'PingFang SC', 'Microsoft YaHei', sans-serif;
	line-height: 2;
}

@media screen and (prefers-color-scheme:dark) {
	body {
		background:
			radial-gradient(black 3px, transparent 4px),
			radial-gradient(black 3px, transparent 4px),
			linear-gradient(#121212 4px, transparent 0),
			linear-gradient(45deg, transparent 74px, transparent 75px, #a4a4a4 75px, #a4a4a4 76px, transparent 77px, transparent 109px),
			linear-gradient(-45deg, transparent 75px, transparent 76px, #a4a4a4 76px, #a4a4a4 77px, transparent 78px, transparent 109px),
			#121212;
		background-size: 109px 109px, 109px 109px, 100% 6px, 109px 109px, 109px 109px;
		background-position: 54px 55px, 0px 0px, 0px 0px, 0px 0px, 0px 0px;
		background-attachment: fixed;
	}

	#footer {
		background: #2f3542;
	}
}