/*
style.css

Main style sheet for the project
*/

/* Top Menu */
:root {
	/* Light theme (existing look, mapped to variables) */
	--bg-solid: purple;
	--bg-grad-top: white;
	--bg-grad-bottom: rgb(245, 245, 229);
	--text-main: #111;
	--panel-border: #000;
	--panel-shadow: grey;
	--body-panel-grad-a: purple;
	--body-panel-grad-b: white;
	--menu-bg: purple;
	--menu-border: #555;
	--menu-link: #fff;
	--menu-hover-bg: #111;
	--menu-hover-link: #aaa;
	--footer-bg: #222;
	--footer-border: #333;
	--footer-text: #ccc;
	--btn-shadow: grey;
}

/* Dark theme default */
html[data-theme="dark"] {
	--bg-solid: #1f252d;
	--bg-grad-top: #1f252d;
	--bg-grad-bottom: #151b22;
	--text-main: #e8edf3;
	--panel-border: #3a4654;
	--panel-shadow: rgba(0, 0, 0, 0.45);
	--body-panel-grad-a: #27303a;
	--body-panel-grad-b: #222b35;
	--menu-bg: #2b3541;
	--menu-border: #445264;
	--menu-link: #e8edf3;
	--menu-hover-bg: #344152;
	--menu-hover-link: #ffffff;
	--footer-bg: #1b222a;
	--footer-border: #11161b;
	--footer-text: #cfd7e0;
	--btn-shadow: rgba(0, 0, 0, 0.45);
}

/* Optional explicit light selector */
html[data-theme="light"] {
	/* inherits :root values */
}

.menu {
	/*overflow: hidden;*/
	min-width: max-content;
	width: 99%;
	/*Stops menu squashing up*/
	position: fixed;
	top: 0;
	/* margin: 0 auto; */
	/*Set the menu Z index higher than polaroid z-index so the pictures do not appear in front of the menu*/
	z-index: 10;
}

.stretch {
	border: 2px solid var(--menu-border);
	background-color: var(--menu-bg);
}

.menu ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
	/* background-color: #333; */
}

.menu li {
	float: left;
}

.menu li a {
	display: block;
	color: var(--menu-link);
	text-align: center;
	padding: 14px 16px;
	text-decoration: none;
}

.menu li a:hover {
	background-color: var(--menu-hover-bg);
	color: var(--menu-hover-link);
}

/* Heading */

/*Add a space between the H1 Heading at the top of each page and the menu*/

.heading {
	padding-top: 16px;
	margin-top: 30px;
}

/*Menu - Highlight current page background colour*/

.highlighted {
	background-color: rgb(150, 20, 70);
}

/*Menu - Current page highlighted text colour*/

li.highlighted a {
	color: #ae31f1;
}

/* Register a new user */

/*Add space between address and back to top link on contact.html page*/

address {
	margin-bottom: 20px;
	padding-bottom: 20px;
}

table {
	margin: 20px;
}

