/*variables*/

:root {
	--header-bg-color: #FEFEFE; /*	*/
	--logo-color: #222; /*	*/

	--main-bg-color: #FEFEFE; /*	*/
	--main-bg-color-lite: #FEFEFE; /*	*/

	--highlight: #F53; 		/*	*/

	--text-colour-lite: #DDD;  /*	*/
	--text-colour-dark: #222;  /*	*/
	--text-colour-navb: #222;  /*	*/
  }

body {
	background-color: var(--main-bg-color);
}

/* HEADER */

    .header_container {
    	position: fixed;
		z-index: 2;
		width: 100vw;
		background-color: var(--header-bg-color);
		font-family: 'Poppins', sans-serif;
    }
    
	.logo_header_bar>h2 {
		color: var(--logo-color);
	    text-align: center;
		margin: 0 auto;
		padding: 2rem 0 2rem 0;
		font-size: 4rem;
		font-family: 'Staatliches', monospace;
	}

	.logo_index {
		color: var(--logo-color);
	    text-align: center;
		margin: -20vh auto;
		font-size: 4rem;
		font-family: 'Staatliches', monospace;
	}

	.header_menu_bar {
		margin: 0;
		text-align: center;
		box-shadow: 0 4px 2px -2px #444;
	}

	.header_menu_bar>li {
		list-style-type: none;
		display: inline;
	}

	ul.header_menu_bar {
		padding: 0 0 .5rem 0;
	}

	#shift{
		margin-top: 8rem;
	}
	
	a.navig {
		margin: .4em;
		color: var(--text-colour-navb);
	    text-decoration: none;
	    display: inline-block;

		border-bottom-right-radius: .5rem;
		border-bottom-left-radius: .5rem;

		padding: .3rem .5rem;
	}
	
    .header_menu_bar a:visited {
		color: var(--text-colour-navb);
	}


/* THE COLOURS FOR THE MENU BAR */	
	#rb0>a.navig:hover, #rb0>.highlight {
		background-color: #ff312e;
		color: var(--text-colour-dark);
	}

	#rb0>a {
		border-top: 2px solid #ff312e;
	}

	#rb1>a.navig:hover, #rb1>.highlight {
		background-color: #ff8b1e;
		color: var(--text-colour-dark);
	}

	#rb1>a {
		border-top: 2px solid #ff8b1e;
	}

	#rb2>a.navig:hover, #rb2>.highlight {
		background-color: #FFCC00;
		color: var(--text-colour-dark);
	}

	#rb2>a {
		border-top: 2px solid #FFCC00;
	}

	#rb3>a.navig:hover, #rb3>.highlight {
		background-color: #5BCD30;
		color: var(--text-colour-dark);
	}

	#rb3>a {
		border-top: 2px solid #5BCD30;
	}

	#rb4>a.navig:hover, #rb4>.highlight {
		background-color: #33C4FF;
		color: var(--text-colour-dark);
	}

	#rb4>a {
		border-top: 2px solid #33C4FF;
	}

	#rb5>a.navig:hover, #rb5>.highlight {
		background-color: #CBA4ED;
		color: var(--text-colour-dark);
	}

	#rb5>a {
		border-top: 2px solid #CBA4ED;
	}

	#rb6>a.navig:hover, #rb6>.highlight {
		background-color: #8148B2;
		color: var(--text-colour-dark);
	}

	#rb6>a {
		border-top: 2px solid #8148B2;
	}

	#rb7>a.navig:hover, #rb7>.highlight {
		background-color: #F53;
		color: var(--text-colour-dark);
	}

	#rb7>a {
		border-top: 2px solid #F53;
	}
	
/* IMAGES */
	img, .video {
		margin: 1.5rem;
		margin-left: auto;
		margin-right: auto;
		display: block;
		max-width: 50vw;
		border-radius: 1rem;
	}
	
	img:not(.noborder, .circular--landscape) {
		border: 1px solid #999;
	}

	video:not(.noborder) {
		border: 1px solid #999;
	}

	.circular--landscape img { 
		width: auto; 
		height: 100%;
	}

	.circular--landscape { 
		object-fit: cover;
		width: 150px; 
		height: 150px; 
		overflow: hidden; 
		border-radius: 50%; 
		filter: grayscale(0%);
		border: #ff8b1e 5px solid;
	} 

	.circular--landscape:hover { 
		filter: grayscale(100%);
		border: #000 5px solid;
	} 

	.gallery {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
		grid-template-rows: 1fr;
		grid-gap: 0rem;
	}

	.gallery figure {
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: 1fr;
	}

	.gallery figcaption {
		margin-top: -25px;
		border-radius: 1rem;
		padding:.5rem;
		color: #000;
	}

	figcaption {
		font-weight: bold;
		margin-top: -5px;
	}

	ul li{
		font-weight: bold;
	}

	figure {
		margin-top: 3rem;
		margin-bottom: 3rem;
	}

	.centimg {
  		display: flex;
  		justify-content: center;
  		align-items: center;
		height:100%;

	}

/* Image floating */
	.floater {
		float: right;
		margin-left: 2em;
		border-radius:1em;
	}

/* Used for the 'Back to the Top' links */
	.bordered {
		display: block;
		margin: 2em -1.5em 1.5em -1.5em;
		background-color:var(--text-colour-lite);
		padding: .5em 1.5em;
	}

/* MAIN SECTION */
	main {
		border-radius: 1rem 1rem 0 0;
		background-color: var(--main-bg-color-lite);
		border: 2px solid var(--text-colour-lite); /*border*/
		grid-area: mn;
	}

	main p {
		margin-bottom: .5em;
	}
	
	h4 {
		color: var(--text-colour-lite);
		margin:0;
		margin-top:2em;
		padding-bottom: .5em;
	}
	
	article {
		padding-bottom: 0rem;
	}
	
