body{
    margin:0;
    overflow:hidden;
    background:#111;
    color:#fff;
    font-family:sans-serif;
}

#hud{
    position:absolute;
    left:10px;
    top:10px;
    z-index:100;
    font-size:20px;
}

#popup{
    position:absolute;
    top:70px;
    left:50%;
    transform:translateX(-50%);
    background:#000;
    border:2px solid gold;
    padding:10px 20px;
    display:none;
    z-index:200;
}

#crashPopup{
    position:absolute;
    background:#000;
    border:2px solid red;
    color:white;
    padding:10px 20px;
    display:none;
    z-index:300;
}

#muteButton{

    position:absolute;

    right:90px;

    bottom:25px;

    width:90px;

    height:45px;

    font-size:14px;

    background:#222;

    color:white;

    border:1px solid #666;



    z-index:50;

}



#ui{
    font-size:18px;
    margin-top:10px;
}

#startBtn{
    font-size:18px;
    padding:8px 16px;
    margin-bottom:10px;
}


canvas{
    display:block;
    margin:auto;
    background:#4a8e35;
}

<style>

#instruction{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    background:rgba(0,0,0,0.75);
    color:white;
    padding:30px 50px;
    font-size:32px;
    text-align:center;
    border:4px solid white;
    z-index:10;
}

#resetButton{

    position:absolute;

    right:250px;

    bottom:50px;

    width:100px;

    height:60px;

    font-size:18px;

    display:none;

    z-index:20;

}

#goalTime{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    color:yellow;
    font-size:72px;
    font-weight:bold;
    text-shadow:4px 4px 8px black;
    display:none;
    z-index:20;
}

#checkpointLog{
    width:220px;
    color:white;
    font-size:20px;
    line-height:1.6;
    margin-top:20px;
}

.checkpointItem{
    margin-bottom:8px;
    color:yellow;
}




</style>