/*
	Variables
*/
:root {
	--logo-url: url("../assets/SAGE22LOGONOPALMSVG.svg");
	--bg-main-top: rgb(31,14,30);
	--bg-main-bottom: rgb(34,15,33);
	--bg-nav-left: rgb(103,29,84);
	--bg-nav-right:  rgb(67,68,143);
	--bg-mid: rgb(54,17,52);
	--text-nav-normal: rgb(208, 190, 208);
	--text-nav-hover: rgb(238, 210, 228);
	--text-nav-selected:  rgb(54,17,52);
	--color-pink: rgb(234,55,136);
	--color-dark-pink: rgb(176,34,140);
	--color-orange: rgb(246,164,62);
	--color-light-blue: rgb(22,126,235);
	--color-dark-blue: rgb(7,95,193);
	--color-pale-blue: rgb(172,171,225);
	--color-purple: rgb(155,47,153);
	--color-dark-purple: rgb(89,39,83);
	--color-yellow: rgb(246,197,81);
	--color-tan: rgb(210,192,163);
	--color-green: rgb(5,201,129);
	--color-cyan: rgb(2,176,178);
	--color-light-blue-transparent: rgba(22,126,235,.5);
	--color-dark-blue-transparent: rgba(7,95,193,.5);
	--color-pink-transparent: rgba(234,55,136,.5);
	--color-dark-pink-transparent: rgba(176,34,140,.5);
	--color-yellow-transparent: rgba(246,197,81,.5);
	--color-green-transparent: rgba(5,201,129,.5);
	--color-cyan-transparent: rgba(2,176,178,.5);
}

html {
	width:  100%;
	height: 100%;
	margin: 0;
	padding: 0;

	font-family: sans-serif;
}

#backgroundWorkaround {
    z-index: -1;
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-size: 100%;
    background-image: 
    	url('../assets/headgrad.png'),
		linear-gradient(to right, transparent 10%, var(--bg-mid) 10% 90%, transparent 90%),
    	linear-gradient(var(--color-pink), var(--color-light-blue)),
    	linear-gradient(var(--bg-main-top), var(--bg-main-bottom));

	background-repeat: no-repeat;

	background-size: 
		986px auto,
		cover,
		81% 100%,
		cover;

	background-position: 
		top 10vh right 10vw, 
		center, 
		center, 
		center;
    background-attachment: fixed;
}

body {
	margin: 0;
	padding: 0;
}

/*
	Header bar and navigation
*/

header {

	position: fixed;
	top: 0;
	width: 100%;
	z-index: 10;
}

nav {
	
	display: flex;
	align-items: center;

	height:  10vh;

	background-image: linear-gradient(to right, var(--bg-nav-left), var(--bg-nav-right));
	
	border-bottom-style: solid;
	border-bottom-width: large;
	border-color: var(--color-yellow);
	border-image: 
		linear-gradient(to right, var(--color-yellow), var(--color-pink))
		27 /                    /* slice */
	    0px 0px 6px 0px /    /* width */
	    0px 0px 0px 0px       /* outset */
	    stretch;
}

nav a {
	text-decoration: none;
	padding: 0.75vw;
}

nav a:link {
	color: var(--text-nav-normal);
}

nav a:visited {
	color: var(--text-nav-normal);
}

nav a:hover {
	color: var(--text-nav-hover);
}

nav a:active {
	color: var(--text-nav-hover);
}

nav a img {
	width:  1.5vw;
	margin: 0 .25vw;
}

nav a:hover img {
	filter: brightness(1.2);
}

nav a.selected img {
	filter: brightness(0.2);
}

nav a#logo {
	padding: 0;
}

nav a.selected {
	color: var(--bg-main-bottom);
	border-radius: 1vw;
	--gradient-start: var(--color-yellow);
	--gradient-end: var(--color-pink);
}

#logo img {
	width: 15em;
	position: absolute;
	top: 1em;
	left: 2em;
}

#nav-logo {
	flex: .5;
	align-self: normal;
}

#nav-pages {
	text-align: center;
	flex: 1;
	display: flex;
	flex-direction: row;
	font-size: x-large;
}

#nav-pages a {
	display:flex;
	align-items:center;
}

#nav-socials {
	text-align: center;
	flex: .5;
}

#nav-socials img {
	width:  2.5vw;
}

#nav-socials input {
	display: none;
}

#dropdown {
	display: none;
}

#nav-socials img:hover {
	filter: brightness(1.2);
}


/*
	Main Body
*/
#main {

	width:  80%;

    
    padding: 0 0.5%;

    padding-top: 10vh;

	background-attachment: fixed;

	margin: auto;
	
}

/*
	Reusable elements, eg. headers
*/

.gradientHeader {
	--gradient-start: white;
	--gradient-end: black;
	--gradient-angle: 150deg;
	background: linear-gradient(var(--gradient-angle), var(--gradient-start), var(--gradient-end));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.gradientBackground {
	--gradient-start: white;
	--gradient-end: black;
	--gradient-angle: 90deg;
	background: linear-gradient(var(--gradient-angle), var(--gradient-start), var(--gradient-end));
}

/*
	Mobile tweaks
*/

@media (max-width: 1100px) {

	#backgroundWorkaround {
		background-image: 
			linear-gradient(to right, transparent 5%, var(--bg-mid) 5% 95%, transparent 95%),
	    	linear-gradient(var(--color-pink), var(--color-light-blue)),
	    	linear-gradient(var(--bg-main-top), var(--bg-main-bottom));

		background-size: 
			cover,
			91% 100%,
			cover;

		background-position: center;
	}
	
	#main {

		width:  90%;

	}

	#nav-pages a {
		justify-content: center;
		margin-left: .15em;
		margin-right: .15em;
	}
	
	#nav-pages a img {
		width: 1.5em;
	}

	#nav-pages a span {
		display: none;
	}

	#nav-logo {
		align-self: center;
	}

	#logo img {
		width: 4em;
		top: .1em;
		left: .1em;
		position: relative;
	}

	#nav-socials {
		position: relative;
		display: flex;
		justify-content: flex-end;
	}

	#nav-socials img {
		width:  2em;
		margin: 1em;
	}

	#dropdown {
		display: inline-block;
	}

	#dropdownContent {
		display: none;
		position: absolute;
		background: var(--bg-nav-right);
		flex-direction: column;
		top: 100%;
	}

	#nav-socials input {
		display: block;
		width: 0;
		height: 0;
		opacity: 0;
	}

	#nav-socials input:checked + #dropdownContent {
		display: flex;
	}

	
}


/*
	temp
*/