html, body {
    height: 100%;
    margin: 20px;
}


div.screen{
    
    height: screen;
}

div.title{
    display: flex;
    width: 10%;
    margin: auto;
    text-align: center;
    
}

div.ballContainer {
    top: 50px;
    display: flex;
    height: 200px;
    margin: 10px;
    justify-content: center;
    align-items: center;
}


h1.mainred{
    color:red;
    float: left;
}
h1.mainblue{
    color:blue;
    float: right;
}

p.welcome{
    text-align: center;
    font-size: large;
    font-weight: bold;
}
p.instruction{
    text-align: center;
    font-size: medium;
    font-weight:normal;
    height: 100px;
}


.blueball {
    height: 100px;
    width: 100px;
    background-color: blue;
    border-radius: 50%;

  }

.redball {
height: 100px;
width: 100px;
background-color:red;
border-radius: 50%;

}

.scoreboard{
    top:20px;
}

form#userForm {
    margin-bottom: 20px;
}

table#userTable{
    margin-top: 20px;
}