404style.css

:root {
	--link-color: #D7B8F3;
	--second-link-color: #D4F3B9;
}

.mainbody {
	background-color: #1D1F20;
	padding-right: 1.32vw;
	padding-left: 1.32vw;
	text-align: left;
}

@font-face {
	font-family: 'nunito-semi-bold';
	src: url('assets/Nunito-SemiBold.woff2') format('woff2');
	font-weight: 600;
	font-display: swap;
}

@font-face {
	font-family: 'nunito-extra-bold';
	src: url('assets/Nunito-ExtraBold.woff2') format('woff2');
	font-weight: 800;
	font-display: swap;
}

h1 {
	color: #fff;
	font-size: calc(48px + .75vw - .25vw);
	font-family: 'nunito-extra-bold', Arial, sans-serif;
	font-weight: 700;
	text-align: left;
	margin-bottom:0;
}

p {
	color: #fff;
	font-family: 'nunito-semi-bold', Arial, sans-serif;
	text-align: left; 
	font-size: calc(14px + .3vw);
	line-height: 150%;
}

a {
	font-family: 'nunito-semi-bold', Arial, sans-serif;
	color: var(--link-color);
	font-size: calc(13px + .3vw);
	border-radius: 5px;
}

a:hover, a:focus {
	color: var(--second-link-color);
	text-decoration: none;
}

a:focus {
	text-decoration: underline dashed;
}


/* More contrasty version for people with vision deficiencies */
@media (prefers-contrast: more) {
	
	:root {
		--link-color: #fff;
	}

	a, a:hover, a:focus {
		text-decoration: underline solid #DBDBDB;
	}
	
	a {
		color:var(--link-color);
	}
	
	.mainbody {
		background-color: #000;
	}
}

/* Disabling animations for people with reduced motion on or on slow devices */
@media (prefers-reduced-motion: no-preference) and (update: fast) {

	a {
		transition: all .15s ease-in-out;
	}

	a:hover {
		color: var(--second-link-color);
		text-decoration: none;
	}
}