html { color: #000; }

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td { margin: 0; padding: 0; }

table { border-collapse: collapse; border-spacing: 0; }

fieldset, img { border: 0; }

address, caption, cite, code, dfn, em, strong, th, var, optgroup { font-style: inherit; font-weight: inherit; }

del, ins { text-decoration: none; }

li { list-style: none; }

caption, th { text-align: left; }

h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: normal; }

q:before, q:after { content: ''; }

abbr, acronym { border: 0; font-variant: normal; }

sup { vertical-align: baseline; }

sub { vertical-align: baseline; }

legend { color: #000; }

input, button, textarea, select, optgroup, option { font-family: inherit; font-size: inherit; font-style: inherit; font-weight: inherit; }

input, button, textarea, select { *font-size: 100%; }

input[type=text] { border: none; }

* { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; -moz-font-feature-settings: "liga" on; margin: 0; }

img.alignright { float: right; }

img.alignleft { float: left; }

img.aligncenter { clear: both; display: block; margin-right: auto; margin-left: auto; }

html {
	height: 100%;
}

body { 
	height: 100%;
	background-color: #FBFBFB; 
	font-family: 'Pally', sans-serif; 
}

.container {
	min-height: 100%;
	display: grid;
	grid-template-rows: 1fr auto;
}

.main { 
	margin: 40px 24px;
}

.main .logo,
.main .accent {
	background-color: #FBFBFB; 
	text-align: center;
	opacity: 0.79;
}

.main .logo img {
	width: 90px;
	mix-blend-mode: multiply;
}

.main .intro { 
	display: block; 
	margin-bottom: 21px; 
	text-align: center;
}

.main .intro h1 { 
	text-transform: uppercase;
	font-weight: 700;
	color: #3e3e3e; 
	font-size: 35px;
}

.main .title { 
	margin-bottom: 21px; 
}

.main .title h1 { 
	font-weight: 700;
	color: #3e3e3e; 
	font-size: 35px;
}

.main .accent {
	text-align: center;
	opacity: 0.81;
	margin-left: -12px;
	margin-top: 18px;
}

.main .accent img {
	width: 51px;
	mix-blend-mode: multiply;
}

.main .description { 
	font-weight: 300; 
	line-height: 1.3; 
	color: #2e2e2e; 
	font-size: 23px;
}

.main .description p { 
	margin-bottom: 15px;
}

.main .description a { 
	color: #2e2e2e; 
	text-decoration: none; 
	border-bottom: 1px dotted #333; 
}

.main .description ul { margin: 0; padding: 30px 0 0 0; margin: 0 0 20px 5px; }
.main .description ul li { list-style-type: none; padding: 0 0 10px 0; }
.main .description ul li:before { content: "→"; padding-right: 20px; }

.marker-pen {
	/*background-color: rgb(255, 253, 199);*/
	/*background-color: #faf1e4;*/
}

.footer ul {
	margin: 0 24px 30px;
}

.footer a { 
	color: #3e3e3e; 
	text-decoration: none; 
	border-bottom: 1px dotted #afafaf; 
}

.nav-link {
	margin-top: 13px;
	display: inline-block;
	color: #666 !important; 
	text-decoration: none; 
	border-bottom: 1px dotted #333;
	font-size: 19px;
}

@media (min-width: 479px) {
	.main { 
		margin: 40px 10%;
	}
	.footer ul {
		margin: 0 10% 8%;
	}
}

@media (min-width: 767px) {
	.main { 
		font-size: 36px; /* @todo fix */
		margin: 120px 10%; 
	}
	.main .logo img {
		width: 176px;
	}
	.main .intro { 
		margin-bottom: 19px; 
	}
	.main .intro h1 { 
		font-size: 60px;
		line-height: 1.15;
	}
	.main .title { 
		margin-bottom: 31px; 
	}
	.main .title h1 { 
		font-size: 45px;
		line-height: 1.15;
	}
	.main .description { 
		font-size: 32px; 
	}
	.main .description.explanation { 
		font-size: 27px; 
	}
	.main .accent {
		margin-top: 11px;
	}
	.main .accent img {
		width: 72px;
	}
	.nav-link {
		margin-top: 30px;
		font-size: 22px;
	}
}

@media (min-width: 991px) {
	.main { 
		margin: 120px 20%; 
	}
	.main.sub { 
		margin: 120px 23%; 
	}
	.main .logo img {
		width: 192px;
	}
	.footer ul {
		margin: 0 50px 40px;
	}

}

@media (min-width: 1120px) { 
	.main .description:not(.explanation) { 
		padding-left: 25px;
	}
}

@media (min-width: 1600px) { 
	.main { 
		max-width: 38%; 
		margin: 90px auto; 
	}
}