/*
 *  CORE STYLESHEET for ASU Solutions
 *  Created by ASU Solutions
 */
 
 /* ###--- BODY GENERAL STYLING - START ---### */
* {
	box-sizing: border-box; /* APPLIES TO ALL HTML ELEMENTS - Ensures all element total width is a product of itself plus any applied padding */
}

/* Set light and dark mode, and create global variables for colours */
:root {
	color-scheme: light dark;
	
	--bg: #DDF;
	--font: #00234B;
	--glass1: rgba(200,200,200,0.8);
	--hide-light: none;
	--hide-dark: inline-block;
	--invert: invert(100%);
	--invert-flip: none;
	--link: #0088FF;
	--link-hover: #00FFFF;
	--shadow: rgba(0, 0, 0, 0.8);	
}

[data-theme="dark"] {  /* Light theme uses blue links, dark theme uses orange) */
	--bg: #00234B;
	--font: #DDD;
	--glass1: rgba(100,100,100,0.8);
	--hide-light: inline-block;
	--hide-dark: none;	
	--invert: none;
	--invert-flip: invert(100%);	
	--link: #FF8800;
	--link-hover: #FFFF00;
	--shadow: rgba(20, 20, 20, 0.8);
}


body {
	background-color: #00234B;
	margin: 0;
	font-size: 1.0em;
	font-family: Arial, Helvetica, sans-serif;
	color: var(--font);		/* Font colour */
	
	/* Gradient backdrop settings */
		background: linear-gradient(-45deg, #004B28, #00234B, #28004B, #4B2800);
		background-size: 400% 400%;
		animation: gradient 15s ease infinite;
		background-attachment: fixed;
}

@keyframes gradient {					/* Gradient backdrop animation settings */
    0% {
        background-position: 0% 0%;
    }
    25% {
        background-position: 100% 100%;
    }
	50% {
        background-position: 0% 100%;
    }
	75% {
        background-position: 100% 0%;
    }
    100% {
        background-position: 0% 0%;
    }
}

hr {
	height: 8px;
	width: 90%;
	margin: 0 8;
	border-radius: 8px;
	border-top: 1px solid #ff8800;
	border-left: 1px solid #ff8800;
	border-bottom: 1px solid #4B2800;
	border-right: 1px solid #4B2800;
}

a {
	text-decoration: none;					/* Hide underlines on hyperlinks */
	color: var(--link);							/* Set colour of hyperlink text */
}

a:hover {
	text-decoration: none;				/* Only show underline on hyperlinks when the cursor is over them */
	color: #FFFF00;							/* Colour of hyperlink text when the mouse is over them */
}

.full-height {
	height: 100vh;
}

/* ###### BODY GENERAL STYLING - END ###### */



/* ###--- NAVBAR STYLING - START ---### */	
ul.topnav {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	list-style-type: none;
	margin: 0px;
	padding: 0;
	border-bottom: 2px solid rgba(200, 200, 200, 0.75);
	overflow: hidden;
	background: rgba(0, 0, 0, 0.7);
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
	padding: 8px; 							/* spacing around inside of object border, in the order of Top Right Bottom Left */
	color: #DDD;
	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.4);
	/* background-color: #000036;
	box-shadow: 0px 0px 8px 4px #000; */
	z-index: 150;
}	

ul.topnav li {float: right;}

ul.topnav li a {
	display: inline-block;
	vertical-align: middle;
	margin: 0px;
	height: 50px;
	color: rgb(200,200,200);
	text-align: center;
	padding: 2px 8px; /* height width */
	text-decoration: none;
	min-width: 15px;
	max-width: 400px;
}

ul.topnav li a:hover { 
	color: #FF0;
	text-shadow: 0px 0px 8px #FFFF00;
	/* box-shadow: inset 0px 0px 8px 8px #000036; */
}

