@charset "utf-8";
/* CSS Document */

*{
	margin:0px;
}

body {
	background-color:black;
}

/* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #252525;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #404040;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #505050;
}


/*PAGE CONTAINER*/

/*ACT I SCENE I*/
.container {
	position: absolute; 
	width:100%;
	height:100%;
	top:0px;
	left:0px;
	animation-name: introFade;
	animation-duration: 11.5s;
}

@keyframes introFade {
  0%   {opacity: 0%;}
	99%   {opacity: 0%;}
  100% {opacity: 100%;}
}

/*REMAINING ACTS*/
.container2 {
	position: absolute; 
	width:100%;
	height:100%;
	top:0px;
	left:0px;
}

/*ACTS WITH ACT TITLE*/
.container3 {
	position: absolute; 
	width:100%;
	height:100%;
	top:0px;
	left:0px;
	opacity:0;
	animation-name: introFade;
	animation-fill-mode: forwards;
	animation-duration: 1s;
	animation-delay: 5.5s;
}

/*EPILOGUE*/
.container4 {
	position: absolute; 
	width:100%;
	height:100%;
	top:0px;
	left:0px;
	opacity:0;
	animation-name: introFade;
	animation-fill-mode: forwards;
	animation-duration: 1s;
	animation-delay: 2s;
}

/*TITLE*/
.title {
	color: #999999;
	font-size: 200%;
	font-family: 'courier new';
	position: absolute;
	text-align:center;
	margin:auto;
	top: 40%;
	width:100%;
	opacity:0;
	animation-name: titleFade;
	animation-duration: 3.5s;
	animation-delay:2s;
}

@keyframes titleFade {
  0%   {opacity: 0%;}
	1%   {opacity: 100%;}
  100% {opacity: 100%;}
}

/*ACT*/
.act {
	color: #999999;
	font-size: 100%;
	font-family: 'courier new';
	position: absolute;
	text-align:center;
	margin:auto;
	top: 42%;
	width:100%;
	opacity:0;
	animation-name: titleFade;
	animation-duration: 2.5s;
	animation-delay:7s;
}

.act2 {
	color: #999999;
	font-size: 15px;
	font-family: 'courier new';
	position: absolute;
	text-align:center;
	margin:auto;
	top: 42%;
	width:100%;
	opacity:0;
	animation-name: titleFade;
	animation-duration: 2.5s;
	animation-delay:2s;
}

.silence {
	color: #999999;
	font-size: 15px;
	font-family: 'courier new';
	position: absolute;
	text-align:center;
	margin:auto;
	top: 42%;
	width:100%;
	opacity:0;
	animation-name: titleFade;
	animation-duration: 4s;
	animation-delay:2s;
}

.credits{
	font-size: 14px;
	color: #999999;
	font-family: 'courier new';
	position: relative;
	margin-bottom:10px;
	text-align:center;
	top: 50px;
	white-space: nowrap;
    overflow: hidden;
	opacity: 0;
	animation-fill-mode: forwards;
	animation-name: pauses;
	animation-duration: 5s;
	animation-delay:9s;
}

.thanks{
	font-size: 14px;
	color: #999999;
	font-family: 'courier new';
	position: relative;
	margin-bottom:10px;
	text-align:center;
	top: 50px;
	white-space: nowrap;
    overflow: hidden;
	opacity: 0;
	animation-fill-mode: forwards;
	animation-name: pauses;
	animation-duration: 5s;
	animation-delay:15s;
}

@keyframes pauses {
  0%   {opacity: 0%;}
	1%   {opacity: 100%;}
  100% {opacity: 100%;}
}


/*BACKGROUNDS*/
#background {
  position: absolute;
	height: 100%;
	width: 100%;
	background-size:contain;
	background-position:center;
	background-repeat: no-repeat;
}

#darkness {
	position: absolute;
	height:100%;
	width:100%;
	background-color:black;
	opacity:70%;
}

#bathroomLight {
	position: absolute;
	height:100%;
	width:100%;
	background-size:contain;
	background-position:center;
	background-repeat: no-repeat;
	background-image:url("Backgrounds/Inside_Bathroom-Light.png");
	opacity:0%;
}



/*DELAY BOXES*/

/*ACT I SCENE I*/
.delay {
	position: absolute; 
	width:100%;
	height:100%;
	top:0px;
	left:0px;
	animation-name: textFade;
	animation-duration: 13.5s;
}

@keyframes textFade {
  0%   {opacity: 0%;}
	99%   {opacity: 0%;}
  100% {opacity: 100%;}
}

/*REMAINING ACTS*/
.delay2 {
	position: absolute; 
	width:100%;
	height:100%;
	top:0px;
	left:0px;
	animation-name: textFade;
	animation-duration: 2s;
}

