/**
 * Colour variables
 **/
:root {
	--font-base-size: 18px;
	--color-body-text: #AAC4C8;
	--color-link-hover: #D87272;
	--color-accent: #A92424; /* RGB instead of Hex for use with RGBA further down */
	--color-accent-dimmed: #410404;
	--color-heading: #2F7ACD;
	--color-content-background: #000;
}


/**
 * Default element overrides
 **/
html, body {
	min-height: 100%;
}
body {
	margin: 0px;
	padding: 0px;
	background: #02041A;
	overflow-x: hidden;
}


/**
 * Element defaults
 **/
h1, h2, h3, p, ol, ul, li {
	margin: 0;
	padding: 0;
	font-weight: normal;
	font-style: normal;
	font-weight: normal;
}
li {
	margin-left: 15px;
	padding-left: 5px;
	list-style-type: "⚔ ";
}
strong {
	font-weight: bold;
}
a {
	color: var(--color-accent);
}
a:hover {
	color: var(--color-link-hover);
}
br {
	line-height: 10px;
	height: 10px;
}


/**
 * Typography
 **/
@font-face {
  font-family: "CustomFont";
  font-style: normal;
  font-weight: 400;
  src: url(https://astaria.net/fonts/NanumMyeongjo-Regular.ttf) format("ttf");
}
html {
	font-size: var(--font-base-size);
}
body {
	margin: 0px;
	padding: 0px;
	background: #02041A;
	font-family: "CustomFont" serif;
	font-size: 1rem; /* base for other inherited `rem` units  */
	line-height: 1.3rem;
	color: var(--color-body-text);
}
h1 {
	font-size: 1.9rem;
	line-height: 2.3rem;
	color: var(--color-heading);
	text-align: center;
	text-shadow: 0 0 80px var(--color-heading);
}
h2 {
	font-size: 1.6rem;
	line-height: 2.0rem;
	color: var(--color-heading);
	text-align: center;
	text-shadow: 0 0 10px black;
}

/**
 * Vertical spacing
 **/
h1 {
	margin-bottom: 20px;
}
h2 {
	margin-bottom: 10px;
}
h3, h4, h5, h6 {
	margin-bottom: 15px;
}
ol, ul, li, p {
	margin-bottom: 15px;
}

/**
 * Page layout
 **/
.container-outer {
	padding: 20px;
}
	.container {
		margin: 40px auto;
		max-width: 80ch;
	}
	header,
	footer {
		padding: 40px 0 20px 0;
		text-align: center;
	}
	section {
		padding-bottom: 80px;
		background: center bottom no-repeat url(images/section-divider.png);
	}
	.grid {
		display: flex;
		flex-direction: row;
		align-items: stretch;
	}
		.grid-item {
			padding: 20px;
			flex-grow: 0;
			flex-basis: 100%;
			background: var(--color-content-background);
		}
		.grid-item--25 { flex-basis: 25%; }
		.grid-item--33 { flex-basis: 33%; }
		.grid-item--50 { flex-basis: 50%; }
		.grid-item--66 { flex-basis: 66%; }
		.grid-item--75 { flex-basis: 75%; }
		.grid-item + .grid-item {
			margin-left: 20px;
		}
		/* for very narrow viewports...  */
		@media only screen and (max-width: 540px) {
			.grid {
				display: block;
			}
				.grid-item + .grid-item {
					margin: 0 0 20px 0;
				}
		}
	section.content--masthead {
		margin-bottom: 60px;
	}
	.image-card {
		display: flex;
	}
		.image-card img {
			margin-right: 15px;
		}


/**
 * Page content
 **/
header img {
	display: block;
	width: 100%;
	max-width: 88vw;
	margin: 0 auto 10px auto;
}
header .copy--strapline {
	color: var(--color-accent);
	font-weight: bold;
}
section .copy--intro {
	font-size: 1.2rem;
	line-height: 1.5rem;
}
section .copy--connection-details {
	text-align: center;
}
.video-container {
	margin: 30px 0;
	padding: 15px;
	border: 1px solid var(--color-accent-dimmed);
	background: var(--color-content-background);	
	box-shadow: 0px 0px 22px 10px var(--color-accent-dimmed);
}
	video {
		max-width: 100%;
	}
section.content--major-update {
	position: relative;

	--section-divider--side-width: 133px;
	--section-divider--side-height: 26px;
}
	section.content--major-update:before,
	section.content--major-update:after {
		content: '';
		display: block;
		position: absolute;
		width: var(--section-divider--side-width);
		height: var(--section-divider--side-height);
	}
	section.content--major-update:before {
		left: calc(var(--section-divider--side-width) * -1 - 20px);
		top: calc(50% - var(--section-divider--side-height));
		background: center center no-repeat url(images/section-divider--left.png);
	}
	section.content--major-update:after {
		right: calc(var(--section-divider--side-width) * -1 - 20px);
		top: calc(50% - var(--section-divider--side-height));
		background: center center no-repeat url(images/section-divider--right.png);
	}