html {
  height: 100%;
  background: #0f1a18;
}

body {
  margin: 0;
  min-height: 100%;
  min-height: 100dvh;
  background: #0f1a18;
}

img {
  display: block;
  height: auto;
}

.grid {
  --major-size: calc(var(--grid-size) * var(--grid-major-every));
  position: fixed;
  top: var(--frame-width);
  left: var(--frame-width);
  box-sizing: border-box;
  width: calc(2 * var(--frame-line) + round(down, 100% - 2 * var(--frame-width) - 2 * var(--frame-line), var(--grid-size)));
  height: calc(2 * var(--frame-line) + round(down, 100dvh - 2 * var(--frame-width) - 2 * var(--frame-line), var(--grid-size)));
  border: var(--frame-line) solid var(--grid-color);
  background-position:
    var(--major-size) 0,
    0 var(--major-size),
    var(--grid-size) 0,
    0 var(--grid-size);
  background-image:
    repeating-linear-gradient(
      to right,
      var(--grid-color) 0,
      var(--grid-color) var(--grid-major-line),
      transparent var(--grid-major-line),
      transparent calc(var(--grid-size) * var(--grid-major-every))
    ),
    repeating-linear-gradient(
      to bottom,
      var(--grid-color) 0,
      var(--grid-color) var(--grid-major-line),
      transparent var(--grid-major-line),
      transparent calc(var(--grid-size) * var(--grid-major-every))
    ),
    repeating-linear-gradient(
      to right,
      var(--grid-color) 0,
      var(--grid-color) var(--grid-line),
      transparent var(--grid-line),
      transparent var(--grid-size)
    ),
    repeating-linear-gradient(
      to bottom,
      var(--grid-color) 0,
      var(--grid-color) var(--grid-line),
      transparent var(--grid-line),
      transparent var(--grid-size)
    );
}

.rb {
  position: fixed;
  top: clamp(
    var(--frame-width),
    var(--rb-logo-offset),
    calc(100dvh - var(--r5-logo-offset) - var(--r5-logo-size) - 6.5rem)
  );
  bottom: calc(var(--r5-logo-offset) + var(--r5-logo-size) + 1rem);
  left: 50%;
  width: min(var(--rb-logo-width), var(--rb-logo-max-width));
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.rb-logo {
  width: auto;
  max-width: 100%;
  height: auto;
  min-width: 0;
  min-height: 0;
  max-height: calc(100% - var(--maintenance-offset) - var(--maintenance-size) - 0.25rem);
  object-fit: contain;
}

.maintenance {
  flex: 0 0 auto;
  margin: var(--maintenance-offset) 0 0;
  color: #3ecc98;
  font-family: system-ui, sans-serif;
  font-size: var(--maintenance-size);
  line-height: 1;
  white-space: nowrap;
}

.r5-logo {
  position: fixed;
  left: 50%;
  bottom: var(--r5-logo-offset);
  width: var(--r5-logo-size);
  transform: translateX(-50%);
}