/* variables */
:root {
	--panel-half-width: 30px; /* half desired gap between sidebox and main box */
	--layout-outer-margin: 20px;
	}

html {
	background-color: black;
	}
				
body {
	box-sizing: border-box;
	min-height: 100vh;
	margin: var(--layout-outer-margin) auto;
	padding: 0 var(--layout-outer-margin);			
	font: 17px "Aileron", sans-serif;
	font-weight: 100;
	line-height: 1.3;
	color: white;
	max-width: 1400px;
	display: grid;
	
	grid-template-columns: auto 1fr;
	gap: var(--panel-half-width);
	}

.side-box {
	position: sticky;
	top: var(--layout-outer-margin);
	box-sizing: border-box;
	padding: 5px var(--panel-half-width) 10px 0;
	height: max-content;

	/* Travis */
	/* Add border stuff separately so that can be easily overriden */
	border-color: #C600FF;
	border-style: solid;
	border-width: 0 2px 0 0;
	}

header {
	margin-bottom: 10px;
	}

.lined-heading {
	display: flex;
	gap: 10px;
	align-items: center;
	}
.lined-heading * {
	flex: 1 0 auto;
	}
.lined-heading:after {
	content: "";
	height: 1px;
	width: 100%;
	background-color: white;
	}
	
header h1 {
	margin: 0;
	font-size: 53px;
	font-family: "Aileron", sans-serif;
	font-style: 900;
	color: #C600FF;
	}
	
img {
	display: block;
	box-sizing: border-box;
	padding: 4px;
	border: 2px solid white;
	max-width: 100%;
	}
	
pre {
	font: 17px "Courier New";
	text-align: center;
	white-space: pre-wrap;
	word-wrap: break-word;
	}
	
.bodygrid {
	max-width: 100%;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	}

.bodybox {
	clear: both;
	overflow: hidden;
	padding: 10px 0;
	}
	
.bodybox h2 {
	font:22px "Aileron", sans-serif;
	font-weight: 600;
	line-height: 0.5;
	}

nav {
	/* Travis */
	/* Make nav a flexbox so we can change how the links are organised more easily with media queries */
	display: flex;
	justify-content: flex-start;
	flex-direction: column;
	gap: 5px;
	}

nav a {
	display: block;
	text-decoration: none;
	text-align: right;
	color: #C600FF;
	font: 20px "Aileron", sans-serif;
	font-weight: 600;

	/* Travis */
	/* set some basic border stuff here so we can just change little bits on hover */
	/* (makes it easier to change which border gets highlighted when changing between mobile and desktop viewports) */
	border-width: 0 0 0 2px; /* set left margin to 2px - we'll change this property in media queries to change border side */
	border-style: solid;
	border-color: transparent;
	}
				
nav a:hover {
	/* Travis */
	/* We simply set the border colour, the width is already set :) */
	/* (width either set above or by media query depending on screen size) */
	border-color: #C600FF;
	background-color: rgba(198, 0, 255, 0.15);
	}

citynav {
	display: flex;
	justify-content: center;
	flex-direction: row;
	gap: 5px;
	font: 20px "Aileron", sans-serif;
	}

citynav a {
	padding: 0px 5px 0px 5px;
	text-decoration: none;
	text-align: middle;
	color: #FFFFFF;
	font: 20px "Aileron", sans-serif;
	font-weight: 100;
	border-width: 0 2px 0 2px; 
	border-style: solid;
	border-color: transparent;
	}
				
citynav a:hover {
	color: #C600FF;
	border-color: #C600FF;
	background-color: rgba(198, 0, 255, 0.15);
	}

iframe {
	box-sizing: border-box;
	padding: 4px;
	margin: 10px 0;
	border: 2px solid white;
	max-width: 100%;
	}


/* HIGH-LEVEL CLASSES */
.left { /* float any block to the left of its container */
	float: left;
	margin-right: 10px !important;
	}

.right { /* float any block to the right of its container */
	float: right;
	margin-left: 10px !important;
	}

.clear { /* force clear any floated blocks */
	clear: both;
	}

video.banner,
img.banner,
image.banner { /* Seperated object-fit media styling as you probably don't want that behaviour with every image*/
	object-fit: cover;
	height: 20vh;
	width: 100%;
	}


/* Travis */
/* The fun mobile viewport transformation bit */
/* set so that mobile view will be enabled at screen width 700px and below */
@media only screen and (max-width: 700px) {
	body {
		grid-template-columns: unset; /* we set the side-box and main-box to stack vertically */
		grid-template-rows: auto 1fr; 
		}

	nav {
		flex-direction: row; /* change flex direction to horizontal */
		flex-wrap: wrap; /* allow multiple rows (for narrow screens) */
		gap: 15px; /* increase gap between links for better touchscreen usability */ 
		}

	nav a {
		border-width: 0 0 2px; /* override - set bottom width to 2px, disable all other borders */
		}

	.side-box {

		position: static; /* disable sticking to save screen real-estate */

		/* set side-box border to bottom 2px 
		NOTE: Disabled because it I think it looks better keeping to right
		Uncomment this to move border to bottom on navigation elements :) 
		>>> border-width: 0 0 2px 0; */
		}
	}

/* Additional media query for any overrides for larger (wider) screens */
@media only screen and (min-width: 1400px) {
	.banner {
		height: 25vh;
		}
	}