html {
  height: 100%;
}

body {
  padding-top: env(safe-area-inset-top, 1em);
  padding-right: env(safe-area-inset-right, 1em);
  padding-bottom: env(safe-area-inset-bottom, 1em);
  padding-left: env(safe-area-inset-left, 1em);
  background-color: white;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  height: 100%;
  text-align: center;
}

.container {
  display: grid;
  height: 100%;
  grid-template-rows: max-content max-content 1fr min-content;
}

.title {
  grid-row: 1;
}

.message {
  grid-row: 2;
}

.caption {
  grid-row: 4;
}

@media (prefers-color-scheme: dark) {
  body {
    background-color: #202124;
    color: white;
  }
}

@media (horizontal-viewport-segments: 2) {
  .container {
    grid-template-rows: 1fr min-content 1fr;
    grid-template-columns: env(viewport-segment-width 0 0) calc(env(viewport-segment-left 1 0) - env(viewport-segment-width 0 0)) env(viewport-segment-width 1 0);
  }

  .title {
    grid-row: 2;
  }

  .message {
    grid-row: 2;
    grid-column: 3;
  }

  .caption {
    grid-row: 3;
    grid-column: 3;
    align-self: end;
  }

  .title {
    grid-row: 2;
    grid-column: 1;
  }

  .hinge {
    /* background-color: darkgreen; */
    grid-row: 1 / span 3;
    grid-column: 2;
  }
}