.register table {
	border: 2px solid black;
	/* For browsers that do not support gradients */
	background-color: red;
	/*Gradient colour*/
	/*background-image: linear-gradient(#08da6d, #ae31f1);*/
	background-image: linear-gradient(#EEE, #08da6d);
	/*width: 100%;*/
}

.userdetails td {
	width: 50%;
}

.contact td {
	padding: 10px 20px;
	/*add padding to space out table text, 10px top & bottom, 20 pixels either side*/
}

thead th {
	background-color: #08da6d;
	padding: 15px;
}

.register .lbl {
	text-align: right;
}

.register td {
	width: 50%;
}

tfoot tr {
	background-color: lightgreen;
	border-radius: 15px;
}

tfoot td {
	padding: 15px;
}

select option:hover {
	background-color: green;
}

/* Use outline font for labels */

label {
	font-family: 'Teko', cursive;
	font-size: 200%;
	-webkit-text-fill-color: white;
	/* Will override color (regardless of order) */
	-webkit-text-stroke-width: 2px;
	-webkit-text-stroke-color: black;
}

/* Form field width */

input.reg-form[type=text],
input.reg-form[type=email],
input.reg-form[type=submit],
input.reg-form[type=password],
select {
	width: 250px;
}

select {
	width: 300px;
	/* Stays smaller than other inputs when set to 250px*/
}

/*Login page forms*/

input[type=text],
input[type=password],
input[type=email] {
	width: 96%;
	padding: 12px 20px;
	margin: 8px 0;
	display: inline-block;
	border-radius: 10px;
}

span.psw {
	float: right;
	padding-top: 16px;
	margin-right: 10px;
}

body {
	box-sizing: border-box;
	font-family: 'Atomic Age', cursive;
	min-height: max-content;
	background-color: var(--bg-solid);
	background-image: linear-gradient(var(--bg-grad-top), var(--bg-grad-bottom));
	font-size: 1.5em;
	color: var(--text-main);
}

h1,
h2 {
	text-align: center;
}

/*Each section within the body*/

.body-border {
	padding: 10px;
	font-family: 'Teko', fantasy;
	color: var(--text-main);
	width: 1280px;
	margin: 25px auto;
	background-image: linear-gradient(to bottom right, var(--body-panel-grad-a), var(--body-panel-grad-b));
}

.body-border,
.sidenav {
	border: 2px solid var(--panel-border);
	border-radius: 8px;
	box-shadow: 5px 10px 8px var(--panel-shadow);
}

.body-border h2,
h1 {
	/*outline text*/
	-webkit-text-fill-color: rgb(5, 5, 5);
	/* Will override color (regardless of order) */
	-webkit-text-stroke-width: 2px;
	-webkit-text-stroke-color: purple;
}

.body-border h2,
p {
	text-align: center;
}

.yellow-section {
	background-image: linear-gradient(to top right, yellow, #CCC);
}

#trackTitleID {
	font-family: 'Teko', cursive;
	-webkit-text-fill-color: white;
	/* Will override color (regardless of order) */
	-webkit-text-stroke-width: 2px;
	-webkit-text-stroke-color: black;
	margin: 0;
}

/*Add different colour to game control panel to distinguish from other panels*/

.control-panel {
	/*background-image: linear-gradient(to bottom right, blue,#CCC);
	background: rgb(0,212,255);
	background: radial-gradient(circle, rgba(0,212,255,1) 0%, rgba(9,9,121,1) 78%, rgba(40,30,198,1) 100%);*/
	background: rgb(0, 171, 205);
	background: radial-gradient(circle, rgba(0, 171, 205, 1) 0%, rgba(41, 41, 231, 1) 48%, rgba(40, 30, 198, 1) 96%);
}

/*Accordian Panel*/

/*W3Schools collapsibles/accordions: https://www.w3schools.com/howto/howto_js_accordion.asp*/

.accordion {
	/*background-color: #eee;*/
	margin: 0.5% 1%;
	width: 98%;
	background-color: purple;
	font-family: 'Teko', cursive;
	color: white;
	cursor: pointer;
	padding: 18px;
	text-align: left;
	outline: none;
	font-size: 1.5em;
	transition: 0.4s;
	font-weight: bold;
	text-align: center;
	border: 1px solid black;
	-webkit-text-fill-color: white;
	/* Will override color (regardless of order) */
	-webkit-text-stroke-width: 2px;
	-webkit-text-stroke-color: black;
}

.active,
.accordion:hover {
	background-color: rgb(195, 0, 255);
	/*Set the accordion button background colour when it has been clicked or hovered over*/
}

.panel {
	padding: 18px;
	margin: 0 12px;
	display: none;
	background-color: lightyellow;
	overflow: hidden;
	font-size: 1em;
	color: black;
	box-shadow: 0 0 30px darkgrey inset;
}

/* Game Canvas */

canvas {
	font-family: 'Teko', cursive;
	border: 1px solid #000;
	display: block;
	margin: 0 auto;
}

/* Buttons */

button,
.btn {
	background-color: #00FF00;
	box-shadow: 5px 10px 18px white;
	font-family: 'Teko', cursive;
	color: white;
	padding: 8px 10px;
	margin: 8px 0;
	border: none;
	cursor: pointer;
	width: auto;
	min-width: 100px;
	border-radius: 10px;
	box-shadow: 0px 0px 20px grey inset;
	font-size: 1em;
	/*White text with black outline*/
	-webkit-text-fill-color: white;
	/* Will override color (regardless of order) */
	-webkit-text-stroke-width: 1.5px;
	-webkit-text-stroke-color: black;
	border: 1.5px solid black;
}

button:hover,
.btn:hover {
	opacity: 0.75;
}

/* Extra styles for the cancel button */

.cancelbtn {
	background-color: #f44336;
}

.not-in-use-btn {
	background-color: lightgrey;
	color: grey;
}

.center {
	/* border: 2px solid white; */
	max-width: max-content;
	margin: 0px auto;
}

#aliensCanvas {
	background-color: black;
}

/*Left Side Navigation Bar*/

