div {
    font-family: "Consolas", monospace;
  }
.mobile-container {
  width: 100%;
  max-width: 400px;
  margin: auto; /* to center the container */

}
div {
  /*debug lines*/
  /*border: 1px solid red;*/
}

.title-bar {
  font-size: 27px;
  font-weight: bold;
  background-color: salmon;
}
.topnav {
  overflow: hidden;
  background-color: #333;
}

.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  /*!*background-color: lightgrey;*! To make all topnav items (including settings button grey)*/
  color: salmon; /* why does this not work on the settings button? */
}

/* color of the active topnav element */
.topnav a.active {
  background-color: lightgrey;
  color: black;
}

/* for the scratch icon we have to adjust the fill instead of the color*/
.icon-scratch path {
  fill: white;
}

.icon-scratch path:hover {
  fill: salmon;
}

.tab-link.active .icon-scratch path {
  fill: black;
}

#settings-button {
  float: right;
  color: white;
  /*padding: 14px;*/
  font-size: 17px;
}

.title-bar, .options, .metronome, .button-bar, .current-session, .explanation, .about {
  padding: 14px 16px;
}
.options, .explanation, .about {
  background-color: lightgrey;
}

.options {
  /*display: none; !* upon loading, the options are not shown. *!*/
  display: grid;
  grid-template-columns: 25% 25% 25% 25%;
}

.n_sect {
  grid-column: 1 / span 2;
}

.n_rep {
  grid-column: 3 / span 2;
}

.timer-options {
  grid-row: 2;
  grid-column: 1 / span 4;
}

.use-interval-timer {
  grid-row: 3;
  grid-column: 1 / span 4;
}

.checkmark-option {
  grid-row: 4;
  grid-column: 1 / span 4;
}

input[type="number"] {
    width: 25pt;
    border-radius: 4px;
    height: 20pt;
    font-size: 1em;
}

.metronome {
  background-color: cyan;
}

.button-bar {
  background-color: steelblue;
}

.current-session {
  background-color: greenyellow;
}



.metronome {
  display: grid;
  grid-template-columns: 35% 30% 35%;
  align-items: center; /* om (o.a.) de knoppen verticaal te centreren */
  text-align: center; /* om (o.a.) de knoppen horizontaal te centreren */
}

.metronome-left {
  grid-row: 1;
  grid-column: 1;
}

.metronome-middle {
  grid-row: 1;
  grid-column: 2;
}

.metronome-right {
  grid-row: 1;
  grid-column: 3;
}

.tempo-slider-div {
  grid-row: 2;
  grid-column: 1 / span 3;
  padding: 10px;
}

#tempo-slider {
  width: 100%;
}

.tempo-change {
  font-family: inherit;
  font-size: 0.8em;
  border-radius: 10px;
  background-color: lightblue;
  height: 20pt;
  width: 22pt;
}
.tempo-change_large {
  font-family: inherit;
  font-size: 0.8em;
  border-radius: 10px;
  background-color: lightblue;
  height: 20pt;
  width: 33pt;
}

#slower {
  text-align: end;
  align-content: center;
}

#faster {
  text-align: start;
  align-content: center;
}
#play-button {
  height: 30pt;
  width: 30pt;
  border-radius: 100%;
  margin: 2px;
}

.button-bar {
  text-align: center; /* om de buttons te centreren */
}
.regular-button {
  font-family: inherit;
  font-size: 1em;
  border-radius: 4px;
  height: 30pt;
  width: 55pt;
}

.square-button {
  font-family: inherit;
  font-size: 1em;
  border-radius: 4px;
  height: 30pt;
  width: 30pt;
}

#add-checkmark-button {
  background-color: greenyellow;
}

#reset-checkmarks-button {
  background-color: red;
}

.instruction {
  text-align: center;
}

.section-number {
  font-size: 70px;
  text-align: center;
  grid-column: 2;
}

.time {
  grid-column: 3;
}

.session-info {
  display: grid;
  grid-template-columns: 35% 30% 35%;
  text-align: center;
}

.footer {
    text-align: center;
}

#progress-bar {
  width: 80%;
}