/* --- [Global] --- */
body {
	margin: 0 auto;
	max-width: 650px;
	line-height: 1.6;
	font-size: 18px;
	color: #454545;
}

h1,h2,h3 {
	line-height: 1.2;
	font-weight: 400;
}

a {
	color: rgb(0, 119, 170);
	text-decoration: none;
	border-bottom: 3px solid;
	transition: color 0.3s ease-in;
}

a:hover, a:visited {
	color: #8B4280;
}
/* --- [^Global] --- */

/* --- [A11Y] --- */
a#skip-to-main-content {
  display: block;
  position: absolute;
  left: 0;
  top: -100000px;
}

a#skip-to-main-content:focus {
	display: block;
	position: absolute;
	left: 0;
	border-bottom: 3px solid;
	border-inline-end: 3px solid;
	padding: 3px;
	top: 0;
}
/* --- [^A11Y] --- */

/* --- [Library] --- */
main code {
	color: rgb(215, 43, 63);
	background-color: rgb(247, 247, 249);
	border: 1px solid rgb(225, 225, 232);
	border-radius: 3px;
	font-size: 0.95rem;
	padding: 0.2rem;
	font-family: monospace;
}
/* --- [^Library] --- */

/* --- [Header] --- */
header {
	text-align: center;
	border: 1px solid #fefefe;
}

header a {
	text-transform: uppercase;
	font-size: 0.9rem;
}

header nav {
	margin-top: -1rem;
}

header > nav > ul {
	padding-left: 0;
	list-style: none;
}

header > nav > ul > li {
	display: inline;
	padding: 0.5rem;
}

header > nav > ul > li:first-child {
	padding-left: 0;
}
/* --- [^Header] --- */

/* --- [Content] --- */

main {
	padding: 1.3rem 2rem;
	box-shadow: 0px 3px 15px rgba(0,0,0,0.2);
}

main img {
    width: 100%;
    height: auto;
}

main pre code {
  white-space: pre-wrap;
  display: block;
  padding: 1rem 0.5rem;
  font-size: 0.9rem;
  line-height: 0.9rem;
  border: 3px solid #666666;
  word-wrap: break-word;
}

/* --- [^Content] --- */

/* --- [Footer] --- */

footer {
	padding-top: 1rem;
	font-family: monospace;
}

/* --- [^Footer] --- */