.sidenav {
	background-color: #4455ff;
	height: 65%;
	width: 250px;
	position: fixed;
	z-index: 1;
	top: 0;
	overflow-x: hidden;
	padding-top: 20px;
	margin-top: 150px;
	/*Changed margin-top to 100px, as it moves when set as a percentage (previously 5%)*/
	margin-top: 175px;
	/*Changed margin-top to 100px, as it moves when set as a percentage (previously 5%)*/
}

/* Use white drop shadow for side panel headings */

/* https://www.w3schools.com/css/css_combinators.asp */

.sidenav h2,
.rightnav h2 {
	filter: drop-shadow(0 0 10px white);
}

.rightnav {
	min-height: max-content;
	background-color: #ff5544;
	right: 0;
	padding-top: 20px;
	margin-right: 0.5%;
	text-align: center;
}

#googleMap {
	width: 1280px;
	height: 720px;
}

iframe {
	border: 0;
	/*replaces frameborder*/
	width: "1280";
	height: "720";
}

.about-vid {
	width: 1280px;
	height: 720px;
}

@media screen and (max-width: 1375px) {

	/*If the screen is */
	.body-border {
		width: 95%;
	}

	body {
		font-size: 1.125em;
	}

	.menu {
		min-width: initial;
	}

	.menu li a {
		padding: 11px 13px;
		/*padding 75% of original*/
	}

	#googleMap,
	.about-vid,
	.menu {
		width: 100%;
	}

	#googleMap,
	.about-vid {
		height: 540px;
	}
}

@media screen and (max-width: 1000px) {
	body {
		font-size: .85em;
	}

	.menu {
		width: 100%;
		min-width: initial;
	}

	.menu li a {
		padding: 7px 8px;
		/*padding 50% of original*/
	}

	#googleMap,
	.about-vid {
		height: 360px;
	}
}

@media screen and (max-width: 650px) {
	body {
		font-size: .75em;
	}

	.menu {
		width: 100%;
		min-width: initial;
	}

	.menu li a {
		padding: 5px 6px;
		/*padding 50% of original*/
	}

	#googleMap,
	.about-vid {
		height: 240px;
	}
}

@media screen and (max-width: 1600px) {
	.leftnav {
		display: none;
	}

	canvas {
		width: 99.9%;
	}

	.menu-container {
		width: 100%;
	}
}

@media screen and (max-width: 1850px) {
	.rightnav {
		display: none;
	}
}

@media screen and (min-width: 1850px) {
	.main {
		margin-right: 250px;
	}
}

@media screen and (min-width: 1600px) {
	.leftnav {
		left: 0;
		margin-left: 0.5%;
	}

	.main {
		margin-left: 250px;
	}
}

.sidenav a {
	padding: 6px 8px 6px 16px;
	text-decoration: none;
	font-size: 25px;
	color: #f1f1f1;
	display: block;
}

.sidenav a:hover {
	color: #818181;
}

/*main body section on index page, positioned between two side nav bars*/

.main {
	/* Same as the width of the left side navigation bar */
	/*font-size: 28px;*/
	/* Increased text to enable scrolling */
	padding: 0px 10px;
}

/*FOOTER*/

.backtotop {
	border-top: 2px solid #777;
}

/*Round social media icon formatting*/

.fa {
	padding: 8px;
	font-size: 30px;
	width: 25px;
	text-align: center;
	text-decoration: none;
	margin: 5px 2px;
	color: #CCC;
	border-radius: 60%;
	border: 2px solid #CCC;
}

.fa-small {
	padding: 5px;
	font-size: 20px;
	width: 25px;
	text-align: center;
	text-decoration: none;
	margin: 5px 2px;
	color: #CCC;
	border-radius: 60%;
	border: 2px solid #CCC;
}

/*Set the positioning of the audio control panel*/

.info-panel {
	position: relative;
	z-index: 100;
}

/*Used to set the information icon in the top right corner of the panel*/

.float-top-right {
	position: absolute;
	top: 0px;
	right: 0px;
}

footer {
	box-sizing: border-box;
	min-height: 5%;
	width: 100%;
	border: 2px solid var(--footer-border);
	background-color: var(--footer-bg);
	color: var(--footer-text);
	padding: 0 2%;
	font-size: 75%;
	text-align: center;
}

.footer-left {
	float: left;
	width: 33%;
}

.footer-right {
	float: right;
	width: 33%;
}

/* need both margin to clear footer this is added to the last section in the index body*/

.footer-spacer {
	margin-bottom: 100px;
}

