@font-face {
    font-family: sinistre;
    src: url(fonts/Sinistre-StCaroline.woff),
    url(fonts/Sinistre-StCaroline.otf);
}
@font-face {
    font-family: jolybolditalic;
    src: url(fonts/JolyDisplay-BoldDisplayItalic.woff),
    url(fonts/JolyDisplay-BoldDisplayItalic.otf);
}

@font-face {
    font-family: jolyregularitalic;
    src: url(fonts/JolyDisplay-RegularDisplayItalic.woff),
    url(fonts/JolyDisplay-RegularDisplayItalic.otf);
}
@font-face {
    font-family: jolyregular;
    src: url(fonts/JolyDisplay-RegularDisplay.woff),
    url(fonts/JolyDisplay-RegularDisplay.otf);
}

@font-face {
    font-family: jolyheavyitalic;
    src: url(fonts/JolyDisplay-HeavyDisplayItalic.woff),
    url(fonts/JolyDisplay-HeavyDisplayItalic.otf);
}

/*light violet:#d166ff/ violet:#c94dff */

body{
    font-size: 1.5vw; 
    padding-left: 5.5%;
    padding-right: 5.5%;
    padding-top: 2.5%;
    padding-bottom: 4%;
    margin:auto;
    font-family: jolyregular;
    max-width: 100%;
    max-height: 100%;
}

.back{
    position: fixed;
    color:#c94dff ;
    text-align: center;
    font-family: jolyregular;
    background-color: white;
    top:40%;
    bottom:43%;
    left:35%;
    right:35%;
    border: 1px solid #c94dff;
    -webkit-box-shadow: 10px 10px 0px 0px #c94dff;
    -moz-box-shadow: 10px 10px 0px 0px #c94dff;
    box-shadow: 10px 10px 0px 0px #c94dff;
    font-size: 0.95em;
    padding-top: 1.5em;
    z-index: 200;
    line-height: 1.5em; 
}
.button_back{
    font-size: 0.95em;
    -webkit-appearance: none;
  background-color:transparent;
    border: 1px #c94dff solid;
    border-radius: 25em;
    color:#c94dff;
    cursor:pointer;
    font-family: jolybolditalic;     
    padding-bottom:3px;

}
.button_back:hover{
    border: 0.1em transparent solid;
    -webkit-box-shadow: 0px 0px 8px 1px  #c94dff;
    -moz-box-shadow: 0px 0px 8px 1px  #c94dff;
    box-shadow: 0px 0px 8px 1px  #c94dff;
}
::-moz-selection { /* Code for Firefox */   
    color: #c94dff;
    background-color: white;

  }
::selection {
    color: #c94dff;
    background-color: white;

  }

#info_text::-moz-selection { /* Code for Firefox */   
    background-color: white;
    color:black;
  }
#info_text::selection {
    background-color: white;
    color:black;
  }
img.inText{
    height:3vw;
}
#info_button{
    top: 4.5%;
    left:8.5%;
    position: fixed;
    font-size: 4vw;
    color:#c94dff ;
    z-index: 5;
    cursor: pointer;
}

.blur_background {
    filter: blur(2px);
}

#info_text{
    position: fixed;
    color:#c94dff ;
    font-family: jolyregular;
    background-color: white;
    bottom:7%;
    right:4%;
    left:30%;
    border:1px #c94dff solid;
    border-radius: 10px;
    z-index: 0;
    font-size: 22px;
    line-height: 22px;
    padding: 20px;
    z-index: 1;

}
#info_text:after {
    content: '';
    position: absolute;
    display: block;
    width: 0;
    z-index: 1;
    border-style: solid;
    border-color: #ffffff transparent;
    border-width: 20px 15px 0;
    bottom: -20px;
    left: 90%;
    margin-left: -15px;
}
#info_text:before {
    content: '';
    position: absolute;
    width: 0;
    z-index: 0;
    border-style: solid;
    border-color: #c94dff transparent;
    border-width: 21px 16px 0;
    bottom: -21.5px;
    left: 90%;
    margin-left: -16px;
    display: block;
}
a {
    color:#c94dff ;  
}
.title{
    font-family: jolybolditalic; 
}

.mid_text{
    font-size: 3.2vw; 
    margin-top: 30px;
    margin-bottom: 30px;
}
.block1{
    margin-left: 50px;
}
/*
.blur {
    filter: blur(32px);
}*/

.amanda_intro {
    position: fixed;
    background-color: white;
    color: #000000;
    font-family: sinistre;
    font-size: 20px;
    text-align: center;
    width: 500px;
    height: 220px;
    left:30%;
    top:10%;
    border-radius: 10px;
    padding: 20px;
    border: #000000 solid 1px;
    z-index: 10;
    cursor: pointer;
}
.amanda_intro:after {
    content: '';
    position: absolute;
    display: block;
    width: 0;
    z-index: 1;
    border-style: solid;
    border-color: #ffffff transparent;
    border-width: 20px 15px 0;
    bottom: -20px;
    left: 50%;
    margin-left: -15px;
}
.amanda_intro:before {
    content: '';
    position: absolute;
    width: 0;
    z-index: 0;
    border-style: solid;
    border-color: #000000 transparent;
    border-width: 21px 16px 0;
    bottom: -21.5px;
    left: 50%;
    margin-left: -16px;
    display: block;
}

#amanda{
    left: 46.5%;  
    bottom:38%;
    position: fixed;
    z-index: 12;
}
#cloud{
    left: 41%;  
    bottom:34%;
    /*left:2%;*/
    position: fixed;
    z-index: 10;
}
#cloud2{
    left: 44%; 
    /*right: 2%;*/
    bottom:30%;
    position: fixed;
    z-index: 10;
}

#player_name{
    color:#c94dff;
    font-family: sinistre;
}
div.line {
    /*display: inline-block;*/
    border-top: 0.3vw solid black;
    padding-bottom: 40px;
    width: 45vw;
    transform: rotate(-6deg);
    padding-left: 11vw;
    z-index: -5;
}
div.line2 {
    display: inline-block;
    border-top: 0.3vw solid black;
    padding-bottom: 40px;
    width: 70vw;

    
    margin-left: 11vw;
    z-index: -5;
}

.passage_title{
    font-size: 3.2vw; 
    font-family: jolybolditalic;
    margin-bottom: 10px;
}
.passage{
    margin-left: 11vw;
}
.quote {
    display:none;
}
.clues{
    margin-top: 20px;
    margin-bottom: 20px;
    font-family: sinistre;
}








/* scroll bar */
/* width */
::-webkit-scrollbar {
    color:white;
    width: 10px;
    height: 10px;
  }
  
  /* Track */
  ::-webkit-scrollbar-track {
    background: white; 
  }
   
  /* Handle */
  ::-webkit-scrollbar-thumb {
    background: #c94dff; 
    border-radius: 15px;
  }
  
  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
    background: white; 
  }