@import url('https://fonts.googleapis.com/css2?family=Benne&family=Nixie+One&family=Source+Sans+Pro:ital,wght@0,400;0,600;1,400;1,600&family=Zilla+Slab+Highlight&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200&display=swap');

body {
  background-color: #dcdcdc;
}

em {
  color: #26c1ff;
}

strong {
  color: #00d8aa;
}

/*-- Title Screen --*/

#startButton {
  position: absolute;
  left: 488px;
  top: 296px;
}

#aboutButton {
  position: absolute;
  left: 488px;
  top: 352px;
}
#backButton {
  position: absolute;
  left: 95px;
  bottom: 100px;
}

.buttonStyle {
  font-family: 'Inter';
  font-size: 20px;
  text-decoration: none;
  text-align: center;
  color: #4f5252;
  text-transform: uppercase;
}

#startButton:hover, #aboutButton:hover, #backButton:hover {
  text-decoration: line-through;
  cursor: pointer;
}

#startButton:visited, #aboutButton:visited, #backButton:visited {
  color: #2b3132;
}

#abtWrapper {
  position: absolute;
  width: 475px;
  height: 300px;
  left: 95px;
  top: 250px;
}

#abtDesc {
  position: relative;
  font-family: 'Inter';
  font-size: 20px;
  color: #4f5252;
}


/*-- Chapter Titles --*/

#chTitle {
  position: absolute;
  font-family: 'Benne';
  font-size: 60px;
  color: #658178;
  top: 200px;
  left: 200px;
  z-index: 65;
}

#chLoading {
  position: absolute;
  width: 200px;
  height: 200px;
  top: 260px;
  left: 240px;
  z-index: 50;
  filter: grayscale();
}

#titleBox {
  position: absolute;
  width: 400px;
  height: 150px;
  top: 240px;
  left: 150px;
  background-color: rgba(255,255,255,0.4);
  box-shadow: 5px 10px #7f7f7f;
}

.chCloudPR {
  filter: hue-rotate(300deg);
}

.chCloud1 {
  filter: hue-rotate(120deg);
}

.chCloud2 {
  filter: hue-rotate(200deg);
}

.chCloud3 {
  filter: hue-rotate(250deg);
}

.chCloudEP {
  filter: hue-rotate(40deg);
}

#titleButterfly {
  position: absolute;
  top: 150px;
  left: 50px;
  filter: grayscale();
}

/*-- User Interface --*/

#stage {
  margin: auto;
  position: relative;
  width: 1200px;
  height: 600px;
  background-color: #000;
  box-shadow: 0px 0px 10px #616161;
  overflow: hidden;
}

#txtBox {
  position: absolute;
  width: 1000px;
  height: 150px;
  background-color: rgba(0, 0, 0, 0.6);
  border: 5px solid #d8aa00;
  border-radius: 4px;
  left: 100px;
  bottom: 20px;
  cursor: pointer;
  z-index: 10;
}

#nameBox {
  position: absolute;
  width: 250px;
  height: 30px;
  color: #242424;
  background-color: #d8aa00;
  border-radius: 0px 0px 4px 0px;
  left: 100px;
  bottom: 140px;
  font-family: 'Source Sans Pro';
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  padding: 6px 0 0 0;
  z-index: 10;
}

#txtSpeech {
  position: absolute;
  font-family: 'Source Sans Pro';
  font-size: 20px;
  letter-spacing: 0.1em;
  text-align: left;
  color: #dcdcdc;
  width: 75%;
  margin-left: 150px;
  margin-top: 475px;
  user-select: none;
  cursor: pointer;
  z-index: 10;
}

#btnWrapper {
  position: absolute;
  left: 200px;
  bottom: 50px;
  z-index: 15;
}

#btnChoices li {
  float: left;
  list-style: none;
  font-family: 'Inter';
  font-size: 15px;
  text-align: center;
  color: #fefefe;
  border: 1px #fefefe solid;
  margin-right: 30px;
  width: 150px;
  line-height: 30px;
  cursor: pointer;
  text-transform: uppercase;
}

#branch {
  position: absolute;
  width: 400px;
  height: 300px;
  right: 440px;
  bottom: -40px;
  opacity: 0.7;
  z-index: 15;
}

