@font-face {
    font-family: "Bree Serif", serif;
    src: url(BreeSerif-regular.ttf);
}

body {
    height: 100vh;
    width: 100vw;
    background-color: black;
    color: white;
    font-family: "Bree Serif", serif;
    user-select: none;
    background-size:  contain;
    background-position: center;
    background-repeat: no-repeat;
    align-items: center;
    margin: 0px;
    overflow: hidden;	
}

ul {
    font-family: "Bree Serif", serif;
}


.gamebody {
    height: 90%;
    max-width:  100%;
    margin:10vh 10vw 5vh;
    
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;

    overflow: hidden;

    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.dialog { 
    font-size: 4.5vw;
    width: 100%;
    display: block;
}

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

.dialog {
    /* default text, all other classes will override these */
    text-shadow: 2px 2px 4px #000000;
    text-align: center;
}

.dialog.old {
    /* old lines */
    color: #6A6A6A;
}

.narration {
    color: #FEFEFE;
}

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

.protag {
    color: #FF4FC1;
    text-align: left;
}

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

.sam {
    color: #D94FFF;
    text-align: right;
}

.sam-narration {
    color: #E37DFF;
    text-align: right;
}

.mike {
    color: #77A2FF;
    text-align: right;
}

.babe {
    color: #5BDD66;
    text-align: left;
}

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

.hookup {
	color: #EC4FE0;
}