body {
  background-color: black;
  color: lightgrey;
  font-size: 5vw;
  font-family: 'Roboto', sans-serif;
}

.pips {
  font-size: 6.5vw;
}

.piplabel {
  font-size: 4vw;
  font-family: 'Roboto Mono', monospace;
}

textarea {
  width: 100%;
  height: 75%;
  font-size: 4vw;
  font-family: 'Roboto Mono', monospace;
}

#controlgridmini {
  height: 20vh;
  display: grid;
  grid-gap: 5px;
  grid-template: repeat(4, 1fr) / repeat(5, 1fr);
  grid-auto-flow: column;
}

#controlgridfull {
  height: 85vh;
  display: grid;
  grid-gap: 5px;
  grid-template: repeat(4, 1fr) / repeat(5, 1fr);
  grid-auto-flow: column;
}

#controlgridfull textarea {
  height: 95%;
}

#bigtextgrid {
  grid-column: 1 / span 5;
  grid-row: 1 / span 3;
}

.log-date {
  margin-top: 1em;
  font-weight: bold;
  font-size: 6vw;
}

#log-entries {
  font-family: 'Roboto Mono', monospace;
  font-size: 5vw;
}

.log-entry {
  margin-top: 0.33em;
  margin-bottom: 0.33em;
}

#logs-button-grid {
  height: 5vh;
  display: grid;
  grid-gap: 5px;
  grid-template: repeat(1, 1fr) / repeat(4, 1fr);
  grid-auto-flow: column;
}

.center {
  text-align: center;
}

#export-button {
  background: #868585;
  border-radius: 999px;
  box-shadow: #868585 0 10px 20px -10px;
  box-sizing: border-box;
  color: #FFFFFF;
  cursor: pointer;
  font-size: 4vw;
  opacity: 1;
  outline: 0 solid transparent;
  padding: 8px 18px;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  width: fit-content;
  word-break: break-word;
  border: 0;
}

.day-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.fancy-button {
  /* android blue emoji is ~ #027dfd */
  /* android red emoji is ~ #ff0000 */
  background: #868585;
  border-radius: 999px;
  box-shadow: #868585 0 10px 20px -10px;
  box-sizing: border-box;
  color: #FFFFFF;
  cursor: pointer;
  font-size: 4vw;
  opacity: 1;
  outline: 0 solid transparent;
  padding: 8px 18px;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  width: fit-content;
  word-break: break-word;
  border: 0;
}

.fancy-button:active {
  background: #e9e2e2;
  transform: translateY(5px);
}


.thick {
  display: inline-block;
  width: 85%;
  height: 100%;
  text-align: center;
  font-size: 4vw;
}



.mood-button {
  font-size: 5vmin;
  height: 93.5%;
}

#equanimity-button {
  font-size: 14vmin;
  height: 93.5%;
}

#mood-button-grid {
  height: 17vh;
  display: grid;
  grid-gap: 5px;
  grid-template: repeat(1, 1fr) / repeat(7, 1fr);
  grid-auto-flow: column;
}

#below-mood-button-grid {
  height: 5vh;
  display: grid;
  grid-gap: 5px;
  grid-template: repeat(1, 1fr) / repeat(3, 1fr);
  grid-auto-flow: column;
}



#backdate {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  display: inline-block;
  vertical-align: top;
  margin: auto;
  width: 100%;
}

.backdate-child {
  padding: 8px 18px; 
}

.backdate-child table {
  margin: auto;
  width: 100%;
}

.write-button {
  height: 3.3em;
}


.quick-meds-nav {
  height: 5vh;
  width: 30%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  display: inline-block;
  vertical-align: top;
  margin: 1vh;
}


#quick-meds-container {
  position: absolute;
    top: 5%;
    right: 0;
    left: 0;
    bottom: 0;
}

#quick-meds-left {
  position: absolute;
  top: 5%;
  right: 62%;
  left: 0;
  bottom: 0;
}

#quick-meds-right {
  position: absolute;
  top: 5%;
  right: 0;
  left: 38%;
  bottom: 0;
}

#quick-meds-grid {
  display: grid;
  grid-gap: 5px;
  grid-template: repeat(15, 1fr) / repeat(1, 1fr);
  grid-auto-flow: column;
}

.quick-meds-button {
  height: 4vh;
  margin-top: 0.33em;
  margin-bottom: 0.33em;
}

.quick-meds-button-inner {
  width: 90%;
}


.quick-meds-log {
  margin-top: 0.33em;
  margin-bottom: 0.33em;
}

.quick-meds-add-button {
  width: 40%;
}