@font-face {
    font-family: dyslexic;
    src: url(./OpenDyslexic-Bold.otf);
}

body {
    margin: 0;
    background-color: #22222a;
    text-align: center;
}

#textbox {
    color: #fffefe;
    font-family: dyslexic;
    width: 70%;
    height: 50vh;
    background-color: #333;
    border-radius: 20px;
    position: absolute;
    left: 15vw;
    top: 22.5vh;
}

#txtbox {
    color: #aaa;
    font-family: dyslexic;
    width: 85%;
    height: 30vh;
    position: absolute;
    left: 5vw;
    top: 9vh;
    font-size: 2.5vw;
    text-align: left;
}

#hud {
    color: #fffefe;
    margin: 0 auto; 
    width: 60%; 
    height: 10vh;
    display: flex;
    font-family: dyslexic;
}

#hud div {
    width: 20%;
    font-size: 2vw;
    height: 7vh;
    background-color: #333;
    border-radius: 5px;
    margin: 7.5%;
}

#hudlower {
    color: #fffefe; 
    width: 100%; 
    height: 20vh;
    font-family: dyslexic;
    position: absolute;
    top: 70vh;
}

#hudlower div {
    width: 20%;
    font-size: 2vw;
    height: 7.5vh;
    background-color: #333;
    border-radius: 5px;
    margin: 7.5% auto;
}

#hudlower div:hover {
    background-color: #444;
}