/* Special custom fonts */
@font-face {
    font-family: 'abyssopelagic';
	src: url('abyssopelagic.otf');
}

@font-face {
    font-family: 'Agency FB';
	src: url('AGENCYR.ttf');
}

/*  Done so that the gradient background outside of the
	container doesn't warp */
html {
 	height: 100%;
}

/* CSS FOR THE BASE AND GENERAL UI */
body {
	background: linear-gradient(#01333f, #001419, #000000);
}

/*  Manages main banner text, used for the title page, death and survival
	pages, and for any major minigame title. */
#title {
	cursor: default;
	top: 200px;
	height: 150px;
	width: 600px;
	left: 200px;
	margin: auto;
	box-sizing: border-box;
	padding-top: 35px;
	color: white;
	background-color: none;
	position: absolute;
	text-align: center;
	letter-spacing: 10px;
	font-family: 'abyssopelagic';
	font-size: 65px;
	z-index: 5;
}

/* Manages the smaller button under the main banner */
#startButton {
	box-sizing: border-box;
	padding-top: 10px;
	color: white;
	background-color: none;
	font-family: 'abyssopelagic';
	font-size: 30px;
	z-index: 5;
	position:  absolute;
	text-align: center;
	top: 350px;
	left: 300px;
	width: 400px;
	height: 50px;
	margin: auto;
	letter-spacing: 10px;
	cursor: pointer;
}

#textBox {
	position: absolute;
	padding: 10px;
	z-index: 5;
	left: 200px;
	top: 475px;
	background-color: rgba(8, 8, 8, 0.9);
	border: 2px solid rgb(24, 24, 24);
	border-radius: 5px;
	width: 600px;
	height: 75px;
	font-family: 'Agency FB';
	color: white;
	font-size: 20px;
	cursor: pointer;
	text-align: center;
}

#skipBox {
	text-align: center;
	position: absolute;
	padding: 10px;
	z-index: 5;
	left: 875px;
	top: 500px;
	background-color: rgba(8, 8, 8, 0.9);
	border: 2px solid rgb(24, 24, 24);
	border-radius: 5px;
	width: auto;
	height: 25px;
	font-family: 'Agency FB';
	color: white;
	font-size: 20px;
	cursor: pointer;
}

/* Sets the 1000 by 600 stage where the content is displayed */
.container {
	overflow: hidden;
	background-color: black;
	margin: auto;
	position: relative;
	top: 50px;
	width: 1000px;
	height: 600px;
	border: solid black 3px;
}

/* The class that manages the background image of every page */
.bg {
	position: absolute;	
	z-index: 1;
}

/* Manages the volume adjusting bar on the top left */
#volumeSlider {
	top: 20px;
	left: 20px;
	width: 110px; /*needs to be 10px wider to accommodate full width of the dot which takes its position from the top left corner*/
	height: 10px;
	background-color: none;
	border: 1px solid white;
	position: absolute;
	z-index: 6;
	border-radius: 5px;
}

#volumeDot {
	width: 10px;
	height: 10px;
	background-color: white;
	cursor: pointer;
	position:relative;
	z-index: 5;
	border-radius: 5px;
	/*left: 100px; /* start it off at 100 */
}

/*  These classes set the icon pictures for volume/timers, so that
	people don't get confused about what each bar does. Fixed position. */
.volume {
	top: 13px;
	left: 140px;
	position: absolute;
	z-index: 5;
}

.oxygen {
	top: 13px;
	left: 845px;
	position: absolute;
	z-index: 5;
}

/* GAME UI - 120 SECOND TIMER */
/* A white bar at the top right, manages placement/size of timer bar */
#timer {
	top: 20px;
	left: 880px;
	width: 100px;
	height: 10px;
	border: 1px solid white;
	border-radius: 5px;
	position: relative;
	z-index: 6;
}

/* The white filling bar that shrinks to the left every second */
#countdown {
	position: absolute;
	top: -1px;
	left: 0;
	width: 100px;
	height: 11px;
	background-color: white;
	border-radius: 5px;
	z-index: 5;
}

/* CSS FOR FORKED PATH UI. They are invisible but can be hovered over and clicked */
#left {
	width: 200px;
	height: 200px;
	top: 200px;
	left: 100px;
	position: absolute;
	cursor: pointer;
	z-index: 3;
	background-color: none;
	border-radius: 100px;
}

