@font-face{
  src:url("../fonts/monofonto.otf");
  font-family:"monofonto";
}
@font-face{
  src:url("../fonts/sketchy.ttf");
  font-family:"sketchy";
}
@font-face{
  src:url("../fonts/space.ttf");
  font-family:"space";
}
@keyframes horizontal{
  0%{transform:translate(0,0);}
  6%{transform:translate(5px,0);}
  12%{transform:translate(0,0);}
  18%{transform:translate(5px,0);}
  24%{transform:translate(0,0);}
  30%{transform:translate(5px,0);}
  36%, 100%{transform:translate(0,0);}
}
@keyframes float{
	0%{transform: translateY(0);filter: drop-shadow(0 0 1rem #01296C);}
  50%{transform: translateY(-10px);filter: drop-shadow(0 0 1rem #0060B6);}
  100%{transform: translateY(0);filter: drop-shadow(0 0 1rem #01296C);}
}
.float{
  animation:float 5s ease-in-out infinite;
}
*{
  font-family:"monofonto";
  color:#f1f1f1;
}
body{
  background:#000;
  overflow:hidden;
  margin:0;
}
mark{
  background:none;
}
mark.inner{
  color:#6496C8;
}
mark.clue{
  color:#c05e3d;
}
mark.distant{
  color:#23FF1E;
}
/* HOME SCREEN */
#homeScreen{
  justify-content:center;
  flex-direction:column;
  align-items:center;
  background:#010101;
  transition:.5s;
  position:fixed;
  cursor:default;
  display:flex;
  color:050505;
  height:100%;
  z-index:70;
  width:100%;
  opacity:0;
}
#homeScreen #manualUrl, #homeScreen #creditsUrl{
  pointer-events:none;
  position:fixed;
  transition:1s;
  overflow:auto;
  margin:auto;
  width:100%;
  z-index:90;
  opacity:0;
  bottom:0;
  right:0;
  left:0;
  top:0;
}
#homeScreen #floatMask{
  height:50%;
  animation:float 5s ease-in-out infinite;
}
#homeScreen #flashScreen{
  background-color:#f1f1f1;
  pointer-events:none;
  position:fixed;
  transition:.1s;
  z-index:100;
  height:100%;
  width:100%;
  opacity:0;
}
#homeScreen .flash-img{
  pointer-events:none;
  position:fixed;
  opacity:0;
  left:0;
}
#homeScreen #title{
  font-family:space;
  font-size:5vw;
  margin:.5vw;
  opacity:0;
}
#homeScreen button{
  justify-content:center;
  border-radius:.5vw;
  align-items:center;
  background:#081939;
  transition:.1s;
  cursor:pointer;
  font-size:2vw;
  color:#f1f1f1;
  display:flex;
  height:2.5vw;
  margin:.25vw;
  border:none;
  width:15%;
}
#homeScreen button:hover{
  background:#2b64cf;
}
#homeScreen #manual{
  position:fixed;
  margin:2.5vw;
  z-index:100;
  left:0;
  top:0;
}
#homeScreen #credits{
  position:fixed;
  margin:2.5vw;
  z-index:100;
  right:0;
  top:0;
}
#homeScreen #continue{
  opacity:0;
}
#homeScreen #copyright{
  position:fixed;
  bottom:0;
}
/* BLACK SCREEN */
#blackScreen{
  pointer-events:none;
  background:#000;
  transition:.3s;
  position:fixed;
  height:100%;
  z-index:50;
  width:100%;
}
/* HUD */
#HUD{
  margin-top:-100%;
  position:fixed;
  transition:1s;
  display:block;
  width:100%;
  z-index:40;
}
#HUD #icons{
  border-bottom-right-radius:1.25vw 6.25vw;
  border-bottom-left-radius:1.25vw 6.25vw;
  grid-template-columns:1fr 1fr 1fr 1fr;
  background-color:rgba(21,21,21,.75);
  border:.25vw solid #f1f1f1;
  text-align:center;
  margin:0 auto;
  border-top:0;
  display:grid;
  height:6.5vw;
  width:33%;
}
#HUD #icons div{
  pointer-events:none;
}
#HUD #icons img{
  cursor:pointer;
  width:75%;
}
#HUD #mapWindow{
  border:.25vw solid #a5895d;
  background-color:#decfb7;
  border-radius:0 .5vw 0 0;
  flex-direction:column;
  font-family:"sketchy";
  text-align:center;
  position:fixed;
  cursor:default;
  border-left:0;
  transition:1s;
  font-size:2vw;
  color:#003264;
  padding:1vw;
  height:100%;
  left:-100%;
  width:15%;
}
#HUD #selectArea{
  border-radius:.5vw;
  transition:.25s;
  cursor:pointer;
  opacity:.5;
  width:75%;
}
#HUD #selectArea:hover{
  opacity:1;
}
#HUD #bagWindow{
  background-image:url("../img/denim.png");
  grid-template-columns:2fr 1fr;
  border-radius:.5vw .5vw 0 0;
  border:.25vw solid #312723;
  background-color:#6b3418;
  border-bottom:0;
  position:fixed;
  margin:0 12.5%;
  transition:1s;
  grid-gap:2.5%;
  padding:.5vw;
  display:grid;
  bottom:-100%;
  z-index:40;
  height:30%;
  width:75%;
}
#HUD #items{
  background-image:url("../img/denim.png");
  grid-template-columns:repeat(8, 1fr);
  grid-template-rows:repeat(2, 1fr);
  background-color:#261106;
  border-radius:.25vw;
  align-items:center;
  text-align:center;
  padding:.25vw;
  display:grid;
}
#HUD .item{
  cursor:pointer;
  width:100%;
}
#HUD #description{
  background-image:url("../img/denim.png");
  background-color:#261106;
  justify-content:center;
  border-radius:.25vw;
  align-items:center;
  text-align:center;
}
#HUD #description img{
  margin:10px 0 0;
  cursor:default;
  width:auto;
}
#HUD #description p{
  cursor:default;
  font-size:2vw;
  color:#f1f1f1;
  margin:0;
}
#HUD #phoneWindow{
  background-image:url("../img/phone.png");
  border-radius:.5vw .5vw .5vw .5vw;
  background-repeat:no-repeat;
  border:.25vw solid #312723;
  background-size:contain;
  text-align:center;
  padding-top:25%; /* (img-height / img-width) * width */
  position:fixed;
  transition:1s;
  right:-100%;
  z-index:40;
  width:15%;
  height:0;
}
#HUD #screen{
  margin-top:-100%;
}
#HUD #screen a{
  font-size:1.75vw;
  transition:.25s;
  cursor:pointer;
  display:block;
  color:black;
}
#HUD #screen a:hover{
  color:white;
}
/* DIALOG */
#dialog{
  pointer-events:none;
  position:fixed;
  bottom:.5vw;
  z-index:60;
  width:100%;
}
#dialog .vue{
  grid-template-columns:1fr 2fr 1fr;
  align-items:end;
  display:grid;
}
#dialog #dialogBox{
  opacity:0;
}
#dialog #dialogName{
  border-radius:.25vw .25vw 0 0;
  background:rgba(21,21,21,.75);
  border:.25vw solid #f1f1f1;
  border-width:.25vw .25vw 0;
  text-align:center;
  border-bottom:0;
  font-size:2.5vw;
  padding:0 .25vw;
  cursor:default;
  display:block;
  color:#f1f1f1;
  width:25%;
}
#dialog #dialogText{
  border-radius:0 .5vw .5vw .5vw;
  background:rgba(21,21,21,.75);
  border:.25vw solid #f1f1f1;
  transition:2s;
  max-width:97%;
  min-width:97%;
  height:12.5vw;
  color:#f1f1f1;
  padding:.5vw;
}
#dialog #dialogSentence{
  font-size:1.5vw;
  cursor:default;
  height:66%;
}
#dialog #nextButton{
  animation:horizontal 2s ease infinite;
  text-align:right;
  cursor:pointer;
  font-size:5vw;
  display:block;
}
#dialog #buttonBoxLeft,#dialog #buttonBoxRight{
  flex-direction:column;
  position:relative;
  transition:.5s;
  display:flex;
}
#dialog #buttonBoxLeft{
  padding:0 .5vw 0 0;
  left:-100%;
}
#dialog #buttonBoxRight{
  padding:0 0 0 .5vw;
  right:-100%;
}
#dialog .choice{
  background:rgba(21,21,21,.75);
  border:.25vw solid #f1f1f1;
  white-space:nowrap;
  margin:.5vw auto 0;
  text-align:left;
  font-size:1.5vw;
  transition:.2s;
  cursor:pointer;
  color:#f1f1f1;
  height:5vw;
  width:100%;
}
#dialog .choice:hover{
  background:rgba(21,21,21,1);
  border:.25vw solid #f9f5a8;
  color:#FFFA96;
}
#dialog .choice.left{
  border-radius:0 .5vw .5vw 0;
  border-left:none;
}
#dialog .choice.right{
  border-radius:.5vw 0 0 .5vw;
  border-right:none;
}
/* MASK */
#mask{
  pointer-events:none;
  transition:.45s;
  position:fixed;
  height:100%;
  z-index:30;
  width:100%;
  opacity:0;
}
#mask img{
  height:100%;
  width:100%;
}
/* SCENERY */
#scenery{
  opacity:0;
}
#scenery #blackScreen02{
  pointer-events:none;
  background:#000;
  transition:.5s;
  position:fixed;
  height:100%;
  z-index:21;
  width:100%;
  opacity:0;
}
#scenery img{
  position:fixed;
  overflow:auto;
  margin:auto;
  width:100%;
  z-index:20;

  bottom:0;
  right:0;
  left:0;
  top:0;
}
/* CHARACTER */
#character *{
  z-index:10;
}
#character #characterBox{
  justify-content:center;
  display:flex;
  margin:0 25%;
  width:50%;
}
#character img{
  transition:opacity .5s, transform 1s;
  pointer-events:none;
  position:fixed;
  cursor:pointer;
  height:100%;
  bottom:-15%;
  opacity:0;
}
/* AREA */
#area{
  transition:.5s;
  z-index:0;
}
#area #blackScreen03{
  pointer-events:none;
  background:#000;
  transition:.5s;
  position:fixed;
  height:100%;
  width:100%;
  z-index:1;
  opacity:0;
}
#area img{
  position:fixed;
  overflow:auto;
  margin:auto;
  width:100%;
  z-index:0;
  bottom:0;
  right:0;
  left:0;
  top:0;
}