/*The fixed-footer class creates a compact fixed position footer on the index page*/

.fixed-footer {
	position: fixed;
	left: 0;
	bottom: 0;
}

/*The regular-footer has padding and appears at the bottom of the body*/

.regular-footer {
	padding: 2% 2%;
}

/*The width needs to be set on the SVG space invader image in the footer*/

/*Links have the same colour as other text in the footer*/

footer a:link,
footer a:visited {
	color: var(--footer-text);
}

/*Links become opaque when the mouse cursor is over them to indicate they are links*/

footer a:hover {
	opacity: 0.5;
}

footer a:active {
	color: purple;
}

/*The copyright text in the footer is smaller than the rest of the footer*/

.copyright {
	width: 100%;
	overflow: auto;
	font-size: 75%;
}

/*Format space invader image in footer*/

img.space-invader-grey {
	width: 60px;
	filter: drop-shadow(0 0 10px #CCC)
}

/*Make alien in footer shadow change purple on mouse over*/

img.space-invader-grey:hover {
	filter: none;
	transform: scale(1, 1) rotate(0deg) !important;
	transition: all 0.35s;
	filter: drop-shadow(0 0 15px red);
}

img.logo {
	padding-top: 10px;
	filter: drop-shadow(0 0 10px purple);
	width: 250px;
}

h1,
h2 {
	filter: drop-shadow(0 0 8px orange);
}

.yellow-section h1,
.yellow-section h2 {
	filter: drop-shadow(0 0 8px purple);
}

.gallery {
	background-color: white;
	width: 60%;
	border: 2px solid black;
	padding: 0;
	margin: 0 auto;
	padding: 20px 20px 0px 20px;
	box-shadow: 0 0.2rem 1.2rem #666;
}

.gallery img {
	width: 100%;
	padding: 0;
	margin: 0;
}

/*Polaroid Photo Effect*/

/*https://codepen.io/Wandersonsc/pen/RMerRy*/

.photos {
	font-family: 'Poor Story', cursive;
	margin: 0 auto;
	text-align: center;
}

.polaroid {
	background: #fff;
	padding: 1rem;
	box-shadow: 0 0.2rem 1.2rem rgba(0, 0, 0, 0.2);
}

.polaroid>img {
	max-width: 100%;
	height: auto;
}

.caption {
	font-size: 1.2em;
	text-align: center;
	line-height: 2em;
}

.item {
	width: 30%;
	display: inline-block;
	margin-top: 2rem;
	filter: grayscale(100%);
}

.item .polaroid:before {
	content: '';
	position: absolute;
	z-index: -1;
	transition: all 0.35s;
}

.item:nth-of-type(4n+1) {
	transform: scale(0.8, 0.8) rotate(5deg);
	transition: all 0.35s;
}

.item:nth-of-type(4n+1) .polaroid:before {
	transform: rotate(6deg);
	height: 20%;
	width: 47%;
	bottom: 30px;
	right: 12px;
	box-shadow: 0 2.1rem 2rem rgba(0, 0, 0, 0.4);
}

.item:nth-of-type(4n+2) {
	transform: scale(0.8, 0.8) rotate(-5deg);
	transition: all 0.35s;
}

.item:nth-of-type(4n+2) .polaroid:before {
	transform: rotate(-6deg);
	height: 20%;
	width: 47%;
	bottom: 30px;
	left: 12px;
	box-shadow: 0 2.1rem 2rem rgba(0, 0, 0, 0.4);
}

.item:nth-of-type(4n+4) {
	transform: scale(0.8, 0.8) rotate(3deg);
	transition: all 0.35s;
}

.item:nth-of-type(4n+4) .polaroid:before {
	transform: rotate(4deg);
	height: 20%;
	width: 47%;
	bottom: 30px;
	right: 12px;
	box-shadow: 0 2.1rem 2rem rgba(0, 0, 0, 0.3);
}

.item:nth-of-type(4n+3) {
	transform: scale(0.8, 0.8) rotate(-3deg);
	transition: all 0.35s;
}

.item:nth-of-type(4n+3) .polaroid:before {
	transform: rotate(-4deg);
	height: 20%;
	width: 47%;
	bottom: 30px;
	left: 12px;
	box-shadow: 0 2.1rem 2rem rgba(0, 0, 0, 0.3);
}

.item:hover {
	filter: none;
	transform: scale(1, 1) rotate(0deg) !important;
	transition: all 0.35s;
}

.item:hover .polaroid:before {
	content: '';
	position: absolute;
	z-index: -1;
	transform: rotate(0deg);
	height: 90%;
	width: 90%;
	bottom: 0%;
	right: 5%;
	box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.2);
	transition: all 0.35s;
}