#right {
	width: 200px;
	height: 200px;
	top: 200px;
	left: 700px;
	position: absolute;
	cursor: pointer;
	z-index: 3;
	background-color: none;
	border-radius: 100px;
}

#middle {
	width: 200px;
	height: 200px;
	left: 425px;
	top: 200px;
	position: absolute;
	cursor: pointer;
	z-index: 3;
	border-radius: 100px;
	background-color: none;
}

#leftText {
	background-color: none;
	z-index: 4;
	width: 100px;
	height: 25px;
	position: absolute;
	cursor: default;
	top: 325px;
	left: 120px;
	font-family: 'Agency FB';
	color: white;
	font-size: 20px;
	text-align: center;
}

#rightText {
	background-color: none;
	z-index: 4;
	width: 100px;
	height: 25px;
	position: absolute;
	cursor: default;
	top: 325px;
	left: 775px;
	font-family: 'Agency FB';
	color: white;
	font-size: 20px;
	text-align: center;
}

#middleText {
	background-color: none;
	z-index: 4;
	width: 100px;
	height: 25px;
	position: absolute;
	cursor: default;
	top: 325px;
	left: 450px;
	font-family: 'Agency FB';
	color: white;
	font-size: 20px;
	text-align: center;
}

/* CSS FOR MINI GAME 1 - ANGLERFISH CAVE */
/* The overlay gradient for the Anglerfish Minigame */
#transition {
	width: 100%;
	position: absolute;
	height: 100%;
	z-index: 4;
	top: 0;
	left: 0;
	background-color: black;
	opacity: 0.9;
	display: none;
	pointer-events: none;
}

/* CSS FOR MINI GAME 2 - ROCKY TUNNEL */
#spawnZone {
	cursor: default;
	background-color: none;
	top: 100px;
	left: 350px;
	height: 400px;
	width: 300px;
	position: absolute;
	z-index: 3;
}
#drop1 {
	position: absolute;
	z-index: 3;
	width: 350px; 
	height: 400px;
	top: 100px;
	left: 0px;
	background-color: none;
}

#drop2 {
	position: absolute;
	z-index: 2;
	width: 350px;
	height: 400px;
	top: 100px;
	right: 0px;
	background-color: none;
}

.rocks {
	cursor: pointer;
}
/* End of Rock Game */


/* Jellyfish Cave Game */

#jellyfish {
	position: absolute;
	z-index: 3;
}
.jellyfish {
	animation: moveIt 3s linear infinite alternate;
}
@keyframes moveIt {
	0%   { bottom: 0px; }
	50%  { bottom: 500px; }
    100% { bottom: 0px; }
}
#swimmer {
	position: absolute;
	left: 10px;
	top: 250px;
	z-index: 4;
	width: 50px;
	height: 50px;
}

/* Bubble Pop Geyser Game*/
.bubble-outer {
	border: 4px solid black;
	display: inline-block;
	border-radius: 250px;
	position: absolute;
	z-index: 3;
	box-sizing: border-box;
}

#score {
	top: 550px;
	left: 100px;
	width: 800px;
	height: 10px;
	border: 1px solid white;
	border-radius: 5px;
	position: relative;
	z-index: 3;
	background-color: none;
}

#countup {
	position: absolute;
	top: 0;
	left: 0px;
	width: 0px;
	height: 11px;
	background-color: white;
	border-radius: 5px;
	z-index: 3;
}
/* End of Geyser */

/* Panorama Pages */
.panorama {
	z-index: 3;
	position: absolute;
	width: 1500px;
	height: 600px;
	left: -250px;
}

#yesBox {
	text-align: center;
	background-color: green;
	position: absolute;
	padding: 10px;
	z-index: 4;
	left: 835px;
	top: 500px;
	background-color: rgba(8, 8, 8, 0.9);
	border: 2px solid rgb(24, 24, 24);
	border-radius: 5px;
	width: 50px;
	height: 25px;
	font-family: 'Agency FB';
	color: white;
	font-size: 20px;
	cursor: pointer;
}

#noBox {
	text-align: center;
	background-color: green;
	position: absolute;
	padding: 10px;
	z-index: 4;
	left: 915px;
	top: 500px;
	background-color: rgba(8, 8, 8, 0.9);
	border: 2px solid rgb(24, 24, 24);
	border-radius: 5px;
	width: 50px;
	height: 25px;
	font-family: 'Agency FB';
	color: white;
	font-size: 20px;
	cursor: pointer;
}
/* End of Panorama Pages */


