html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
body {
  display: grid;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%230002' fill-opacity='0.4'%3E%3Cpath d='M0 38.59l2.83-2.83 1.41 1.41L1.41 40H0v-1.41zM0 1.4l2.83 2.83 1.41-1.41L1.41 0H0v1.41zM38.59 40l-2.83-2.83 1.41-1.41L40 38.59V40h-1.41zM40 1.41l-2.83 2.83-1.41-1.41L38.59 0H40v1.41zM20 18.6l2.83-2.83 1.41 1.41L21.41 20l2.83 2.83-1.41 1.41L20 21.41l-2.83 2.83-1.41-1.41L18.59 20l-2.83-2.83 1.41-1.41L20 18.59z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 100px;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: auto 1fr auto;
  color-scheme: light dark;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

.outage {
  grid-row: 2;
  grid-column: 2;
  margin: auto;
  font-size: 1.5rem;
  padding: 64px 48px;
  box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.05),
    0 8px 10px -6px rgb(0 0 0 / 0.05);

  background: white;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.outage * {
  margin: 0;
}

.outage img.logo {
  display: block;
  width: 100px;
  margin: -12px -8px;
  margin-bottom: 0;
}

h1 {
  font-weight: 600;
  background: linear-gradient(to right, #ff6739, #ff5f7a);
  background: linear-gradient(
    to right,
    oklch(70% 0.227 37.06),
    oklch(70% 0.242 13.76)
  );
  width: fit-content;
  color: transparent;
  background-clip: text;
}

@media (prefers-color-scheme: dark) {
  body {
    background-color: #111;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23fff3' fill-opacity='0.4'%3E%3Cpath d='M0 38.59l2.83-2.83 1.41 1.41L1.41 40H0v-1.41zM0 1.4l2.83 2.83 1.41-1.41L1.41 0H0v1.41zM38.59 40l-2.83-2.83 1.41-1.41L40 38.59V40h-1.41zM40 1.41l-2.83 2.83-1.41-1.41L38.59 0H40v1.41zM20 18.6l2.83-2.83 1.41 1.41L21.41 20l2.83 2.83-1.41 1.41L20 21.41l-2.83 2.83-1.41-1.41L18.59 20l-2.83-2.83 1.41-1.41L20 18.59z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    color: #eee;
  }
  .outage {
    background-color: #0e0e0e;
  }
}