/* SUBHEADER */
	#subNav {
		grid-area: sA;
	}

	.sec_nav {
		font-size: 1rem;
		padding-bottom: .3em;
		color: var(--text-colour-dark);
		float: right;
	}

	.hold {
		padding-top: 1.2rem;
	}
	
	.sec_nav a {
		font-weight:400;
		text-decoration: none;
		color: var(--highlight);
		cursor: url(hand.cur), pointer;
	}	

	.sec_nav a:hover {
		color: var(--text-colour-dark);
		font-weight: 600;
		transition: color .5s;
	}
	
	.sep {
		padding-left: .2em;
		padding-right: .2em;
	}
	
	/*Float some of the secondary nav (the primary things) to the left */
	.left {
		float:left;
	}
	
	.item {
		padding: 0 .1em;
	}
		
/* TABLE FORMATTING */
	td {
		font-family: monospace;
		font-size: 1.2em;
		padding: 2px 10px 2px 10px;
		background-color: var(--text-colour-lite);
	}

	td.top {
		background-color: var(--text-colour-lite);
	}

/* Extra PADDING/MARGINS */
	.section_padding {
		padding: .8em 1.5em .5em 1.5em;
	}	
	
	/* Used to make the margin less for the first item in a section */
	.top {
		margin-top: 0.3em;
		margin-bottom: 0.7em;
	}
	
/* Used for code inserted in text */
	pre {
		overflow: auto;
	}

	code {
		display:inline-block;
		font-family: "Courier New", "Courier", monospaced;
		border-radius: .5em;
	}

	code:not(.inline) {
		margin: .5em .5em 1em .5em;
		padding: .5em 1em;
	}
	
	.inline {
		padding: 0 .5em;
	}
	
	.html {
		background-color: var(--text-colour-lite);
	}
	
	.cmd {
		background-color: var(--main-bg-color);
		color: var(--text-colour-lite);
	}
	
	.root {
		color: #009900;
	}
	
/* List floating */
	.ref {
		font-size: .85em;
		color: #333;
		padding: 0;
		margin: 0;
		list-style-type: none;
		padding-bottom: 1em;
	}

	li {
		padding: .3em 0;
	}

/* Text / link formatting */
	.in_text_link {
		text-decoration: none;
		color: var(--highlight);
		cursor: url(hand.cur), pointer;
	}

	.licence_link {
		text-decoration: none;
		color: #444;
	}

	.licence_link:visited {
		text-decoration: none;
		color: #444;
	}
	
	.in_text_link:hover, .licence_link:hover {
		font-weight: 600;
		color: var(--text-colour-dark);
	}

	.up_arrow {
		color: var(--text-colour-dark);
	}
	
/* FOOTER SECTION */
	footer, .subheader {
		background-color: var(--text-colour-lite); /* #00a4bb; */
		color: var(--text-colour-dark);
		border-left: 2px solid var(--text-colour-lite); /*border*/
		border-right: 2px solid var(--text-colour-lite); /*border*/
	}
	
	.copy {
		color: var(--main-bg-color);
	}
	
	footer {
		grid-area: ft;
		padding: 1em 1.5em;
		border-bottom: 2px solid var(--text-colour-lite); /*border*/
	}

/* ****************************************************************************************************************** */

/* ----------- BREAKPOINTS ----------- */
	.grid {
		margin:0;
		display: grid;
		grid-template-rows: auto;
		grid-gap: 0;
	}

/* ****************************************************************************************************************** */

/* ----------- Phone P ----------- */
@media screen and (max-width:499px) {
	.grid {
		grid-template-columns: repeat(3, 1fr);
		grid-template-areas:
			"sA sA sA"
			"mn mn mn"
			"ft ft ft";
	}

	footer, .rounded {
		border-radius: 0;
		margin: 0;
	}
	
	nav, #photo-box {
		display: none;
	}
	
	.sec_nav {
		float:left;
	}
	
	img {
		float: none;
	}
}

/* ****************************************************************************************************************** */

/* ----------- Tablet Portrait ----------- */
@media screen and (min-width:500px) {
	.grid {
		grid-template-columns: repeat(3, 1fr);
		grid-template-areas:
			"sA sA sA"
			"as as as"
			"mn mn mn"
			"ft ft ft";
	}

	.video {
		height:180px;
	}
	
	footer, .rounded {
		border-radius: 0;
		margin: 0;
	}
}

/* ****************************************************************************************************************** */

/* ----------- Tablet Landscape ----------- */
@media screen and (min-width:900px) {
	.grid {
		grid-template-columns: repeat(7, 1fr);
		grid-template-areas:
			". sA sA sA sA sA ."
			". mn mn mn mn mn ."
			". mn mn mn mn mn ."
			". ft ft ft ft ft .";
	}


/* Pull the video height to 360px (full height) */	
	.video {
		height:360px;
	}
	
	footer {
		margin-bottom: 5vh;
		border-radius: 0 0 1em 1em;
	}
}

/* ****************************************************************************************************************** */

/* ----------- Desktops and laptops ----------- */
@media only screen  and (min-width : 1200px) {
	.grid {
		grid-template-columns: repeat(7, 1fr);
		grid-template-areas:
			". sA sA sA sA sA ."
			". mn mn mn mn mn ."
			". mn mn mn mn mn ."
			". ft ft ft ft ft .";
	}
	
	footer {
		margin-bottom: 5vh;
		border-radius: 0 0 1em 1em;
	}

	img {
		max-width:40vw;
	}
}

/* ****************************************************************************************************************** */