/* CSS FOR POISON CAVE */
#cave {
	z-index: 3;
	position: absolute;
}

#checkpoint {
	position: absolute;
	z-index: 4;
	height: 5px;
	width: 150px;
	top: 595px;
	left: 850px;
	background-color: none;
}
/* END OF POISON CAVE */

/* CRYPT CSS */
#crypt {
	z-index: 3;
	position: absolute;
}
#door {
	z-index: 2;
	position: absolute;
}
/* END OF CRYPT */

/* CSS FOR PUZZLE MINIGAME */
ul#puzzleBox {
	position: absolute;
	width: 560px;
	height: 405px;
	z-index: 3;
	top: 98px;
	left: 200px;
	z-index: 3;
	list-style-type: none;
	background-color: none;
}

ul#puzzleBox li {
	z-index: 2;
	padding: 1px;
	float: left;
}
/* END OF PUZZLE MINIGAME */

/* CSS FOR ANEMONE CAVE */
.obstacles {
	position: absolute;
	cursor: pointer;
}

#item1 {
	top: 250px;
	left: 125px;
	z-index: 4;
}

#item2 {
	top: 300px;
	left: 30px;
	z-index: 5;
}

#item3 {
	top: 450px;
	left: 470px;
	z-index: 5;
}

#item4 {
	top: 400px;
	left: 625px;
	z-index: 6;
}

#item5{
	top: 475px;
	left: 275px;
	z-index: 5;
}

#item6{
	top: 450px;
	left: 175px;
	z-index: 5;
}

#item7{
	top: 250px;
	left: 375px;
	z-index: 4;
}

#item8{
	top: 250px;
	left: 650px;
	z-index: 4;
}

#item9{
	top: 380px;
	left: 550px;
	z-index: 4;
}

#item10{
	top: 225px;
	left: 250px;
	z-index: 1;
}

#item11{
	top: 320px;
	left: 745px;
	z-index: 5;
}

.gear {
	position: absolute;
	z-index: 3;
	cursor: pointer;
}

#flippers {
	top: 400px;
	left: 100px;
}

#mask {
	top: 400px;
	left: 700px;
}

#tank {
	top: 350px;
	left: 460px;
}

/* Property for both DECOMPRESSION and ASCENSION */
#ascentBg {
	position: absolute;
	top: -900px;
	z-index: 2;
}

/* Decompression */
#dc-container {
	width: 75px;
	height: 250px;
	position: absolute;
	top: 150px;
	right: 100px;
	background-color: white;
	z-index: 3;
}
#dc-indicator {
	width: 75px;
	height: 50px;
	position: absolute;
	top: 100px;
	background-color: yellow;
}
#dc-bar {
	width: 75px;
	height: 5px;
	background-color: red;
	position: absolute;
	top: 50%;
	z-index: 4;
}
#playerD {
	position: absolute;
	top: 250px;
	left: 100px;
	background-color: red;
	height: 20px;
	width: 20px;
}
/* End of Decompression */


/* CSS FOR ASCENSION TYPING GAME */
#playerA{
	position: absolute;
	background-color: none;
	height: 20px;
	width: 20px;
	top: 250px;
	left: 20px;
	z-index: 4;
}
#letter_sequence_container {
	position: absolute;
	bottom: 100px;
	left: 250px;
	height: 50px;
	width: 500px;
	background-color: none;
	overflow: hidden;
}
#letter_sequence_container ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	position: absolute;
	width: auto;
	left: 0px;
	z-index: 2;
}
#letter_sequence_container ul li {
	list-style-type: none;
	margin: 0;
	padding: 0;
	float: left;
	background-color: rgba(20, 34, 37, 0.5);
	width: 50px;
	height: 50px;
	padding-top: 5px;
	text-align: center;
	box-sizing: border-box;
	text-transform: uppercase;
	font-size: 30px;
	font-family: 'Agency FB';
	border: 2px solid rgb(20, 34, 37);
	border-radius: 5px;
	color: white;
	z-index: 3;
}
#porthole {
	position: absolute;
	width: 50px;
	height: 50px;
	box-sizing: border-box;
	border: 2px dotted white;
	top: 0;
	left: 0;
	z-index: 999;
}
/* END OF ASCENSION */