body, html {
    width: 100vw;
    height: 100vh;
    margin: 0;
    padding: 0;
    font-family: monospace;
    color: #707070;
    background-color: hsla(0,0%,20%,1.0);
    transition: background-color 1s linear;
}
body {
    position: relative;
}
.world {
    position: absolute;
    width: 100vw;
    height: 100vh;
    z-index: 1;
}
.world canvas {
    filter: hue-rotate(360deg) saturate(200%);
}
.uiLeft {
    position: absolute;
    left: 10px;
    top: 10px;
    z-index: 3;
    font-family: monospace;
}

.uiRight {
    position: absolute;
    right: 10px;
    top: 10px;
    z-index: 3;
    font-family: monospace;
    display: none;
}

.ui a {
    color: #707070;
    text-decoration: none;
    font-size: 2em;
    cursor: pointer;
}

.ui a:hover {
    color: white; !important
    text-decoration: none;
}

input {
    font-size: inherit;
}


.tid, .tid:focus {
    /*background-color: hsla(0,0%,0%,0);;*/
    background-color: #707070;
    color: #eee;
    border:  none;
    outline: none;
    font-family: monospace;
    font-size: 2em;
}
.tid::placeholder {
    color: #aaa;
}