body {
    background-color:orange;
}

#header{
    text-align: center;
}

#htext {
    text-transform: uppercase;
    font-weight:700;
    color: midnightblue;
}

@media only screen and (max-width:900px)
{
    #htext {
        font-size:1.5em;
    }
}

@media only screen and (max-width:600px)
{
    #htext {
        font-size:1em;
    }
}

@media only screen and (max-width:400px)
{
    #htext {
        font-size:.9em;
    }
}

@media only screen and (max-width:350px)
{
    #htext {
        font-size:.8em;
    }
}


#menu {
    height:20em;
    border: 2px white solid;
    border-radius: 3%;
    position: absolute;
    left: 50%;
    top:50%;
    transform: translate(-50%,-50%);
    width:20%;
}

@media only screen and (max-width:900px)
{
    #menu {
        width:30%;
    }
}

@media only screen and (max-width:600px)
{
    #menu {
        width:50%;
    }
}

@media only screen and (max-width:400px)
{
    #menu {
        width:60%;
    }
}



#startbutton{
    position: absolute;
    left: 50%;
    bottom:8%;
    transform: translate(-50%,-50%);
    border-radius:10px;
    padding:.4em 2em;
    font-size:1.8em;
    font-weight: bold;
    background-color: mediumvioletred;
    color: lavenderblush;
}

@media only screen and (max-width:400px)
{
    #startbutton {
        padding:.4em 1.3em;
    }
}

@media only screen and (min-width:1200px)
{
    #startbutton {
        font-size: 2.2em;
    }
}

#startbutton:hover {
    color:black;
}

#scorediv {
    background-color: indigo;
    display: inline-block;
    position: absolute;
    top:13%;
    left:50%;
    transform: translate(-50%,-50%);
    border-radius:2em;
    opacity: 0;
}

@media only screen and (max-width:600px){
    #scorediv {
        top: 20%;
    }
}

#svalue {
    font-size:1.2em;
    text-transform: uppercase;
    font-weight:bold;
    padding:.1em 1em;
    color: lavenderblush;
}

@media only screen and (max-width:400px){
    #svalue {
        font-size: 1em;
    }
}

#speedvalue {
    background-color: dimgrey;
    border-radius: 1em;
    font-weight: bold;
}

#stage {
    border:10px burlywood groove;
    border-radius:0%;
    position: absolute;
    left:50%;
    top:50%;
    transform: translate(-50%,-50%);
    margin-top:.6em;
    width:40%;
}

@media only screen and (max-width:900px){
    #stage {
        width:60%;
    }
}

@media only screen and (max-width:600px){
    #stage {
        width:75%;
    }
}

@media only screen and (max-width:400px){
    #stage {
        width:80%;
    }
}

#monitorbuttons {
    position: absolute;
    top:50%;
    right:1% ;
    transform: translate(-50%,-50%);
    opacity:0;
    text-align: center;
}

@media only screen and (max-width:900px){
    #monitorbuttons {
        top:87%;
        left:30%;
    }
}

@media only screen and (max-width:600px){
    #monitorbuttons {
        top:75%;
        left:50%;
    }
}

@media only screen and (max-width:350px){
    #monitorbuttons {
        top:72%;
        left:50%;
    }
}

h3 {
    text-transform: uppercase;
}

@media only screen and (max-width:900px){
    h3 {
        font-size:.7em;
        font-weight: bold;
    }
}

@media only screen and (max-width:600px){
    h3 {
        font-size:.5em;
    }
}

@media only screen and (max-width:400px){
    h3 {
        font-size:.6em;
    }
}

#speedchanger {
    font-weight: bold;
    font-size: 1em;
    background-color: darkturquoise;
}

@media only screen and (max-width:400px){
    #speedchanger {
        font-size: .8em;
    }
}

#confirm {
    background-color: deeppink;
    border-radius:1em;
    font-size: 1em;
    font-weight: bold;
}

@media only screen and (max-width:400px){
    #confirm {
        font-size: .8em;
        padding: .4em;
    }
}

#moveb {
    opacity: 0;
    position: absolute;
    left:50%;
    bottom: 5%;
    transform: translate(-50%,-50%);
}

#lb{
    transform: translate(-0%,0%);
    padding: 1em;
    font:.8em;
    border-radius: 50%;
}

@media only screen and (max-width:600px){
    #lb {
        padding: .6em;
    }
}

#ub{
    transform: translate(0%,-80%);
    padding: 1em;
    font:.8em;
    border-radius: 50%;
}

@media only screen and (max-width:600px){
    #ub {
        padding: .6em;
    }
}

#rb{
    transform: translate(0%,0%);
    padding: 1em;
    font:.8em;
    border-radius: 50%;
}

@media only screen and (max-width:600px){
    #rb {
        padding: .6em;
    }
}

#db{
    transform: translate(-220%,80%);
    padding: 1em;
    font:.8em;
    border-radius: 50%;
}

@media only screen and (max-width:600px){
    #db {
        padding: .6em;
    }
}