body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
  line-height: 1.4;
}

.content {
  max-width: 40em;
  margin: auto;
}

a {
  color: #ff0000;
}

td {
  vertical-align: top;
}

input[type="radio"] {
  margin-top: -1px;
  margin-right: 6px;
  vertical-align: middle;
}

.main {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.banner {
  display: none;
  background-color: #bef3f1;
  padding: 0.75em;
  border: 1px solid #000;
  border-radius: 6px;

  justify-content: space-between; /* Distribute items at the ends */
  margin-bottom: 2em;
}

.left-div {
  text-align: left;
}

.right-div {
  text-align: right;
  margin-right: 1em;
  font-size: larger;
  color: rgb(58, 58, 58);
}

.row {
  display: flex;
  flex-direction: row;
}

.center {
  justify-content: center;
}

.clock {
  display: flex;
  text-align: center;
  justify-content: center;
  margin-bottom: 10px;
}

.clock > div {
  width: 100%;
}

hr.divider {
  width: 100%;
  border-style: solid;
  border-color: #dddddd;

  border-width: 1px;
}

img.gh {
  width: 30px;
  display: block;
  margin: auto;
  margin-top: 25px;
}

.audio-control-group {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  font-size: 130%;
}

.station-info {
  margin-top: 10px;
  width: 100%;
}

.station-select {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.station-option {
  margin-left: 10px;
  margin-right: 10px;
}

.audio-control {
  font-size: 22pt;
}

.play-pause {
  display: flex;
}

.hidden {
  visibility: hidden;
}

.none {
  display: none;
}

#clock {
  font-size: 54pt;
  margin: 0px;
  width: 4em;
  font-family: 'Courier', monospace;
}

@media all and (min-width: 768px) {
  #clock {
    font-size: 70pt;
  }
}