.optionStyle {
  font-family: 'Inter';
  font-size: 20px;
  color: #fefefe;
  text-transform: uppercase;
  cursor: pointer;
  z-index: 15;
  text-align: left;
  width: 200px;
  right: 235px;
}

#option1 {
  position: absolute;
  bottom: 84px;
}

#option2 {
  position: absolute;
  bottom: 34px;
}

#option1:hover, #option2:hover, li:hover {
  text-decoration: line-through;
}

#bar-outer {
	width: 700px;
	height: 10px;
	border: 1px solid black;
	position: absolute;
  left: 150px;
  bottom: 80px;
  z-index: 15;
}

#bar-inner {
	position: absolute;
	top: 0;
	left: 0;
	width: 700px;
	height: 10px;
	background-color: #d8aa00;
}

#quiz {
  position: absolute;
  width: 700px;
  height: 400px;
  left: 260px;
  top: 10px;
}

#diaChoiceQ {
  position: absolute;
  width: 800px;
  height: 20px;
  left: 200px;
  bottom: 120px;
  z-index: 15;
}

#diaChoice1 {
  position: absolute;
  width: 600px;
  height: 15px;
  left: 275px;
  bottom: 70px;
  z-index: 15;
}

#diaChoice2 {
  position: absolute;
  width: 600px;
  height: 15px;
  left: 275px;
  bottom: 40px;
  z-index: 15;
}

#diaChoice1:hover, #diaChoice2:hover {
  text-decoration: underline;
  cursor: pointer;
}

.diaChoiceStyle {
  font-family: 'Inter';
  font-size: 17px;
  color: #fefefe;
  text-align: center;
}

.diaQStyle {
  font-family: 'Inter';
  font-size: 20px;
  color: #fefefe;
  text-align: center;
}

hr {
  position: absolute;
  width: 60%;
  left: 225px;
  bottom: 95px;
  z-index: 15;
}

#ominousNotice {
  position: absolute;
  width: 20%;
  height: 20px;
  background-color: rgba(81,91,68,0.8);
  right: 0;
  padding: 5px;
  border-radius: 0px 0px 0px 4px;
  z-index: 15;
}

.ominousStyle {
  font-family: 'Inter';
  font-size: 15px;
  color: #e5e5e5;
  font-weight: 600;
  font-style: italic;
  text-align: center;
}

/*-- Sprites --*/

#spriteOlivia, #spriteOliviaAngry, #spriteOliviaAwk, #spriteOliviaHappy, #spriteOliviaStar, #spriteTeacher {
  position: absolute;
  width: 300px;
  height: 368px;
  left: 100px;
  top: 52px;
  z-index: 50;
}

#spriteDad, #spriteDadNervous, #spriteDadStar, #spriteCeleste, #spriteCelesteHappy, #spriteCelesteStar, #spriteCelesteAngry, #spriteTania, #spriteClassmate {
  position: absolute;
  width: 300px;
  height: 368px;
  right: 100px;
  top: 52px;
  z-index: 50;
}

#spriteButterfly {
  position: absolute;
  width: 300px;
  height: 168px;
  right: 10px;
  bottom: 200px;
}

#spriteButterfly2 {
  position: absolute;
  width: 150px;
  height: 150px;
  left: 450px;
  top: 30px;
}

#spriteButterfly3 {
  position: absolute;
  width: 70px;
  height: 70px;
  top: 150px;
  right: 420px;
}

#spriteButterfly4 {
  position: absolute;
  width: 150px;
  height: 110px;
  left: 2px;
  top: 240px;
}

/*-- Examinable Objects --*/

.examineObject {
  position: absolute;
  background-color: #ff6426;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  cursor: pointer;
  z-index: 2;
}

.examineObject:hover {
  opacity: 0.5;
}

#object_Tutorial {
  position: absolute;
  left: 555px;
  top: 145px;
  z-index: 5;
}

#object_Bush {
  left: 240px;
  top: 310px;
}

#object_PC {
  left: 110px;
  top: 260px;
}

#computer {
  position: absolute;
  width: 850px;
  height: 425px;
  margin-top: -6px;
  left: 180px;
  z-index: 900;
}

