:root {
	font-size: 16px;
}

* {
	box-sizing: border-box;
}

body {
	border: 1px solid transparent;
	background: linear-gradient(to bottom left, white, whitesmoke);
	margin: 0;
	padding: 0;
	font-family: 'Lato', sans-serif;
	min-height: 100vh;
	color: #777;
	box-sizing: border-box;
	text-align: center;
	line-height: 1;
}

.error-page__logo {
	display: block;
	margin: auto;
	padding: 1rem;
	grid-area: logo;
}

.template__content-container {
	display: grid;
    grid-template-columns: 6fr 6fr;
	grid-template-areas: 
		'logo logo' 
		'video message'
	;
}
.template__content-container .error-page--error-msg {
	 margin: 0;
}

.error-page__video {
	max-width: 800px;
	margin: auto;
	margin-top: calc(10vh + 20px);
	padding: 0 1rem;
	display: inline-block;
	grid-area: video;
}

.error-page__error-msg {
	font-size: 2rem;
	max-width: 600px;
	padding: calc(10vh + 20px) 5px 15vh 5px;
	margin: auto;
	grid-area: message;
}

.unsupported.browserNotSupported.subhero {
	line-height: 1.4;
}

.error-page__error-msg--small {
	font-size: 1.25rem;
}

.error-page__see-you-again-note {
	margin: 1rem;
}

.error-page__browsers-section {
	display: inline-flex;
}

.browsers-section--left,
.browsers-section--right {
	min-width: 268px;
	padding: 25px;
	display: inline-block;
}

.browsers-section--right {
	border-left: 2px solid darkgray;
}

.error-page__browser-list {
	list-style-type: none;
	padding: 0;
	margin: 0;
}
.error-page__device-list {
	list-style-type: none;
    padding: 1rem;
    margin: auto;
	display: flex;
    justify-content: center;
    align-items: center;
}

.error-page__list-header {
	font-size: 1.25rem;
	text-align: center;
	margin: 0 0 calc(2vh + 5px) 0;
}

.error-page__list-item {
	display: inline-block;
	padding: 0;
	height: 100%;
}

.error-page__list-item--device {
	height: 175px;
	position: relative;
}

.browser-list__img,
.device-list__img {
	margin: 15px;
}
.device-list__img[title="Laptop"] {
	margin-top: 0px;
}
.device-list__img[title="Tablet"] {
	margin-top: 24px;
}
.device-list__img[title="Desktop"] + span {
    left: 41px;
}
.device-list__img[title="Laptop"] + span {
    left: 61px;
}
.device-list__img[title="Tablet"] + span {
    left: 38px;
}

.browser-list__name {
	display: block;
	text-decoration: none;
	color: rgb(96, 160, 255);
}

.device-list__name {
	display: block;
	position: absolute;
	bottom: 0px;
}

.browser-list__name:hover {
	text-decoration: underline;
}

.browser-list__name:visited {
	color: purple;
}

.browser-list--update-btn {
	border: 1px solid rgb(0, 102, 255);
	border-radius: 10px;
	display: block;
	padding: .5rem 1rem;
	background: linear-gradient(to right, rgb(96, 160, 255), rgb(100, 210, 247));
	color: white;
	text-decoration: none;
	transition: box-shadow .15s;
}

.browser-list--update-btn:hover {
	box-shadow: 0px 0px 8px #555;
}

.error-page__note {
	font-size: .875rem;
	color: #aaa;
}

.error-page__webgl-steps-container {
	display: flex;
    flex-direction: column;
}

.error-page__webgl-steps-container .error-page__error-msg--small {
	position: relative;
    left: -30px;
}

.error-page__webgl-steps {
	text-align: left;
    line-height: 1.6;
    margin: auto;
    position: relative;
    left: 30px;
    display: flex;
    flex-direction: column;
}

.error-page__webgl-reload-link {
	text-decoration: none;
}

#webgl__template,
#browser__template, 
#mobile__template,
#device__template,
#outdated__template {
	display: none;
}

@media screen and (max-width: 1200px) {
	.template__content-container {
		display: block;
	}
	.template__content-container .error-page--error-msg {
		margin: auto;
	}
	.error-page__video {
		max-width: 600px;
	}
}

@media screen and (max-width: 570px) {
	.error-page__content-container {
		margin: 0;
	}

	.error-page__browsers-section {
		display: block;
	}

	.browsers-section--left,
	.browsers-section--right {
		display: block;
		min-width: 0px;
	}

	.browsers-section--right {
		border-left: none;
		border-top: 2px solid darkgray;
		max-width: 300px;
    	margin: auto;
	}

	.error-page__device-list {
		flex-direction: column;
		margin-bottom: 2rem;
	}
}