body{
    background:#f5f5f0;
}

.container{
    margin:auto;
    text-align: center;
    width:1000px;
    background:#f5f5f0;
    border:1px solid black;
    border-radius:5px;
    padding:20px 0 20px 0;
} 

.items{
    display:inline block;
}

.btn{ /*all buttons*/
  margin: 15px 5px 5px 5px;
  text-decoration: none;
  width:125px;
  padding:5px 5px 5px 5px;
  color:white; /*font color*/
  font-weight:bold;
  font-size:16px;
  border-radius:4px;
}

.btn1{ /*New Game*/
  background:#000099;
  border: black 1px solid;
}

.btn1:hover{ /*New Game*/
  background:#1a1aff;
  cursor:pointer;
}

.btn2{ /*Submit*/
  background:#ffff00;
  border: black 1px solid;
  color:black;
}

.btn2:hover{ /*Submit*/
  background:#ffff80;
  cursor:pointer;
}

.btn3{ /*Start*/
  background:#33cc33;
  border: black 1px solid;
}

.btn3:hover{ /*Start*/
  background:#248f24;
   cursor:pointer;
}

.head {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 30px;
    font-weight: bold;
    color:black;
}

.label-T {
    margin: 15px 5px 5px 5px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 22px;
    font-weight: bold;
    color:blue;
}

.label-Q {
    margin: 15px 5px 5px 5px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 22px;
    font-weight: bold;
    color:blue;
}

.label-A {
    margin: 15px 3px 5px 57px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 22px;
    font-weight: bold;
    color:blue;
}

.label-TC {
    margin: 15px 5px 5px 5px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 32px;
    font-weight: bold;
    color:green;
    width: 40px;
}

.timer {
    margin: 15px 5px 5px 5px;
    background:#f5f5f0;
    width:100px;
    height:40px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 30px;
    font-weight: bold;
    color:red;
    padding: 5px 5px 5px 5px;
    border: none;
    outline: none;
    text-align:center;
}

.firstnum {
    margin: 0 0 0 0;
    background:#f5f5f0;
    width:60px;
    height:50px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 50px;
    font-weight: normal;
    padding: 0 5px 0 0;
    border: none;
    outline: none;
    text-align:right;
}

.operator {
    margin: 0 9px 0 0;
    background:#f5f5f0;
    width:30px;
    height:30px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 50px;
    font-weight: normal;
    padding: 0 0 0 0;
    border: none;
    outline: none;
    text-align:center;
}

.secondnum {
    margin: 0 41px 0 0;
    background:#f5f5f0;
    width:60px;
    height:50px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 50px;
    font-weight: normal;
    padding: 0 5px 0 0;
    border-top: none;
    border-left:none;
    border-bottom: 3px solid black;
    border-right:none;
    outline: none;
    text-align:right;
}

input {
  border: none;
}

input:focus {
  outline: none;
}

.answer {
    margin: 5px 6px 5px 5px;
    width:60px;
    height:50px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 50px;
    font-weight: normal;
    padding: 0 5px 0 0;
    border: 1px solid black;
    border-radius: 3px;
    text-align:right;
}

.points {
    margin: 15px 5px 5px 5px;
    width:0;
    height:0;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: normal;
    padding: 0 0 0 0;
    border: none;
    outline: none;
    text-align:center;
}

.numbers {
    display: block;
    margin: 0 auto;
    text-align:center;
}

.number {
    display: inline-block;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 32px;
    font-weight: bold;
    color:black;
    width:60px;
    text-align:center;
    cursor:pointer;
}

.number:hover {
  background-color: yellow;
  border-radius: 5px;
}

.selected {
    background-color: #ff3300;
    color: white;
    font-weight: bold;
    padding: 0 10px 0 10px;
    border-radius: 5px;
}

