<section>
  <div class="box"></div>
</section>

<section data-theme="dark">
  <div class="box"></div>
</section>

/* -------------------------------- 

💡 Great-looking CSS shadows in 3 steps
🔗 https://codyhouse.co/nuggets/beautiful-css-shadows

-------------------------------- */

:root {
  --color-bg: hsl(0, 0%, 100%);
  --color-bg-light: hsl(0, 0%, 100%);
}

/* edit the variables in dark mode */
[data-theme="dark"] {
  --color-bg: hsl(232, 11%, 15%);
  --color-bg-light: hsl(233, 8%, 19%);
}

.box {
              /* 1. inner glow - for dark mode 👇 */
  box-shadow: inset 0 0 0.5px 1px hsla(0, 0%, 100%, 0.1),
              /* 2. shadow ring 👇 */
              0 0 0 1px hsla(230, 13%, 9%, 0.075),
              /* 3. multiple soft shadows 👇 */
              0 0.3px 0.4px hsla(230, 13%, 9%, 0.02),
              0 0.9px 1.5px hsla(230, 13%, 9%, 0.045),
              0 3.5px 6px hsla(230, 13%, 9%, 0.09);
  
  width: 100%;
  height: 100%;
  max-width: 50%;
  max-height: 50%;
  aspect-ratio: 1/1;
  background-color: var(--color-bg-light);
  border-radius: 12px;
}

/* demo stuff */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

section {
  background-color: var(--color-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

@media (min-width: 42.5rem) {
  body {
    flex-direction: row;
  }
  
  section {
    width: 50%;
  }
}