canvas{
    position:absolute;
    top:0px;
    left:calc(50vw - (96vh / 1.2) / 2);
    height:96vh;
    box-shadow:0 0 4px black;
}
#bar{
    list-style-type:none;
    position:absolute;
    top:96vh;
    left:calc(50vw - (96vh / 1.2) / 2);
    height:4vh;
    width:calc(96vh / 1.2);
    display:flex;
    margin:0;
    padding-left:0;
    text-align:center;
    line-height:4vh;
    color:white;
    background-color:#222;
    box-shadow: 0 0 4px black;
    text-shadow: 0 0 1px white;
}
#bar:bullet{
    content:'';
}
#bar > li{
    flex:1;
}
#controls, #gameOver, #pause, #waveName, #shock, #sound, #error, #starting{
    background-color:rgba(100, 100, 100, 0.8);
    position:absolute;
    top:0px;
    left:calc(50vw - (96vh / 1.2) / 2);
    height:96vh;
    width:calc(96vh / 1.2);
    opacity:0;
    -webkit-transition: opacity 0.2s;
    text-align:center;
    overflow:scroll;
}
#error{
    color: red;
    text-shadow: 0 0 1px red;
    height:4vh;
    top:92vh;
}
#waveName{
    top:44vh;
    height:8vh;
}
#gameOver, #pause, #waveName{
    display:table-cell;
    vertical-align:middle;
    font-size:40px;
}
#sound{
    width:auto;
    height:auto;
}
#starting ul{
    list-style-type:none;
}
#starting li{
    padding: 20px;
    text-align: left;
}
#controls.display, #gameOver.display, #pause.display, #waveName.display, #shock.display, #sound.display, #error.display, #starting.display{
    opacity:1;
}
#controls > p{
    display:flex;
    text-align:center;
    font-size:20px;
    line-height:1px;
}
#controls > p > span {
    flex:1;
}
#controls > p > input{
    flex:1;
    background-color:rgba(255, 255, 255, 0.8);
}
body{
    background-color:gray;
    font-family:Verdana;
}