* { margin:0; padding:0;}/* to remove the top and left whitespace */

html, body { width:100%; height:100%; overflow-y: hidden; overflow-x: hidden;} /* just to be sure these are full screen*/

#overlay {
    position: absolute;
    left: 0px;
    top: -20px;
    color: white;
    font-size: 12px;
    font-family: monospace;
    padding: 1em;
    white-space: pre-line;
    user-select: none;
    }



#planetsContainer {
    position: absolute;
    width: 700px;
    top: 0;
    right: 50%;
    left: 50%;
    display: table;
    margin: auto;
    transform: translate(-35%, 0%);

}

#planetsContainer button 
{
    background-color: blue;
    position: relative;
    color: white;
    cursor: pointer;
    padding: 5px 5px;
    left: 0;
}


#directionsContainer
{
    position: absolute;
    /* border-style: solid; */
    color: white;
    bottom: 75px;
    left: 10px;
    width: 140px;
    height: 140px;
}

#directionsContainer p { margin-bottom: 4px; }

#timeContainer
{
    position: absolute;
    color: white;
    top: 0px;
    right: 0px;
}


#timeContainer button
{
    background-color: red;
    color: white;
    cursor: pointer;
    padding: 2px 10px;
}

#scalesContainer
{
    color: white;
    position: absolute;
    bottom: 75px;
    right: 10px;
    display: table;
    margin: auto;
    text-align: right;
}

.slidersStyle
{
    display: table;
    justify-content: center;
}

#scalesContainer button
{
    background-color: green;
    color: white;
    cursor: pointer;
    padding: 2px 10px;
}