html{
    background-color: #111111;
    color: #00ff00;
    font-family: monospace;
    overflow: hidden;
    user-select: none;
}

.dialog{
    min-height: 5vh;
    padding-left: 10vw;
    padding-right: 10vw;
    font-size: 4vh;
    border: solid 0.5vh #00ff00;
    text-align: center;
    text-wrap: wrap;
    text-shadow: 0px 0px 0.5vh #00FF00, 0px 0px 10px #4ea34e;
}

.advice{
    padding-left: 10vw;
    padding-right: 10vw;
    font-size: 2vh;
    text-align: center;
    text-wrap: wrap;
    text-shadow: 0px 0px 0.5vh #00FF00, 0px 0px 10px #4ea34e;
    animation: rotate 4s infinite ease-in-out;
}

@keyframes rotate{
    0% { transform: translate(-1%, 1vh); opacity: 0%;}
    25% {transform: translate(1%, -0.6vh); opacity: 23%;}
    50% {transform: translate(-1%, -0.9vh); opacity: 0%;}
    75% {transform: translate(1%, 0.8vh); opacity: 67%;}
    100% { transform: translate(-1%, 0vh); opacity: 0%;}
}

.screen{
    position:absolute;
    height:25vh;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.info{
    cursor: pointer;
    height:5vh;
    position: absolute;
    top:20vh;
    left: 0.5vw;
}

.play{
    cursor: pointer;
    position:absolute;
    height: 13vh;
    width: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 80%;
}

.typingbox{
    display: flex;
    justify-content: center;
    align-items: center;
    position:absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 15vh;
    width: 20vw;
}
.typing{
    z-index: 500;
    text-shadow: 0px 0px 0.2vh #000000, 0px 0px 10px #4ea34e;
    text-align: center;
    font-size: 4.5vh;
    max-width: 25vw;
    text-wrap: wrap;
}

.box{
    z-index: 800;
    background-color: rgba(0, 0, 0, 0.185);
    position: absolute;
    width: 15vw;
    height: auto;
    font-size: 4vh;
    border: solid 0.5vh #5be724;
    text-align: center;
    text-wrap: wrap;
    text-shadow: 0px 0px 0.5vh #00FF00, 0px 0px 10px #4ea34e;
}

.guide{
    width:22vw;
    height:62vh;
    position: absolute;
    bottom: -7vh;
    left: 0vw;
}

.squiggle{
    cursor: pointer;
    position: absolute;
}

.infobox{
    font-size: 1vh;
    z-index: 13000;
    text-align: center;
    padding-top: 2vh;
    position:absolute;
    background-color: black;
    border: solid 0.5vh #5be724;
    height:78vh;
    width:80vw;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.points{
    font-size: 1vh;
    position:absolute;
    right: 0.5vw;
    bottom: 0.5vw;
}