:root {
  --dark: #000;
  --course: #F4E408;
  --light: #fff;
}
body {
  background-color: var(--dark);
  font-family: monospace;
  font-weight: bold;
  line-height: 1.5;
  margin: 0;
}
main {
  max-width: 1500px;
  margin: 10vh auto;
}
header {
  background: var(--course);
  color: var(--dark);
  height: 15vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
img{
  max-height: 160px;
}
h1 {
  font-size: 5em;
}
h2 {
  color: white;
  font-size: 2em;
  margin-top: 1.5em;
}
h3{
  color: white;
  font-size: 1.5em;
}

h3:focus{
  text-decoration: underline 5px red;
}

output{
  color: white;
}

.bubble{
  font-size: 2em;
}

#table3{
  color: black;
  border-width:0 0 3px 3px;
  border-style:solid;
  border-color: red;
  width: 100%;
  font-size: 1.5em;
}

#table3 th{
  background-color: lightgrey;
}

#table3 th, #table3 td{
  border-width:3px 3px 0 0;
  border-style:solid;
  border-color:red;

}

#table3 th:focus{
  background-color: springgreen;
}

#table3 tr:focus{
  background-color: springgreen;
}

#table3 td:focus{
  background-color: springgreen;
}

#table2{
  border-width:0 0 2px 2px;
  border-style:solid;
  border-color: yellow;
  color: white;
  width: 50%;
}

#table2 th, #table2 td{
  border-width:1px 1px 0 0;
  border-style:solid;
  border-color:yellow;
}

#table2 th:focus{
  color: black;
}

#table2 tr:focus{
  color: black;
}

#table2 td:focus{
  color: black;
}

#table1{
  font-size: 1.5em;
  width:100%;
  border-width:0 0 4px 4px;
  border-style:solid;
  border-color: red;
  color: var(--light);
}

#table1 th{
  background: #666666;;
  color:#fff;
}

#table1 th:focus{
  background-color: orange;
  color: black;

}

#table1 tr:focus{
  background-color: orange;
  color: black;

}

#table1 td:focus{
  background-color: orange;
  color: black;
}

#table1 th, #table1 td{
  text-align:center;
  border-width:4px 4px 0 0;
  border-style:solid;
  border-color:red;
  padding:4px 2px;
}
  
.subTotatlRow .sub-total-text{
  text-align:left !important; 
  background-color: #777777;
}

.hidden{
  display: none;
}

.gridBottom{
  display: grid;
  grid-template-rows: auto 10%;
}

.bottom{
  /* margin-top: 100px; */
  grid-row-start: 2;
  grid-row-end: 2;
  justify-self: start;
}

#bigAssButton{
  margin-top: 30px;
  width: 500px;
  height: 200px;
  background-color: orange;
  border-color: red;
  border-width: 5px;
  font-size: 10em;
  font-weight: bold;
}

button{
  width: 200px;
  height: 50px;
  background-color: orange;
  border-color: red;
  border-width: 5px;
  font-size: 1em;
  font-weight: bold;
}

button:focus{
  border-color: ghostwhite;
  text-decoration: underline 5px red;
}

label{
  min-height: 170px;
  padding-top: 15px;
  border-radius: 3px;
  border-color: red;
  border-style: solid;
  float: right;
  padding: 7px;
}

input[type=range] {
  -webkit-appearance: none;
  margin: 5px 0;
  width: 100%;
}
input[type=range]:focus {
  outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 15px;
  cursor: pointer;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  background: red;
  border-radius: 1px;
  border: 0.2px solid #010101;
}
input[type=range]::-webkit-slider-thumb {
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  border: 1px solid #000000;
  height: 45px;
  width: 20px;
  border-radius: 3px;
  background: #ffffff;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -16px;
}

.settingButton{
  width: 100%;
  font-size: 1.5em;
}