@charset "UTF-8";
/* 
AVAILABLE FONTS:
	•  moderno-fb, serif [weight: 400, 700; style: normal, italic]
	•  moderno-fb-compressed ["]
	•  moderno-fb-condensed ["]
	•  moderno-fb-extra-condensed ["]
	•  ubuntu-mono, monospace ["]
*/
:root {
	/* FONTS */
    
    /* Header 1 -- title text, marked with <h1></h1> */
	--h1-font: forma-djr-text, sans-serif;
	--h1-weight: 700;
	--h1-style: normal;
	--h1-size: 6em;
	
    /* Header 2 -- secondary text, marked with <h2></h2> */
	--h2-font: forma-djr-text, sans-serif;
	--h2-weight: 200;
	--h2-style: normal;
	--h2-size: 4em;
	
    /* Header 3 -- tertiary text, marked with <h3></h3> */
	--h3-font: forma-djr-text, sans-serif;
	--h3-weight: 200;
	--h3-style: normal;
	--h3-size: 3em;
	
    /* Paragraph -- primary text, marked with <p></p> */
	--p-font: forma-djr-text, sans-serif;
	--p-weight: 200;
	--p-style: normal;
	--p-size: 2em;
	
	/* GRADIENTS */
    
    /* --gradient is assigns colors to the main gradient, --gradient-transition assigns colors to the transitional gradient */
	--gradient: var(--gradient-main);
	--gradient-transition: var(--gradient-main);
    
	--gradient-main: linear-gradient(45deg, indigo, darkorange); /* Colors for main menu */
	--gradient-projects: linear-gradient(45deg, blue, red); /* Colors for project selection menu */
	--gradient-project: linear-gradient(45deg, lime, hotpink); /* Colors for project viewer */
}
body { /* Values assigned to body apply to the whole html document */
	margin: 0;
	line-height: 0.1;
	overflow: hidden; /* Prevents offscreen items from being viewable */
}
#grayscale { /* If the user's browser does not support backdrop-filter, do not display the grayscale element. (backdrop-filter is a newer feature, so compatibility is limited to updated browsers.) */
    display: none;
}
@supports ((backdrop-filter: grayscale()) or (-webkit-backdrop-filter: grayscale())) { /* If the user's browser supports backdrop-filter... */
    #grayscale {
        display: block; /* Display the element */
        z-index: 9; /* Apply the grayscale filter to all elements with a z-index < 9 */
        position: absolute;
        pointer-events: all; /* Prevent the user from interacting with elements with a z-index < 9 */
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        backdrop-filter: grayscale() contrast(1.5);
        -webkit-backdrop-filter: grayscale() contrast(1.5); /* Adding an additional filter argument with a -webkit- prefix increases compatibility to include safari-based browsers */
    }
}
.gradient { /* Describes basic attributes for all gradients */
	width: 100%;
	height: 100%;
	position: absolute;
	pointer-events: none;
	z-index: 10;
	top: 0;
	left: 0;
}
#gradient1 { /* Stores opacity, color and transition times of the main gradient */
	transition: opacity 0.6s;
	background: var(--gradient);
	opacity: 0.85;
}
#gradient2 { /* Stores opacity, color and transition times of the transitional gradient. The transitional gradient is only used/visible when transitioning between two gradient color sets. */
	transition: opacity 1s;
	background: var(--gradient-transition);
	opacity: 0;
}
#end-game { /* Style for the close game option */
	color: white;
	z-index: 1000;
	position: absolute;
	top: 0;
	left: 5px;
	font-size: var(--p-size);
	opacity: 0;
    text-shadow: 0px 0px 1px black;
    pointer-events: none;
}
#landing-menu { /* Container for the main menu */
	transition: left 1s, top 1s;
	z-index: 1000;
	position: absolute;
	top: 50%;
	left: 10px;
	color: white;
	transform: translate(0, -50%);
}
h3:hover { /* Causes the text to change when hovering above text with the tag <h3> */
	color: yellow;
	transition: color 1s;
}
.title-box { /* Stores attributes for all title boxes */
	border: solid 1px white;
	padding: 13px 20px 0px 20px;
	transition: font-size 0.5s;
}
#main-title { /* Stores attributes specific to the main title */
	width: 620px;
}
@supports (-moz-appearance: none) { /* This implementation is a bit hack-ish but w/e. It targets browsers running gecko, Mozilla/Firefox's engine. */
    #main-title {
        font-size: 0.9em;
    }
}
#hero {
	position: absolute;
	background: lightgray;
	text-align: left;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
h1 {
	font-family: var(--h1-font);
	font-weight: var(--h1-weight);
	font-style: var(--h1-style);
	font-size: var(--h1-size);
	z-index: 1000;
}
h2 {
	font-family: var(--h2-font);
	font-weight: var(--h2-weight);
	font-style: var(--h2-style);
	font-size: var(--h2-size);
}
h3 {
	font-family: var(--h3-font);
	font-weight: var(--h3-weight);
	font-style: var(--h3-style);
	font-size: var(--h3-size);
	cursor: pointer; /* Makes h3 text display the pointing hand cursor. Useful since h3 text is reserved for interactive elements only. */
}
p {
	font-family: var(--p-font);
	font-weight: var(--p-weight);
	font-style: var(--p-style);
	font-size: var(--p-size);
	line-height: 1.2;
}
#projects-menu { /* Attributes for the project selection menu */
	position: absolute;
	top: 0;
	right: calc(100% + 1000px);
	text-align: right;
	color: white;
	z-index: 999;
	transition: right 1s;
	overflow-y: scroll;
	height: 100%;
}
#projects-viewer { /* Attributes for the project viewer */
	left: -100%; /* Starting position is off-screen-left */
	width: 100%;
	height: 100%;
	color: white;
	z-index: 900;
	position: absolute;
	transition: left 1s; /* Animations to move this element on the x-axis last 1 second */
}
.project {
	display: none; /* Projects are not displayed by default. Each project is assigned a unique ID in index.html and are set to "display: block;" individually via JS so we can use one projects-viewer element for all projects. This drastically saves html/css load times per every project stored on the website. */
}
#unityContainer { /* unityContainer is not displayed by default so the game does not eat page resources in demo. Will be set to "display: block" via JS in index.html when the user selects "Play game". */
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    transform: translate(-50%, -50%);
}
@media only screen and (max-width: 680px) { /* Applies the following attributes to devices with a viewport <= 680 CSS Pixels -- targeting mobile users */
	#main-title { /* Scales the main title down for mobile devices */
		width: 100%;
		font-size: 0.5em;
	}
    
}