table {
  width: 100%;
  border-collapse: collapse;
  text-align: center;
}

tr { 
  height: 50px;
}

tr:nth-child(2n) {
  background-color: lightgrey;
}

td.hidden {
  color: transparent;
}

tr.buttons {
  background-color: white;
}

#content {
    width: 100%;
    max-width: calc(100vh - 340px);
    margin-left: calc(100vw / 2 - 100vh / 2 + 160px);
    height: calc(100vh - 340px);
    max-height: calc(100vw - 10px);
    overflow:hidden;
    font-size: 100px;
}

@media screen and (max-width: 642px) {
  #content {
    margin-left: 0;
  }
}

#content > div {
  text-align: center;
  padding-top: 25%;
  font-size: inherit;
  background-color: rgba(240, 240, 240, 1);
  border: 1px solid black;
  overflow: hidden;
}
#content > .input-div {
  padding-top: 0;
}

#content > div.hidden {
  color: transparent;
}

#content > div > input {
  width:100%;
  height:100%;
  font-size: inherit;
  padding:0;
  margin:0;
  border:0;
  text-align: center;
}

#controls > input {
  margin-left: 5px;
  margin-top: 5px;
  flex: 1;
  height: 39px;
}

#controls {
  flex: 1;
  margin-left: 3%;
  display: flex;
}

#controls > span {
  flex:3;
  display:flex;
  height: 39px;
  margin-top: 5px;
}

#controls > span > * {
  margin-left: 5px;
}
#controls .toggle {
  min-width: 180px;
}
#controls > span > input {
  width: 100%;
  min-width: 60px;
}
#controls > span:first-child {
  margin-left: 0;
}

#mode,
#symbolSwitcher,
#size {
  padding: 10px;
  width: 100%;
  padding: 10px;
}

#size {
  margin-top: 5px;
}

* {
  box-sizing:border-box;
}

#mode,
#symbolSwitcher { flex: 1; }

#mode {
  margin-right: 5px;
}

#modeAndSymbols {
  display: flex;
}

.toggle {
  display:flex;
}
.toggle > input {
  display: none;
}
.toggle > label {
  padding:10px;
  background: lightgrey;
  border: solid grey;
  text-align: center;
  text-overflow: ellipsis;
  overflow: hidden;
} 
.toggle .toggle-one {
  border-radius: 3px 0 0 3px;
  border-width: 1px 0 1px 1px;
  
}
.toggle .toggle-two {
  border-radius: 0 3px 3px 0;
  border-width: 1px 1px 1px 0;
}

.toggle input:checked + label {
  background-color: grey;
}

.togle:active {
  border-color: blue;
}