/* ul.topnav li a.active {
	background-color: #FF0; 
	color: #00F;
	box-shadow: inset 0px 2px 8px 4px #000;
} */

ul.topnav li.left {float: left;}

ul.topnav img {
	display: inline-block;
	vertical-align: middle;
	padding: 2px 8px;
	margin: 0px;
	height: 50px;
	text-decoration: none;
}	
/* ###### NAVBAR STYLING - END ###### */


/* ###--- IMAGE CONTAINER STYLING - START ---### */
.hero-img {
	position: relative;
	overflow: hidden;
	text-align: center;
	color: white;
	width: 100%;
	top: 0px;
	margin: 0;
	margin-bottom: 16px;
	padding: 0;
	height: 100vh;
	z-index: 1;
}

.hero-img img {
	width: 100%;
	height: 100vh;
	z-index: 2;
	object-fit: cover;
}

.hero-text {			/* Centred text for ".hero-image" container.  Must be within the ".hero-image" <div> tags */
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 3rem;
	padding: 16px;
	border: 0px;
	border-radius: 16px;
	color: var(--font);
	background-color: var(--glass1);
	z-index: 10;
}
	
.hero-transparent {		/* Container to hold a large image */
	display: flex;
	justify-content:center;
	align-items: center;
	overflow: hidden;
	text-align: center;
	color: white;
	height: 100vh;
	width: 100%;
	top: 0px;
	left: 0px;
	margin: 0 auto;
	padding: 8px;
	z-index: 1;
}

.hero-transparent img {
	height: auto;
	width: 66.6%;
	opacity: 1.0; 		/* ADJUST WHEN DONE TESTING ##### */
	z-index: 2;
	padding: 32px;
	margin: auto;
	object-fit: contain;
}
/* ###### IMAGE CONTAINER STYLING - END ###### */


/* ###--- DIV STYLING - START ---### */
.container {
	width: 95%;
	max-width: 1100px;						/* Set the maximum width of the div */
	min-width: 400px;
	margin: auto;							/* "auto" centers the DIV on the page, otherwise it will align to the left */
	margin-bottom: 1em;					/* Adding a margin to the bottom spaces out the DIV's without affecting the above settings */
	border: 1px solid rgba(200, 200, 200, 0.5);
	border-radius: 15px;					/* Apply a 15 pixel radius to the corners of the div borders */
	background: rgba(0, 0, 0, 0.7);
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
	padding: 8px; 							/* spacing around inside of object border, in the order of Top Right Bottom Left */
	color: #DDD;
	box-shadow: 4px 4px 16px rgba(0, 0, 0, 0.4);	/* horizontal offset, vertical offset, blurring, spread, colour */
	z-index: 100;
}

.container p, h1, h2, h3, h4, h5, h6{
	padding: 0px 8px 4px 8px;
}

.pad-screen { 		/* Use this DIV to pad out empty-ish screens so that the footer is at the bottom of the page */
	width: 100%;
	height: 95vh;
	background-color: rgba(0,0,0,0);
}
/* ###### DIV STYLING - END ###### */



/* ###--- FOOTER STYLING - START ---### */

#footer { 
	position: flow;
	bottom: 0;
	width: 100%;
	left: 0;
	background: rgba(0, 0, 0, 0.6);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	padding: 8px; 
	text-align: center;
	font-size: 0.9em;
	color: #EEE;
	padding-bottom: 8px;
	padding-top: 4px;
	border-top: 2px solid rgba(200, 200, 200, 0.5);
}

.footerImg {
	max-width: 100%;
	/* ### Center the image ### */
}

#footer a { color: #EEE; }

#footer a:hover { color: #FF0; text-shadow: 0px 0px 8px #FF0;}

#footer a.active { color: #FC0; }

/* ###### FOOTER STYLING - END ###### */


/* ###--- RESPONSIVE STYLING - START ---### */	


@media screen and (min-width: 800px) {

}



/* ###### RESPONSIVE STYLING - END ###### */