/*Web Fonts*/

/* latin */

/* Previoulsy we were using a stylesheet link for webfonts e.g. <link href="https://fonts.googleapis.com/css?family=Atomic+Age&display=swap" rel="stylesheet">*/

@font-face {
	font-family: 'Atomic Age';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: local('Atomic Age Regular'), local('AtomicAge-Regular'), url(https://fonts.gstatic.com/s/atomicage/v12/f0Xz0eug6sdmRFkYZZGL18bn9A.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* devanagari */

/* Old link from html page: <link href="https://fonts.googleapis.com/css?family=Teko:700" rel="stylesheet" />*/

@font-face {
	font-family: 'Teko';
	font-style: normal;
	font-weight: 700;
	src: local('Teko Bold'), local('Teko-Bold'), url(https://fonts.gstatic.com/s/teko/v9/LYjCdG7kmE0gdRhYsCVgqGIu.woff2) format('woff2');
	unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;
}

/* latin-ext */

@font-face {
	font-family: 'Teko';
	font-style: normal;
	font-weight: 700;
	src: local('Teko Bold'), local('Teko-Bold'), url(https://fonts.gstatic.com/s/teko/v9/LYjCdG7kmE0gdRhYsCpgqGIu.woff2) format('woff2');
	unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */

@font-face {
	font-family: 'Teko';
	font-style: normal;
	font-weight: 700;
	src: local('Teko Bold'), local('Teko-Bold'), url(https://fonts.gstatic.com/s/teko/v9/LYjCdG7kmE0gdRhYsCRgqA.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

center {
	z-index: 5;
	background-color: purple;
	border: 2px solid white;
}

.fb-like {
	text-align: center;
	padding-bottom: 8px;
}

.share-buttons {
	text-align: center;
	padding-top: 0px;
	position: relative;
}

.fb-like a {
	margin: 0 5px;
	position: absolute;
	top: 10px;
}

.fb-like img {
	width: 25px;
}

.sharebuttons a {
	padding: 6px 2px;
	padding-top: 20px;
	position: absolute;
	top: 50px;
}

img.sharebuttons {
	width: 100px;
}

#twit a {
	left: 30px;
}


/* Toggle button styles */

.theme-toggle-wrap {
	position: fixed;
	top: 8px;
	right: 12px;
	z-index: 30;
}

.theme-toggle-btn {
	border: 1px solid var(--panel-border);
	background: var(--menu-bg);
	color: var(--menu-link);
	border-radius: 8px;
	padding: 6px 10px;
	font-family: 'Teko', cursive;
	font-size: 0.9em;
	cursor: pointer;
}

.theme-toggle-btn:hover {
	opacity: 0.9;
}

/* ---------- Dark theme cleanup overrides ---------- */
html[data-theme="dark"] .highlighted {
	background-color: #3f5166 !important; /* active menu tab */
}

html[data-theme="dark"] li.highlighted a {
	color: #e8edf3 !important; /* active menu text */
}

html[data-theme="dark"] .body-border h2,
html[data-theme="dark"] .body-border h1,
html[data-theme="dark"] h1,
html[data-theme="dark"] h2 {
	-webkit-text-stroke-color: #0f141a !important;
	filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.45)) !important;
	color: #e8edf3 !important;
}

html[data-theme="dark"] .accordion {
	background: linear-gradient(180deg, #344152, #2b3541) !important;
	color: #e8edf3 !important;
	-webkit-text-stroke-color: #0f141a !important;
	border: 1px solid #3a4654 !important;
}

html[data-theme="dark"] .active,
html[data-theme="dark"] .accordion:hover {
	background: #3f5166 !important;
}

html[data-theme="dark"] .panel {
	background-color: #222b35 !important;
	color: #cfd7e0 !important;
	box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.35) !important;
}

/* Back to top + any default blue links */
html[data-theme="dark"] a,
html[data-theme="dark"] a:visited {
	color: #c5ced8 !important;
}

html[data-theme="dark"] a:hover,
html[data-theme="dark"] a:active {
	color: #f1f5f9 !important;
}

/* Make main title light in dark mode */
html[data-theme="dark"] .heading h1 {
	color: #e8edf3 !important;
	-webkit-text-fill-color: #e8edf3 !important;
	-webkit-text-stroke-width: 0 !important;
	text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35), 0 0 10px rgba(0, 0, 0, 0.35);
	filter: none !important;
}