:root {
  color-scheme: light;
  --viewport-width: 100vw;
  --viewport-height: 100vh;
  --logo-width: min(52vw, 640px);
}

* { box-sizing: border-box; }

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #68b8d7;
}

#home {
  position: fixed;
  inset: 0;
  width: var(--viewport-width);
  height: var(--viewport-height);
  isolation: isolate;
}

#clouds {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: linear-gradient(180deg, #68b8d7, #adc1de 72%, #ffffff);
}

#clouds canvas { display: block; }

.brand {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  pointer-events: none;
}

#logo {
  display: block;
  width: var(--logo-width);
  max-width: calc(100% - 48px);
  height: auto;
  filter: drop-shadow(0 0 2px #ffffff)
          drop-shadow(0 0 8px #ffffffe6)
          drop-shadow(0 0 18px #ffffffb3);
  user-select: none;
  -webkit-user-drag: none;
}