@font-face
{
    font-family: "arcade";
    src: url("../fonts/arcade2.ttf");
}

/****************************************/
/* common styles used for v1 through v4 */
/****************************************/

html {
    font-size: 62.5%;
}
body {
    font-size: 1.6rem;
}
html,body {
    font-family: 'arcade', sans-serif;
    padding: 0;
    margin: 0;
}

/* masked items */
#stats { border: 2px solid black; }
#controls     { width: 28em; padding: 1em; font-size: 0.7em;position: absolute;left: 0;top: 10vh;z-index: -1; }
#controls th  { text-align: right; vertical-align: middle; }

#racer {
    position: relative;
    z-index: 0;
    width: 100vw;
    height: 100vh;
}
#racer .characters {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 3;
}
#canvas {
    position: absolute;
    z-index: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    background-color: #040823;
}

/**************************************************/
/* rudimentary heads up display (only used in v4) */
/**************************************************/

#hud {
    position: absolute;
    z-index: 1;
    width: 100%;
    padding: 5px 0;
    font-size: 2.5rem;
    color:#fff;
    text-shadow: 1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    display: none;
}
#hud .hud              { padding: 5px; margin: 0 5px; }
#hud #current_lap_time { float: left;  }
#hud #last_lap_time    { float: right; display: none;  }
#hud #fast_lap_time    { display: block; width: 12em;  margin: 0 auto; text-align: center; transition-property: background-color; transition-duration: 2s; -webkit-transition-property: background-color; -webkit-transition-duration: 2s; }
#hud .value            { color:#fff;
    text-shadow: 1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; }
#hud .fastest          { background-color: rgba(255,215,0,0.5); }
#speed {
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 10px;
    font-size: 4rem;
    color: #ffd400;
    z-index: 3;
    text-shadow: 1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}


#instructions {
    width: 100%;
    height: 100%;
    text-align: center;
    display: flex;
    font-size: 2.5rem;
    position: absolute;
    top: 0;
    left: 0;
    align-items: flex-start;
    justify-content: center;
    z-index: 5;
}
#instructions .panel {
    margin: 20vh 0 0 0;
    padding: 2rem 3rem;
    border: 1px solid #000;
    background: rgba(255,255,255, 0.7);
}
#instructions .panel span {
    display: block;
    color: #000;
}