@import url('https://fonts.googleapis.com/css2?family=Lato&family=Source+Code+Pro&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@300..700&family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Jacquard+12&family=Texturina:ital,opsz@0,12..72;1,12..72&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Jersey+10&display=swap');

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  align-items: center;
  background: #000000;
  /*background:rgb(5, 5, 5);*/
  /*background: #1d262f*/
}

#main-overlay{
  position: absolute;
  height: 80%;
  width: 80%;  
  top: 2vw;
  left: 10vw;
  border-radius: 0.75em;
  background-color: transparent;
  pointer-events: none;
  z-index: 100;
  /*border: 4px das
  hed #cdcdcd;
  border-radius: 25px;
  border: 25px solid transparent;
  border-image: url(images/panel-border-001.png) 30 stretch; */
}

.hidden {
  display: none;
}

#main-container{
  position: absolute;
  height: 80%;
  width: 80%;  
  top: 2vw;
  left: 10vw;
  border-radius: 0.75em;
  background-color: #000000;
  z-index: 10;
  /*border: 4px dashed #cdcdcd;
  border-radius: 25px;
  border: 25px solid transparent;
  border-image: url(images/panel-border-001.png) 30 stretch; */
}


#main-container:before {
  background: linear-gradient(
    45deg,
    transparent 5%,
    rgb(255, 215, 137) 50%,
    transparent 99%
  );
  border-radius: inherit;
  content: "";
  inset: 0px;
  opacity: 0;
  position: absolute;
  transition: opacity 400ms;
  z-index: 0;
}

#quest-box{
  position: absolute;
  min-height: 40%;
  width: 35%;  
  right: -18vw;
  top: 0vw;
  /*border-radius: 0.75em;*/
  border-color: 4px solid black;
  background-color: #996666;
  z-index: 10;
}

#quest-box h3{
  text-align: center;
  font-family: 'Texturina', sans-serif;
  color: goldenrod;
}

#quest-box p{
  margin: 0;
  padding: 0;
  font-family: "Texturina", system-ui;
  margin-bottom: 5px;
  font-size: 1.3vw;
}

#bot-land{
  position: relative;
  margin-top: 50px;
  
}

#choice-land{
  position: relative;
  margin-top: 45px;
}

h1 {
  position: relative;
  font-family: Lato, sans-serif;
  font-size: 6vw;
  font-weight: bold;
  padding-left: 12vw;
  overflow: hidden;
}

.code-font{
  font-family: 'VT323', sans-serif;
}

.lato-font{
  font-family: 'Lato', sans-serif;
}

.arial-font{
  font-family: 'Times New Roman', sans-serif;
}

.seer-font{
  font-family: 'Jersey 10', sans-serif
}

.italics{
  font-style: italic;
}

p {
  position: relative;
  font-size: 1.5vmax;
  padding-left: 5vw;
  padding-right: 1vw;
  overflow: hidden;
  color: #eeeeee;
}

#choice-land span a{
  color: #03DAC5;
  font-weight: normal;
  
}

#choice-land span a:hover{
  color: #BB86FC;
  font-weight: bold;
}

#bot-land span a{
  color: #FF7597;
  font-weight: normal;
  
}

#bot-land span a:hover{
  color: #3700B3;
  font-weight: bold;
}

#story-zone{
  position: absolute;
  top: 5vw;
  left: 25%;
  width: 50%;
  height: 80%;
  z-index: 10 !important;
}

#story-box{
    position: relative;
    display: block;
    padding-top: 25px;
    margin: 0 auto;
    -webkit-overflow-scrolling: touch;
    overflow: scroll;
    overflow-x: hidden;
    width: 100%;
    height: 65%;
    background: rgba(12, 14, 17, 0.85);
}

#story-box p{
  margin: 0;
  padding-left: 25px;
  padding-right: 25px;
  font-family: "Texturina", sans-serif;
  font-size: 1.3vw;
  font-weight: 400;
  font-style: normal;
  margin-bottom: 10px;
}

#char-actions{
  position: relative;
  min-height: 40%;
  margin: 0 0 15px 0;
  padding: 0;
}

#speaking-char{
  position: absolute;
  width: 20%; 
}

#char-response{
  position: relative;
  top: 0;
  left: 20%;
  width: 80%;
  min-height: 55%;
}

#char-response p{
  color: #03DAC5;
}

#story-box span a{
  color: #FF7597;
  font-weight: normal;
}

#story-box span a:hover{
  color: #3700B3;
  font-weight: bold;
}

#story-question-main{
  position: relative;
  margin-top: 5px;
  min-height: 35%;
  width: 100%;
  background-color: rgba(12, 14, 17, 0.85);
}

#story-question-main a{
  color: #CF6679;
  font-family: "Texturina", system-ui;
  font-weight: normal;
  font-size: 1.4vw;
  display: block;
  margin-bottom: 10px;
  text-decoration: none;
  cursor: pointer;
}

#story-question-main a:hover{
  font-weight: bold;
  color: #BB86FC;
}

.narrator{
  color: #eeeeee;
}

.story-you{
  color: #CF6679
}

#effectsContainer{
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0px;
  left: 0px;
  z-index: 2 !important;
}

canvas{
  width: 100%;
  height: 1500px;
  position: fixed;
  
}

#outerContainer{
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0px;
  left:0px;
  z-index: 99 !important;
}


.border-010{
  border: 20px solid transparent;
  border-image: url(images/panel-transparent-border-010-mod.png) 15 stretch;
}


.story-border{
  border: 12px solid transparent;
  border-image: url(images/panel-transparent-border-004.png) 8 stretch;  
}

.char-border{
  background-color: #000000;
  border: 22px solid transparent;
  border-image: url(images/panel-transparent-center-026-mod.png) 16 stretch;  
}

.scifi-border{
  border: 20px solid transparent;
  border-radius: 20px;
}


.town-bg{
  background-image: url(images/fw_game/middleground.png) !important;
  background-repeat: no-repeat;
  background-size: 100% auto;
}

.scifi-bg{
  background-image: url(images/fw_game/spaceship.png) !important;
  background-repeat: no-repeat;
  background-size: 100% auto;
}

.scifi-actions p{
    font-family: "Fira Code", sans-serif  !important;
    font-size: 1.25vw !important;
    font-weight: 500 !important;
}

.scifi-char-response p{
    font-family: "Lato", sans-serif !important;
}

#story-question-main.scifi-border a{
    font-family: "Fira Code", sans-serif  !important;
}

#story-box.scifi-border>p.word{
    font-family: "Fira Code", sans-serif  !important;
    font-size: 1.4vw !important;
    font-weight: 500 !important;
}

#cont_story{
  position: absolute;
  top: 1.5vw;
  left: 33%;
  font-family: "Texturina", sans-serif;
  color: #000000;
  font-weight: bold;
  text-transform: uppercase;
}

#outerContainer.scifi-bg > #cont_story{
  color: #ffffff !important;
}

.flash{
  color: #CF6679;
  font-family: "VT323", system-ui;
  font-weight: normal;
  font-size: 4vw;
}

.realalan{
  color: gold;
  font-style: italic;
  font-family: "VT323", system-ui;
  font-weight: normal;
  font-size: 1.5vw;
}

.happy{
  color: #7ED1F3;
}

.angry{
  color: darkred;
}

.purple{
  color: #BB86FC
}

/* Override for specific links */
.no-hover-link:hover {
  color: #CF6679 !important;
  font-weight: normal !important;
}