#object_Calendar {
  right: 380px;
  top: 230px;
}

#calendar {
  position: absolute;
  margin-top: -6px;
  left: 300px;
  z-index: 900;
}

#object_Bed {
  right: 300px;
  top: 310px;
}

#phoneMap {
  position: absolute;
  width: 300px;
  height: 558px;
  left: 420px;
  top: -50px;
}

#object_Vending {
  top: 315px;
  left: 430px;
}

#drink1 {
  position: absolute;
  width: 70px;
  height: 340px;
  right: 340px;
  cursor: pointer;
}

#drink2 {
  position: absolute;
  width: 70px;
  height: 340px;
  right: 250px;
  cursor: pointer;
}

#treeStump {
  position: absolute;
  left: 20px;
  bottom: 5px;
  cursor: pointer;
}

#wood1 {
  position: absolute;
  left: 200px;
  bottom: 5px;
}

#wood2 {
  position: absolute;
  right: 350px;
  bottom: 30px;
  width: 100px;
  height: 83px;
}

#wood3 {
  position: absolute;
  right: 395px;
  top: 420px;
  width: 80px;
  height: 30px;
}

#woodStack {
  position: absolute;
  right: 5px;
  bottom: 2px;
  width: 170px;
  height: 203px;
}

#object_Outside {
  position: absolute;
  top: 250px;
  right: 380px;
}

#object_Lift {
  position: absolute;
  top: 330px;
  right: 500px;
}

/*-- Misc. --*/

#bgFade {
  position: absolute;
  background-color: #000;
  width: 1200px;
  height: 600px;
  opacity: 0.5;
}

#tutorialCat {
  position: absolute;
  left: 450px;
  top: 50px;
  z-index: 2;
}

#fastForwardBG {
  position: absolute;
  background-image: url('img/bg/fastForwardBG.png');
  width: 1200px;
  height: 600px;
}

#fastForwardBG2 {
  position: absolute;
  background-image: url('img/bg/fastForwardBG2.png');
  width: 1200px;
  height: 600px;
}

#fastForwardBG3 {
  position: absolute;
  background-image: url('img/bg/fastForwardBG3.png');
  width: 1200px;
  height: 600px;
}



.prologueBGStyle {
  border-radius: 50%;
  filter: grayscale(100%);
  width: 1200px;
  height: 600px;
}

#prologueCarnivalBG {
  position: absolute;
  background-image: url('img/bg/carnivalBG.png');
}

#prologueSkiBG {
  position: absolute;
  background-image: url('img/bg/skiLodgeBG.png');
}

#prologueGradBG {
  position: absolute;
  background-image: url('img/bg/graduationBG.png');
}

#runBtn {
  position: absolute;
  width: 130px;
  height: 130px;
  right: 180px;
  bottom: 35px;
  z-index: 15;
}

#playerMaze {
  position: absolute;
  left: 610px;
  top: 20px;
  width: 8px;
  height: 8px;
  z-index: 15;
}

#normalExit {
  position: absolute;
  left: 575px;
  bottom: 20px;
  width: 50px;
  height: 40px;
}

#easyExit {
  position: absolute;
  right: 150px;
  top: 170px;
  width: 50px;
  height: 50px;
  background-color: #e43d39;
  border-radius: 50%;
}

#normalExit_Two {
  position: absolute;
  left: 520px;
  bottom: 20px;
  width: 50px;
  height: 40px;
}

#easyExit_Two {
  position: absolute;
  left: 170px;
  top: 80px;
  width: 35px;
  height: 35px;
  background-color: #398be4;
  border-radius: 50%;
}

/*-- Drag and Drop --*/

.draggable {
  position: absolute;
  width: 100px;
  height: 100px;
  z-index: 999;
}

#toothbrush {
  left: 450px;
  top: 320px;
  transform: rotate(55deg);
}

#clothes {
  left: 550px;
  top: 320px;
}

#laptop {
  right: 275px;
  top: 165px;
  width: 150px;
  height: 150px;
}

#diary {
  right: 5px;
  bottom: 150px;
}

#bag {
  position: absolute;
  right: 200px;
  bottom: 5px;
  width: 250px;
  height: 250px;
  z-index: 998;
}