:root {
  color-scheme: light;
  background: #d1d3d5;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-width: 0;
  min-height: 100%;
}

body {
  background-color: #d1d3d5;
  background-image:
    linear-gradient(115deg,
      rgb(255 255 255 / 0%) 8%,
      rgb(255 255 255 / 34%) 31%,
      rgb(255 255 255 / 0%) 49%,
      rgb(90 96 102 / 7%) 71%,
      rgb(255 255 255 / 22%) 100%),
    linear-gradient(164deg,
      #d7d9db 0%,
      #c7c9cc 24%,
      #e6e7e8 46%,
      #c7cace 72%,
      #d9dbdd 100%);
}

main {
  display: grid;
  place-items: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: max(24px, env(safe-area-inset-top))
           max(24px, env(safe-area-inset-right))
           max(24px, env(safe-area-inset-bottom))
           max(24px, env(safe-area-inset-left));
}

.logo {
  display: block;
  width: min(78vw, 1100px);
  max-width: 100%;
  max-height: 66svh;
  height: auto;
  object-fit: contain;
}

@media (max-width: 600px) {
  .logo {
    width: 88vw;
  }
}