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

body {
    height: 100vh;
    width: 100vw;
    background-color: black;
    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:  contain;
    background-position: center;
    background-repeat: repeat-y; /* NEW JOHN CODE: Make background repeat on mobile */
    align-items: center;
    margin: 0px;
    overflow: hidden;
}

ul {
    font-family: yanone;
}


.gamebody {
    height: 90%;
    width:  100%;
    margin-top:  80px;
    margin-left: 20px;
    margin-left: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    overflow: none;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

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

/* NEW JOHN CODE */
/* make font bigger on phones */
@media only screen and (max-width:600px) {

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

}
/* END NEW JOHN CODE */

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

.text1, .text2, .text3, .jack, .reese, .alani, .narration {
    display: block;
    text-shadow: 2px 2px 4px #000000;
}

.text1 {
    color: #6A6A6A;
    /*text-align:  center;*/
}

.text2 {
    color: #BBBBBB;
}

.text3 {
    color: #FEFEFE;
}

.blank {
    color:  #FAF9F6;
}

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

.jack {
    /*color: #cfeef9;*/
    float: left;
}

.reese {
   /* color: #eccedf; */
   float: left;
   }

.alani {
    /*  color: #cfeef9;*/
    float: left;
}

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