.delay3 {
	position: absolute; 
	width:100%;
	height:100%;
	top:0px;
	left:0px;
	animation-name: textFade;
	animation-duration: 8.5s;
}

.delay4 {
	position: absolute; 
	width:100%;
	height:100%;
	top:0px;
	left:0px;
	animation-name: textFade;
	animation-duration: 4s;
}

/*TEXT BOX*/
#textBox {
	border-style:ridge;
	border-width:1px;
	border-color: gray;
	background-color: black;
	position: absolute;
	top:100px;
	left:420px;
	width: 440px;
	height: 150px;
	opacity:50%;
}

#textBoxMedium {
	border-style:ridge;
	border-width:1px;
	border-color: gray;
	background-color: black;
	position: absolute;
	top:100px;
	left:420px;
	width: 440px;
	height: 175px;
	opacity:50%;
}

#textBoxSmall {
	border-style:ridge;
	border-width:1px;
	border-color: gray;
	background-color: black;
	position: absolute;
	top:100px;
	left:420px;
	width: 440px;
	height: 110px;
	opacity:50%;
}

#textBoxXSmall {
	border-style:ridge;
	border-width:1px;
	border-color: gray;
	background-color: black;
	position: absolute;
	top:100px;
	left:420px;
	width: 440px;
	height: 75px;
	opacity:50%;
}

#textBoxLarge {
	border-style:ridge;
	border-width:1px;
	border-color: gray;
	background-color: black;
	position: absolute;
	top:100px;
	left:420px;
	width: 440px;
	height: 210px;
	opacity:50%;
}

#textBoxXLarge {
	border-style:ridge;
	border-width:1px;
	border-color: gray;
	background-color: black;
	position: absolute;
	top:100px;
	left:420px;
	width: 440px;
	height: 240px;
	opacity:50%;
}

#textBoxXXLarge {
	border-style:ridge;
	border-width:1px;
	border-color: gray;
	background-color: black;
	position: absolute;
	top:100px;
	left:420px;
	width: 440px;
	height: 270px;
	opacity:50%;
}

#MaraName {
	border-style:ridge;
	border-width:1px;
	border-color: gray;
	border-bottom:none;
	padding-left:10px;
	padding-top:5px;
	font-size: 14px;
	color: #D0D0D0;
	font-family: 'courier new';
	background-color: black;
	position:absolute;
	top: 75px;
	left:420px;
	height:20px;
	width:60px;
	opacity:50%;
}

#mysteryName {
	border-style:ridge;
	border-width:1px;
	border-color: gray;
	border-bottom:none;
	padding-left:10px;
	padding-top:5px;
	font-size: 14px;
	color: #D0D0D0;
	font-family: 'courier new';
	background-color: black;
	position:absolute;
	top: 75px;
	left:420px;
	height:20px;
	width:60px;
	opacity:50%;
}

#StrangerName {
	border-style:ridge;
	border-width:1px;
	border-color: gray;
	border-bottom:none;
	padding-left:10px;
	padding-top:5px;
	font-size: 14px;
	color: #D0D0D0;
	font-family: 'courier new';
	background-color: black;
	position:absolute;
	top: 75px;
	left:420px;
	height:20px;
	width:90px;
	opacity:50%;
}

#closeText {
	cursor:pointer;
	color:white;
	position:absolute;
	left:880px;
	top:110px;
}


/*TEXT STYLE*/

/*links*/
a:link {                 /* unvisited */
		color:#D0D0D0;
		text-decoration:none;
	  }                        
	  a:visited {              /* visited */
        color:#D0D0D0;
	  }
a:hover {
	color:white;
}


/*regular text*/
.text p{
	font-size: 14px;
	color: #D0D0D0;
	font-family: 'courier new';
	position: relative;
	margin-bottom:3px;
	width: 440px;
	left:435px;
	top: 110px;
	white-space: nowrap;
    overflow: hidden;
}

/*TYPEWRITER EFFECT*/
.text p:nth-child(1) {
	opacity:0;
    animation: type 1s steps(40, end);
    animation-fill-mode: forwards;
	animation-delay: .5s;
}

.text p:nth-child(2) {
	opacity:0;
    animation: type 1s steps(40, end);
    animation-fill-mode: forwards;
	animation-delay:1.5s;
}

.text p:nth-child(3) {
	opacity:0;
    animation: type 1s steps(40, end);
    animation-fill-mode: forwards;
	animation-delay:2.5s;
}

.text p:nth-child(4) {
	opacity:0;
    animation: type 1s steps(40, end);
    animation-fill-mode: forwards;
	animation-delay:3.5s;
}

