@font-face {
    font-family: yanone;
    src: url(fonts/NyghtSerif-Regular.ttf);
}

@font-face {
    font-family: front;
    src: url(fonts/NyghtSerif-Bold.ttf);
}

@font-face {
    font-family: yap;
    src: url(fonts/NyghtSerif-Medium.ttf);
}

:root {
  --gold: #ffb338;
  --light-shadow: #77571d;
  --dark-shadow: #3e2904;
}

body {
    height: 100vh;
    width: 100vw;
    /*background-color: #f4d190;*/
    background-color: #030000;
    color: white;
    font-family: yanone;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-size:  cover;
    background-position: center center;
    background-repeat: no-repeat;
    align-items: center;
    margin: 0px;
    overflow: hidden;
}

ul {
    font-family: yanone;
}


.gamebody {

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    overflow: hidden;
    background-position: center center;
    /*background-repeat: no-repeat;*/
    background-size: cover;
    background-repeat: repeat-y; /* Make backgrounds repeat on mobile */
    height: 100vh;
    width: auto;
    margin-top: 3rem;
    margin-right: 2rem;
    margin-left: 2rem;
    
}

.dialog, .dialog3 { 
    height: 30%;
    font-size: 2.95vw;
    width: 70%;
}

/* Mobile Perverts Start*/

@media only screen and (max-width:600px) {

.dialog, .dialog3 { 
    font-size: 22px;
}

.gamebody {
    /*height: 100%;
    width:  100%;
    margin-top:  80px;
    margin-left: 20px;
    margin-left: 20px;*/

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    overflow: hidden;
    background-position: center center;
    /*background-repeat: no-repeat;*/
    background-size: cover;
    background-repeat: repeat-y; /* Make backgrounds repeat on mobile */
    height: 100vh;
    width: auto;
    margin-top: 3rem;
    margin-right: 2rem;
    margin-left: 2rem;
}


}
/* Mobile Perverts End */

/* CHARACTER SPEAKING TAGS 1/2 */
/* add any new character tags into the below */

.text1, .text2, .text3, .Jules, .Dihann, .narration, .Title, .Blood, .Nia, .Sis {
    display: block;
    /*text-shadow: 0px 0px 16px #000;*/
    text-shadow: 0px 4px 3px rgba(0,0,0,0.4),
             0px 8px 13px rgba(0,0,0,0.1),
             0px 18px 23px rgba(0,0,0,0.1);
}

.text1 {
    color: #500711;
    text-align:  left;
    text-align:  center;
}

.text2 {
    color: #78676E;
}

.text3 {
    color: #FEFEFE;
}

.blank {
    color:  #FAF9F6;
}

/* CHARACTER SPEAKING TAGS 2/2 */
/* replace the below with whatever characters you have set up in code.js */

.Jules {
    color: #ffc95f;
    float: left;
    font-family: yap;
    /*text-shadow: 0px 0px 8px #de1f1f;*/
    font-size: 3.75vw;
}

.Diahann {
    color: #b0041a;
    float: right;
    font-family: yap;
    text-shadow: 0px 0px 22px #b00000;
    text-shadow: 2px 2px 2px #250404;
    font-size: 3.75vw;
   }

.Sis {
    color: #b0041a;
    float: left;
    font-family: yap;
    font-size: 3.75vw;
    text-shadow: 0px 0px 8px #cc6307;
   }   

.Nia {
    color: #b0041a;
    float: right;
    font-family: yap;
    font-size: 3.75vw;
    text-shadow: 0px 0px 8px #cc6307;
   }

.Title {
    color: #b0041a;
    font-family: front;
    font-size: 3.75vw;
    text-align:  center;
    text-shadow: 6px 6px 0px rgba(211, 14, 14, 0.2);
}

.Blood {
    color: #b0041a;
    font-family: front;
    font-size: 4.5vw;
    text-align:  center;
    text-shadow: 2px 4px 8px #ffd2a3;
}

.narration {
    color: #F3EDE2;
    text-align: left;
    text-align:  center;
}