*
{   margin: 0;
    padding: 0;  }

html, body
{
    width: 100%;
    height: 100%;
}

body
{
    background-color: black;
    margin: 0;
    font-family: \5FAE\8EDF\6B63\9ED1\9AD4,'Microsoft JhengHei', Verdana, Helvetica, Arial, 'Microsoft Sans-serif';
    font-size: 12px;
    color: white;

    background: url('Images/circuit.png'), url('Images/arenabg.png');
    background-repeat: no-repeat, repeat-y;
    background-position: bottom, top;
    background-size: 100%, 100%;
}

a:link    {  text-decoration:none  }
a:visited {  text-decoration:none  }
a:active  {  text-decoration:underline  }
a:hover   {  text-decoration:underline  }

a.push_button
{
    display: block;

    font-size: 48px;
    font-weight: bold;
    text-decoration: none;
    text-align: center;
    background-color: #e8ed9f;
    color: black;

    width: 300px;
    height: 70px;
    padding: 8px 10px;

    box-shadow: 1px 1px 6px 6px rgba(20%,20%,40%,0.5) inset;
    border-radius: 15px;

    vertical-align: middle;
 /* border: 1px solid white; */
}

span.explanation
{
    font-size: 36px;
    text-align: justify;
    text-shadow: 0px 0px 4px yellow;
    color: white;
 /* border: 1px solid white; */
}

span.game_title
{
    font-size: 48px;
    text-align:center;
    text-shadow: 0px 0px 20px yellow;
    color: white;
 /* border: 1px solid white; */
}

.game_viewport
{
    margin: 0 auto;
    position: relative;
 /* background-color: gray; */
    border-style: none;
 /* border: 1px solid black; */

   -webkit-touch-callout: none;
   -webkit-user-select: none;
   -khtml-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
    user-select: none;

 /* remove the delay of touch events on div elements: */
   -ms-touch-action: none;
	touch-action: none;
}

canvas.frame_buffer
{
    background-color: black;
    position: absolute;
    left: 0px;
    top: 0px;
}

p.credit
{
    text-align:center;
    color: gray;
    font-size: smaller;
}

p.credit a
{   color: gray;  }