@font-face {
	font-family: 'Quicksand';
	src: url('/http_errors/font/Quicksand-Regular.ttf') format('truetype');
}

@font-face {
	font-family: 'Libre Franklin';
	src: url('/http_errors/font/LibreFranklin-Regular.ttf') format('truetype');
}

.container {
	margin: 2vh;
}

.footer {
	text-align: center;
}

@media only screen and (min-width: 768px) {
	.container {
		height: 92vh;
		width: 95vw;
		display: grid;
		grid-auto-columns: 1fr;
		grid-auto-rows: 1fr;
		grid-auto-flow: dense;
	}

	.heads {
		grid-area: 1 / 1 / 2 / 3;
	}

	.section-icon {
		grid-area: 1 / 7 / 7 / 13;
		justify-self: center;
	}

	.section-message {
		grid-area: 3 / 2 / 5 / 6;
		justify-self: center;
		align-self: start;
	}

	.footer {
		grid-area: 8 / 3 / 9 / 11;
		justify-self: center;
		align-self: center;
	}

	.error-code {
		grid-area: 7 / 2 / 8 / 4;
		justify-self: start;
	}
}

img.icon-error {
	object-fit: cover;
	object-position: bottom;
	width: 100%;
}

h1.error-message {
	font-size: 60px;
	font-weight: 800;
	color: #1F2142;
	font-family: 'Quicksand';
	margin-top: 0;
	margin-bottom: 0;
}
p.line { font-size: 1rem; font-weight: 300; color: #9b9b9b; font-family: 'Libre Franklin'}
a.link { font-size: 1rem; font-weight: 300; color: #6B37C5; line-height: 32px; font-family: 'Libre Franklin'; text-decoration: none;}
.button {
	color: #fff;
	background-color: #c313a7;
	border-color: #c313a7;
	border-radius: 4px;
	min-width: 128px;
	padding: 14px 20px 16px;
	font-size: 1rem;
	max-height: 44px;
	font-family: 'Quicksand';
	font-weight: 600;
	line-height: 1rem;
	letter-spacing: 0.02857em;
	text-decoration: none;
}
img.logo {
	float: left;
}
p.line2 { float: right}
p.footer { text-align: center; }
a.footer2 { margin-left: 72px; text-decoration: none;}