.text p:nth-child(5) {
	opacity:0;
    animation: type 1s steps(40, end);
    animation-fill-mode: forwards;
	animation-delay:4.5s;
}

.text p:nth-child(6) {
	opacity:0;
    animation: type 1s steps(40, end);
    animation-fill-mode: forwards;
	animation-delay:5.5s;
}

.text p:nth-child(7) {
	opacity:0;
    animation: type 1s steps(40, end);
    animation-fill-mode: forwards;
	animation-delay:6.5s;
}

.text p:nth-child(8) {
	opacity:0;
    animation: type 1s steps(40, end);
    animation-fill-mode: forwards;
	animation-delay:7.5s;
}

.text p:nth-child(9) {
	opacity:0;
    animation: type 1s steps(40, end);
    animation-fill-mode: forwards;
	animation-delay:8.5s;
}

.text p:nth-child(10) {
	opacity:0;
    animation: type 1s steps(40, end);
    animation-fill-mode: forwards;
	animation-delay:9.5s;
}

.text p:nth-child(11) {
	opacity:0;
    animation: type 1s steps(40, end);
    animation-fill-mode: forwards;
	animation-delay:10.5s;
}

.text p:nth-child(12) {
	opacity:0;
    animation: type 1s steps(40, end);
    animation-fill-mode: forwards;
	animation-delay:11.5s;
}

.text p:nth-child(13) {
	opacity:0;
    animation: type 1s steps(40, end);
    animation-fill-mode: forwards;
	animation-delay:12.5s;
}

.text p:nth-child(14) {
	opacity:0;
    animation: type 1s steps(40, end);
    animation-fill-mode: forwards;
	animation-delay:13.5s;
}

@keyframes type {
	0% {width: 0;}
	1%{opacity:1;}
	100%{opacity:1;}
}

/*return to beginning text button*/
.menu {
	text-align:justify;
	font-size: 12px;
	color: white;
	font-family: 'courier new';
	opacity:50%;
	background-color: none;
	position:fixed;
	right: 10px;
	bottom: 0px;
	padding:20px;
	cursor: pointer;
}

.sound {
	text-align:justify;
	font-size: 12px;
	color: white;
	font-family: 'courier new';
	opacity:50%;
	background-color: none;
	position:fixed;
	left: 10px;
	bottom: 0px;
	padding:20px;
	cursor: pointer;

}

.menu:hover{
	opacity:100%;
}

.sound:hover{
	opacity:100%;
}

/*make a choice text button*/
.textOption {
	font-weight: bold;
	text-indent: 15px;
	cursor: pointer;
}

.textOption:hover {
	color:white;
}


/*BUTTONS IN ENVIRONMENT TO INTERACT WITH*/

.textButton {
	background-color: none;
	text-align:center;
	color:black;
	font-size:120%;
	padding: .5% 1%;
	cursor: pointer;
	opacity:50%;
}

.textButton:hover {
	color:white;
}


/*act I scene I*/
#station {
	position: absolute;
	left: 38%;
	top: 40%;
}

#Mara {
	position: absolute;
	left: 68%;
	top: 63%;
}

#sky {
	position: absolute;
	left: 88.5%;
	top: 51%;
}

#lights {
	position: absolute;
	left: 37%;
	top: 23%;
}

#gas {
	position: absolute;
	left: 77%;
	top: 39.5%;
}

#building {
	position: absolute;
	left: 1.5%;
	top: 17%;
}

#entrance {
	position: absolute;
	left: 15%;
	top: 50%;
}


/*act I scene II*/
#counter {
	position: absolute;
	left: 23%;
	top: 91%;
}

#bell {
	position: absolute;
	left: 25%;
	top: 35%;
}

#television {
	position: absolute;
	left: 14%;
	top: 19%;
}

#Mara2 {
	position: absolute;
	left: 50%;
	top: 70%;
}

#lights2 {
	position: absolute;
	left: 80%;
	top: 11%;
}

#bathroom {
	position: absolute;
	left: 38.5%;
	top: 25%;
}


/*act I scene III*/
#lights3 {
	position: absolute;
	left: 83.5%;
	top: 34.5%;
}

#Mara3 {
	position: absolute;
	left: 61%;
	top: 74%;
}

#wall{
	position: absolute;
	left: 70%;
	top: 40%;
}

#reflection {
	position: absolute;
	left: 12%;
	top: 19%;
}

#faucet {
	position: absolute;
	left: 2%;
	top: 57%;
}

#poster {
	position: absolute;
	left: 79%;
	top: 25%;
}

#door {
	position: absolute;
	left: 92%;
	top: 32%;
}


/*act II scene I*/
#television2 {
	position: absolute;
	left: 74.5%;
	top: 12%;
}

