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

body {
    height: 100vh;
    width: 100vw;
    background-color: black;
    color: white;
    font-family: syne;
    -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: no-repeat;
    align-items: center;
    margin: 0px;
    overflow: hidden;
 
}

.body2

{
    height: 100vh;
    width: 100vw;
    background-size:  contain;
    background-position: center;
    background-repeat: no-repeat;
    align-items: center;
    margin: 0px;
    border-radius: 100px;
    overflow: hidden;
 
}

ul {
    font-family: syne;
}


.gamebody {
    height: 100%;
    width: 100%;
    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, .dialog5 { 
    height: 18%;
    font-size: 2.5vw;
    width: 70%;
}

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

.text1, .text2, .text3, .text4, .text5, .shell, .android, .narration {
    display: block;
    text-shadow: 2px 2px 4px #000000;
}

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

.text2 {
    color: #BBBBBB;
}

.text3 {
    color: #FEFEFE;
}

.text4 {
    color: #FEFEFE;
}

.text5 {
    color: #FEFEFE;
}

.blank {
    color:  #FAF9F6;
}

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

.shell {
    color: #bcffcd;
    text-align: left;
    animation: glow .08s ease-in-out infinite alternate;
}

.android {
   color: #bce0ff;
   text-align: right;
   animation: glow .08s ease-in-out infinite alternate;
   }

.narration {
    color: #FAF9F6;
    text-align:  center;
    animation: glow .08s ease-in-out infinite alternate;
}


/* Glow */
@-webkit-keyframes glow {
  from {
    text-shadow: 0 0 6px #eee, 0 0 10px #eee;
  }
  
  to {
    text-shadow: 0 0 6px #eee, 0 0 8px #eee;
  }
}


/* Scanlines */
body::before{ 
    content: "";
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: linear-gradient(rgba(20, 20, 40, 0) 66%, rgba(0, 0, 0, 0.20) 33%);
    background-size: 100% 3px;
    z-index: 9999;
    pointer-events: none; 
    animation: scanlines-anim 0.7s linear infinite;
}

@keyframes scanlines-anim{
    0% {
        background-position: 0px 0px;
    }
    100% {
        background-position: 0px 9px;
    }
}