html{
    color: rgb(255, 255, 255);
    background-color: rgb(112, 112, 112);
    font-family: Arial, Helvetica, sans-serif;
    padding: 5px;
    width: 100%;
    margin: 5px;
    
    
}

.header {
    
    width: 100%;
    height: 10%;
    padding-top: 1rem;
    padding-bottom: 1rem;
    background-color: rgb(70, 68, 68);
}
#headtext {
    justify-content: center;
    align-content: center;
    margin: auto;
    text-align: center;
}

#slider {
    width: 55%;
    height: 40px;
}
#gamebox{
   justify-content: center;
    align-content: center;
    align-self: center;
    margin: auto;
    text-align: center; 
    
    height: 90%;
    width: 60%;
    float: left;
}

input{
    width: 5rem;
}
#controlls{
    
    
    
    float: left;
    height: 90%;
    width: 20%;
    background-color: darkgrey;
}

#messages{
    float: right;
    height: 90%;
    width: 20%;
    overflow-y: scroll;
    background-color: darkgrey;
    text-align: center;
    -webkit-text-stroke: 1px black;
    
    font-size: 1.5rem;
    
}
#marker{
    position: relative;
    width: 1.5%;
    height: 5%;
    background-color: rgb(0, 0, 0);
    
    top: -30px;
    left: 48.5%;
    
}