body {
	font-family: "Helvetica Neue", "Verdana", sans-serif;
	/* CSS Trick for Easier Em > px Conversion*/
	font-size: 62.5%;
	min-width: 640px;
	min-height: 100vh;
	display: flex;
	flex-wrap: nowrap;
	/* Makes Text Unhighlightable */
	-webkit-user-select: none;  /* Chrome all / Safari all */
	-moz-user-select: none;     /* Firefox all */
	-ms-user-select: none;      /* IE 10+ */
}

/* Link Colours/Styling */
a:link, a:active, a:visited {
	color: #ffffff;
}
a:hover, a:focus {
	color: #ffcb38;
	outline: none;
}

/* Sidebar */
#sidebar {
	text-align: left;
    background-color: #303030;
	color: #ffffff;
	min-width: 20em;
	max-width: 39em;
	position: relative;
	padding: 20px;
}
#side-logo {
    display: inline-block;
	width: 100%;
	text-align: center;
	margin: 10px 0 24px;
}
#side-logo img {
	height: 150px;
	width: 150px;
}
#side-content {
    display: inline-block;
	width: 100%;
	text-align: center;
    font-size: 1.4em;
	line-height: 1.5;
}
.title {
	font-size: 3em;
	line-height: 1;
}
.description {
	padding: 15px 0 15px;
	color: #ffcb38;
}
#footer {
	bottom: 0;
	left: 0;
	right: 0;
	margin: 10px;
	position: absolute;
}
.footer-text {
	display: block;
	width: 100%;
	height: auto;
	color: #c2c2c2;
	background-color: #303030;
	font-size: 1.3em;
	text-align: center;
}

/* Showcase */
#show-wrap {
	text-align: center;
    font-size: 1.4em;
	flex-basis: 80%;
	min-width: 400px;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
.img-wrap {
	padding: 24px;
	display: flex;
	align-items: center;
	margin: auto;
}
.show-item-img {
	width: 100%;
	max-width: 300px;
}

/* Lightbox */
#lightbox-wrap {
	position: fixed;
}
.lightbox {
	visibility: hidden;
	text-align: center;
	display: flex;
	flex-direction: column;
	height: 100vh;
	width: 100vw;
	font-size: 1.4em;
	opacity: 0;
	transition: ease-in-out opacity .3s;
	position: absolute;
}
.lightbox:target {
	visibility: visible;
	opacity: 1;
}
.backsplash {
	background-color: white;
	opacity: .5;
	position: absolute;
	width: 100%;
	height: 100%;
	display: none;
}
.lightbox:target .backsplash {
	display: block;
}
.lightbox-container {
	margin: auto;
	max-height: 70%;
	max-width: 50%;
	background-color: #666699;
	background: rgb(102,102,153);
	background: radial-gradient(circle, rgba(102,102,153,0) 0%, rgba(102,102,153,0.7231093120842087) 14%, rgba(102,102,153,1) 100%);
	border-radius: 12px;
	position: relative;
	display: grid;
	grid-template-rows: minmax(60%, auto) 1fr 1fr;
	padding: 36px;
}
.lightbox-img-wrap {
	display: flex;
}
.lightbox-img {
	margin: auto;
	max-width: 100%;
	max-height: 100%;
}
.lightbox-text {
	flex-basis: auto;
	flex-grow: 1;
	flex-shrink: 0;
	color: white;
}
.lightbox-text.title {
	padding: 12px 0 12px;
}
.lightbox-text.accred {
	padding-top: 4px;
}
.desc {
	line-height: 1.5;
}
.lightbox a {
	color: #ffcb38
}
.lightbox a:hover, .lightbox a:focus {
	text-decoration: underline;
}

/* ToS Page */
#tos-wrap {
	text-align: left;
	color: #303030;
	flex-basis: 80%;
	min-width: 400px;
	margin: 15px 30px 15px 30px;
}
.tos-head {
	text-align: center;
	font-size: 2.5em;
	font-weight: bold;
	margin-bottom: 10px;
}
.tos-subhead {
	font-size: 1.7em;
	font-weight: bold;
	padding: 3px 0 0 0;
}
.tos-text {
	font-size: 1.4em;
	margin: 4px 0 4px 0;
}