:root {
  color-scheme: light;
  --page: #f6f4ef;
  --swatch: #2457ff;
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  display: grid;
  place-items: center;
  min-height: 100%;
  background: var(--page);
}

main {
  display: grid;
  place-items: center;
  width: min(100%, 36rem);
  padding: 2rem;
}

.swatch {
  width: min(68vw, 18rem);
  aspect-ratio: 1;
  background: var(--swatch);
  border: 1px solid rgb(23 32 51 / 18%);
  border-radius: 8px;
  box-shadow:
    0 1rem 2.5rem rgb(23 32 51 / 16%),
    inset 0 1px 0 rgb(255 255 255 / 24%);
}