body {
    margin: 0;
    overflow: hidden;
}
#canvas {
    width: 100vw;
    height: 100vh;
}

.title {
    opacity: 1;
    z-index: 99;
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
}
.title h1 {
    position: relative;
    top: 125px;
    width: 100vw;
    text-align: center;
    font-family: Consolas, sans-serif;
    font-size: 3em;
}
.title p {
    position: relative;
    top: 175px;
    width: 100vw;
    text-align: center;
    color: #222;
    font-family: Verdana, sans-serif;
}
.title button {
    position: relative;
    left: 50vw;
    transform: translateX(-50%);
    top: 225px;
    width: 400px;
    height: 50px;
    background: #88DC;
    border-radius: 8px;
    border: 4px solid #449;
    color: black;
    font-size: 1.25em;
    font-family: Consolas, sans-serif;
}

.game, .what {
    opacity: 0;
}
#map {
    position: absolute;
    right: 10px;
    top: 10px;
    width: 12vw;
    height: 12vw;
}
#keys {
    position: absolute;
    left: 10px;
    bottom: 10px;
    width: 16vw;
    opacity: 0.5;
}
#shift {
    position: absolute;
    right: 10px;
    bottom: 10px;
    width: 5vw;
    opacity: 0.5;
}

.what {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 98;
}
.what > * {
    position: relative;
    top: 50px;
    left: 50vw;
    transform: translateX(-50%);
    width: 50vw;
}
.what p {
    font-size: 1.25em;
    font-family: Consolas;
}
.what img {
    padding: 0;
    margin: 0;
    width: 24vw;
}
.what button {
    width: 400px;
    height: 50px;
    background: #88DC;
    border-radius: 8px;
    border: 4px solid #449;
    color: black;
    font-size: 1.25em;
    font-family: Consolas, sans-serif;
}