@charset "utf-8";
/* CSS Document */

*{
margin:0px;
padding:0px;
font-family:Arial, Helvetica, sans-serif;
}

html{
overflow:auto;
}

html, body{
height:100%;
margin:0px auto;
text-align:center;
vertical-align:middle;
background-color:#333333;
}

#axis{
display:table;
margin:auto;
height:100%;
width:100%;
border:none; /* CSS equivalent to HTML Table cellpadding="0" */
border-width:0px; /* CSS equivalent to HTML Table cellpadding="0" */
border-spacing:0px; /* CSS border-spacing:4px is equivalent to HTML Table cellspacing="4" | use with border-collapse:separate */
border-collapse:collapse; /* CSS equivalent to HTML Table cellspacing="0" | If set to "separate" use with CSS "border-spacing" */
text-align: center;
vertical-align:middle;
background-color:transparent;
}

#horizon{
display:table-cell;
margin:auto;
text-align: center;
vertical-align:middle;
background-color:transparent;
vertical-align: middle;
}

#field{
display:block;
margin:0px auto;
outline:1px solid #444444;
border:10px solid #000000;
height:200px;
width:800px;
overflow:auto;
background-color:#333333;
}

#content{
display:table;
margin:auto;
height:200px;
width:800px;
text-align:center;
vertical-align:middle;
font-variant:small-caps;
font-weight:normal;
text-transform:capitalize;
color:#000000;
font-size:800%;
}

#content p{
display:table-cell;
margin:auto;
text-align: center;
vertical-align:middle;
background-color:transparent;
vertical-align:middle;
font-variant:small-caps;
word-spacing:+10px;
letter-spacing:+5px;
}

@media handheld and (max-width: 480px), screen and (max-device-width: 480px), screen and (max-width: 600px)  {
    #content{ {
        color: hotpink;
    }
}