/*==================================================
 * STORT TEMPLATE 0
 * ===============================================*/
#story_wrap0 {
position:absolute;
top:0;
left:0;
width:100%;
display:none;
}

#story_container0 {
position:absolute;
top:20px;
left:50vw;
margin-left:-450px;
width:900px;
height:600px;

}

#story_screen0 {
position:absolute;
background-color: #000;
top:32px;
left:62px;
width:770px;
height:330px;
z-index:222;
border: 2px solid #e686a1;
opacity:0;
}

.story0_screen_fadein {
animation:A_story0_screen_fadein 1s ease 1;
animation-fill-mode:forwards;
}

@keyframes A_story0_screen_fadein {
to {
    opacity:1;
    }
}

/* #e686a1 good pink #c0463b */

#story_cover_bground0 {
position:absolute;
background-color: #323232;
width:900px;
height:700px;
z-index:222;
}

#story_cover_shadow0{
position:absolute;
width:900px;
height:700px;
box-shadow:inset 0px 0px 20px 0px rgba(0,0,0,1);
z-index:444;

}

#scanlines_story {
	position:absolute;
	top:0px;
	margin: 0;
	width:900px;
	height:700px;
  background: linear-gradient(#444 50%, #000 50%);
  background-size: 100% 4px;
  background-repeat: repeat-y;
  opacity: .14;
  box-shadow : inset 0px 0px 1px 1px rgba(0, 0, 0, .8);
  animation: pulse 5s linear infinite;
  z-index: 1666;
}

#spr_char_container0 {
  position:absolute;
  left:35px;
  top:400px;
  width:210px;
  height:250px;
  opacity:0;
  z-index: 222;
}

.spr_char_container_fadein {
animation:A_spr_char_container_fadein 1s ease 1;
animation-fill-mode:forwards;
}

@keyframes A_spr_char_container_fadein {
to {
    transform:translateX(30px);
    opacity:1;
    }
}


#spr_char_box0 {
position:absolute;
left:0px;
top:0px;
width:190px;
height:200px;
z-index:555;
}

#spr_text_container0 {
position:absolute;
left:330px;
top:400px;
z-index:222;
opacity:0;
}

.spr_text_container_fadein {
animation:A_spr_text_container_fadein 1s ease 1;
animation-fill-mode:forwards;
}

@keyframes A_spr_text_container_fadein {
to {
    transform:translateX(-30px);
    opacity:1;
    }
}

#spr_text_box0 {
position:absolute;
left:0px;
top:0px;
width:530px;
height:160px;
background-color:#000;
border: 2px solid #9e9fd4;
color:#fff;
font-size: 16px;
font-family: 'Overpass Mono', monospace;
}

#spr_text0 {
padding:6px;
}

.greentext {
color:#00ff00;
}

.typebot-blinker {
animation: A_cursorblink .5s infinite;
display:none;
}
  
  @keyframes A_cursorblink {
      0% {
        color: transparent;
      }
      50% {
        color: white;
      }
      100% {
        color: transparent;
      }
    }
  

#story_enter_prompt {
  position:absolute;
  left:50vw;
  top:626px;
  margin-left:344px;
  width: 105px;
  height: 45px;
  background: url('../../img/sprite/keyboard_sheet.png') no-repeat -594px -347px;
  animation: A_press_enter 2s infinite steps(2);
  box-shadow:
  0 0 10px #fff,
  0 0 20px #fff,
  0 0 10px #fff,
  0 0 40px #fff,
  0 0 70px #fff;
  z-index:666;
  display:none;
  }
  
  #story0_cover_shadow{
    position:absolute;
    width:900px;
    height:700px;
    box-shadow:inset 0px 0px 20px 0px rgba(0,0,0,1);
    z-index:444;
    
    }

#spr_HUD0 {
position:absolute;
left:300px;
top:605px;
width:530px;
height:60px;
background-color:#000;
border: 2px solid #fff;
overflow:hidden;
z-index:222;
opacity:0;
}

.spr_HUD_container_fadein {
animation:A_spr_HUD_container_fadein 1s ease 1;
animation-fill-mode:forwards;
}

@keyframes A_spr_HUD_container_fadein {
to {
    transform:translateY(-30px);
    opacity:1;
    }
}

.spr_HUD_bg {
position:absolute;
font-family: 'Courier New', monospace;
font-size: 14px;
color:#fff;
left:33%;
animation: A_spr_hud_bg 30s ease infinite;
opacity: 0;
}

@keyframes A_spr_hud_bg {
  from {
    transform: translateY(270px);
    opacity: 0;


  }
  to {
    transform: translateY(-270px);
    opacity: .8;

  }
}



.spr_HUD_bg:nth-child(1){
	left:89%;
	animation-delay: 0s;
}

.spr_HUD_bg:nth-child(2){
	left:10%;
	animation-delay: 8.5s;
}

.spr_HUD_bg:nth-child(3){
	left:77%;
	animation-delay: 4s;
}

.spr_HUD_bg:nth-child(4){
	left:23%;
	animation-delay: 2s;
}

.spr_HUD_bg:nth-child(5){
	left:28%;
	animation-delay: 5s;
}

.spr_HUD_bg:nth-child(6){
	left:36%;
	animation-delay: 11s;
}

.spr_HUD_bg:nth-child(7){
	left:42%;
	animation-delay: 1.3s;
}

.spr_HUD_bg:nth-child(8){
	left:55%;
	animation-delay: 7.5s;
}

.spr_HUD_bg:nth-child(9){
	left:60%;
	animation-delay: 4s;
}

.spr_HUD_bg:nth-child(10){
	left:76%;
	animation-delay: 7s;
}

.spr_HUD_bg:nth-child(11){
	left:90%;
	animation-delay: 10s;
}



/*==================================================
 * MECHANICS STYLING
 * ===============================================*/

.story0_window {
position:absolute;
z-index:888;
font-family: 'Josefin Slab', serif;
color:#fff;
font-size: 24px;
border: 10px ridge #355f91;
margin-bottom: 1px;
background: linear-gradient(53deg, #246655, #662466);
background-size: 400% 400%;
-webkit-animation: A_bg_window 20s ease infinite;
-moz-animation: A_bg_window 20s ease infinite;
animation: A_bg_window 20s ease infinite;
padding:10px;
-webkit-font-smoothing: antialiased;
}

.story0_window span::selection {
  background: #d2d174;
}

.story0_window span {
	/*padding-bottom: 3px;*/
}

.bg_story0 {

background-size:cover;


}

.letter_story0 {
font-family: 'Cutive Mono', serif;
letter-spacing:-4px;
font-size: 40px;
  	 /*content: '' attr(data-number) '';*/

}