:root {
  --bubble-border: 2px;
  --bubble-length: 48px;
  --bubble-width: 32px;
  --bubble-total-l: calc(var(--bubble-length) + 2 * var(--bubble-border));
  --bubble-total-w: calc(var(--bubble-width) + 2 * var(--bubble-border));

  --gauge-border: 2px;
  --gauge-border-color: gray;
  --gauge-width: 42px;
  --gauge-total: calc(var(--gauge-width) + 2 * var(--gauge-border));
}

* {
  margin: 0;
  padding: 0;
}

/* #region Grid layout */

body {
  display: flex;
  flex-direction: column;
  margin: 8px;
  height: calc(100vh - 16px);
  font-family: sans-serif;
}

#grid {
  flex: 1;
  display: grid;
  gap: 8px;
}

.flat#grid {
  grid-template-columns: var(--gauge-total) 1fr;
  grid-template-rows: var(--gauge-total) 1fr;
}

.up-top#grid {
  grid-template-columns: 1fr;
  grid-template-rows: var(--gauge-total);
}

.up-bot#grid {
  grid-template-columns: 1fr;
  grid-template-rows: 1fr var(--gauge-total);
}

.up-left#grid {
  grid-template-columns: var(--gauge-total);
  grid-template-rows: 1fr;
}

.up-right#grid {
  grid-template-columns: 1fr var(--gauge-total);
  grid-template-rows: 1fr;
}

@media (orientation: portrait) {
  .flat #h-gauge {
    grid-column: 1 / 4;
  }
}

@media (orientation: landscape) {
  .flat #h-gauge {
    grid-column: 2;
  }
  .flat #v-gauge {
    grid-row: 1 / 4;
  }
}

.up-top #v-gauge,
.up-bot #v-gauge,
.up-left #h-gauge,
.up-right #h-gauge {
  display: none;
}

.up-bot #h-gauge {
  grid-row: 2;
}

.up-right #v-gauge {
  grid-column: 2;
}

.up-left #content {
  grid-column: 2;
}

.up-right #content {
  grid-column: 1;
  grid-row: 1;
}

/* #endregion */

.gauge {
  position: relative; /* positioned ancestor for center marks */
  background-color: greenyellow;
  border: var(--gauge-border) solid var(--gauge-border-color);
  border-radius: var(--gauge-width);
}

#h-gauge {
  padding-top: calc(var(--gauge-width) / 2);
  padding-left: calc(var(--bubble-total-l) / 2);
  padding-right: calc(var(--bubble-total-l) / 2);
}

#v-gauge {
  padding-top: calc(var(--bubble-total-l) / 2);
  padding-bottom: calc(var(--bubble-total-l) / 2);
  padding-left: calc(var(--gauge-width) / 2);
}

.bubble-pos {
  width: 0;
  height: 0;
  position: relative;
}

#h-bubble-pos {
  left: 50%;
}

#v-bubble-pos {
  top: 50%;
}

.bubble {
  position: relative;
  background-color: white;
  border: var(--bubble-border) solid lightgray;
  border-radius: var(--bubble-length);
}

#h-bubble {
  width: var(--bubble-length);
  height: var(--bubble-width);
  left: calc(var(--bubble-total-l) / -2);
  top: calc(var(--bubble-total-w) / -2);
}

#v-bubble {
  width: var(--bubble-width);
  height: var(--bubble-length);
  left: calc(var(--bubble-total-w) / -2);
  top: calc(var(--bubble-total-l) / -2);
}

.up-top #h-bubble {
  top: calc(var(--gauge-width) / -2);
  border-top-left-radius: calc(0.8 * var(--bubble-width));
  border-top-right-radius: calc(0.8 * var(--bubble-width));
}

.up-bot #h-bubble {
  top: calc(var(--gauge-width) / 2 - var(--bubble-total-w));
  border-bottom-left-radius: calc(0.8 * var(--bubble-width));
  border-bottom-right-radius: calc(0.8 * var(--bubble-width));
}

.up-left #v-bubble {
  left: calc(var(--gauge-width) / -2);
  border-top-left-radius: calc(0.8 * var(--bubble-width));
  border-bottom-left-radius: calc(0.8 * var(--bubble-width));
}

.up-right #v-bubble {
  left: calc(var(--gauge-width) / 2 - var(--bubble-total-w));
  border-top-right-radius: calc(0.8 * var(--bubble-width));
  border-bottom-right-radius: calc(0.8 * var(--bubble-width));
}

.center-mark {
  position: absolute;
  border: var(--gauge-border) solid var(--gauge-border-color);
}

#h-center-mark {
  width: var(--bubble-length);
  height: var(--gauge-width);
  left: calc(50% - var(--bubble-total-l) / 2);
  top: 0;
  border-top: none;
  border-bottom: none;
}

#v-center-mark {
  width: var(--gauge-width);
  height: var(--bubble-length);
  left: 0;
  top: calc(50% - var(--bubble-total-l) / 2);
  border-left: none;
  border-right: none;
}

#content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
}

#content h1 {
  font-size: 2em;
}

#fullscreen {
  height: var(--gauge-width);
  border: var(--gauge-border) solid var(--gauge-border-color);
  border-radius: var(--gauge-width);
  margin: 8px 0;
  padding: 0 2ch;
  font-size: 1.5em;
  background-color: rgb(196, 196, 196);
}

#fullscreen:hover {
  background-color: rgb(226, 226, 226);
}

#fullscreen:active {
  background-color: rgb(168, 168, 168);
  position: relative;
  top: 3px;
}