#chips {
	position: absolute;
	left: 70%;
	top: 43%;
}

#Mara4{
	position: absolute;
	left:46%;
	top: 80%;
}

#drinks {
	position: absolute;
	left: 5%;
	top: 16%;
}

#missingPoster {
	position: absolute;
	left: 26%;
	top: 47%;
}

#windows {
	position: absolute;
	left: 42.5%;
	top: 41%;
}

#backDoor {
	position: absolute;
	left: 59%;
	top: 21%;
}

/*act II scene II*/
#stranger {
	position: absolute;
	left: 5%;
	top: 45%;
}

#Mara5 {
	position: absolute;
	left: 62%;
	top: 75%;
}

#graffiti{
	position: absolute;
	left: 10%;
	top: 25%;
}

#sky2 {
	position: absolute;
	left: 92%;
	top: 33%;
}

#backDoor2 {
	position: absolute;
	left: 26.5%;
	top: 40%;
}

/*act III scene I*/
#television3 {
	position: absolute;
	left: 30%;
	top: 35%;
}

#Mara6 {
	position: absolute;
	left: 65%;
	top: 80%;
}

#candy{
	position: absolute;
	left:35%;
	top: 90%;
}

#wall2 {
	position: absolute;
	left: 13%;
	top: 10%;
}

#flyer {
	position: absolute;
	left: 55%;
	top: 17%;
}

#cup {
	position: absolute;
	left: 2%;
	top: 70%;
}

#employeesOnly {
	position: absolute;
	left: 64%;
	top: 20%;
}

/*act III scene II*/
#hallway {
	position: absolute;
	left: 30%;
	top: 5%;
}

#Mara7 {
	position: absolute;
	left: 18%;
	top: 42%;
}

#office{
	position: absolute;
	left: 38%;
	top: 50%;
}

#phone {
	position: absolute;
	left: 48%;
	top: 38%;
}

#storage {
	position: absolute;
	left: 78%;
	top: 50%;
}

#exit {
	position: absolute;
	left: 57%;
	top: 34%;
}

/*act IV scene I*/
#mice {
	position: absolute;
	left: 80%;
	top: 85%;
}

#flowers {
	position: absolute;
	left: 17%;
	top: 67%;
}

#sky3{
	position: absolute;
	left: 5%;
	top: 10%;
}

#building3{
	position: absolute;
	left: 95%;
	top: 30%;
}

#Mara8 {
	position: absolute;
	left: 65%;
	top: 52%;
}

#corner {
	position: absolute;
	left: 20%;
	top: 53%;
}

/*act IV scene II*/
#missing {
	position: absolute;
	left: 5%;
	top: 45%;
}

#Mara9 {
	position: absolute;
	left: 62%;
	top: 75%;
}

#sky4{
	position: absolute;
	left: 92%;
	top: 33%;
}

#graffiti2 {
	position: absolute;
	left: 10%;
	top: 25%;
}

#building2 {
	position: absolute;
	left: 50%;
	top: 5%;
}

#backDoor3 {
	position: absolute;
	left: 26.5%;
	top: 40%;
}

/*act V scene I*/
#outsideEnd1 {
	position: absolute;
	left: 2%;
	top: 5%;
}

#employeesEnd1 {
	position: absolute;
	left: 64%;
	top: 20%;
}

#bathroomEnd1{
	position: absolute;
	left: 79%;
	top: 24%;
}

#outBackEnd1 {
	position: absolute;
	left: 20%;
	top: 53%;
}

#dockEnd1 {
	position: absolute;
	left: 57%;
	top: 34%;
}

#outsideBathroomEnd1 {
	position: absolute;
	left: 92%;
	top: 32%;
}

#outsideEnd3 {
	position: absolute;
	left: 95%;
	top: 21%;
}

#outBackEnd2 {
	position: absolute;
	left: 59%;
	top: 21%;
}

#outsideEnd4 {
	position: absolute;
	left: 2%;
	top: 4%;
}

#insideBack2 {
	position: absolute;
	left: 26.5%;
	top: 40%;
}

#car {
	position: absolute;
	left: 41%;
	top: 42%;
}

/*Dial a number*/
.button {
  background-color: transparent;
  border: 1px solid white;
  padding: none;
  text-align: center;
  text-decoration: none;
  display: inline-block;
	color: white;
	font-family: 'courier new';
  font-size: 14px;
	cursor: pointer;
	position: absolute;
	left:54%;
	top: 20%;
}

input[type=text] {
	border: 1px solid white;
	background-color:black;
	color: white;
	font-family: 'courier new';
	font-size: 14px;
	position: absolute;
	left:40.5%;
	top: 20%;
	width:150px;
}