/**, *::before, *::after {
  box-sizing: border-box;
}*/

/* https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion */
/* https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior */
@media (prefers-reduced-motion: no-preference) {
  :root {
    scroll-behavior: smooth;
  }
}

body {
  background: var(--l1-bg);
  color: var(--text);

  margin: 0;

  /* https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/ */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
}

.container {
  width: min(100%, 992px);
  margin: 0 auto; /* Center the container */
}

button {
  background: var(--l4-bg);
  border: 1px solid var(--l4-border);
}

.card {
  background: var(--l2-bg);
  border: 1px solid var(--l2-border);
}

.header {
  background: var(--l3-bg);
  border-bottom: 2px solid var(--l3-border);
}

.modal {
  background: var(--l5-bg);
  border: 1px solid var(--l5-border);
}

offcanvas-panel .header {
  display: flex;

  background: var(--l3-bg);
  border-bottom: 2px solid var(--l3-border);

  user-select: none;
}

offcanvas-panel > .header > :first-child {
  flex-grow: 1;
}
offcanvas-panel > .header > button[data-dismiss] {
  cursor: pointer;
  border-radius: 50%;

  border: none;
  outline: none;

  width: 20px;
  height: 20px;

  display: flex;
  justify-content: center;
  align-items: normal;
}





offcanvas-panel .footer {
  display: flex;

  background: var(--l3-bg);
  border-top: 2px solid var(--l3-border);
}

.card {
  /*color: var(--text);*/
  margin-bottom: 2 rem;
  border: 1px solid var(--border);
  background-color: var(--background);

  border-radius: 8px;
  padding: 1rem;

  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.card-details {
  padding: var(--rounded);

  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}

.card-details a {
  align-self: flex-start;
}

.card > img {
  border-top-left-radius: var(--rounded);
  border-top-right-radius: var(--rounded);
  color: var(--link);
  background: var(--l3-fg);
  outline: none;
  border: none;
}

.card button {
  color: var(--link);
  background: var(--l3-fg);
  border-radius: 4px;
  outline: none;
  border: none;
}


















 .preview {
    box-sizing: border-box;

   --scale: var(--preview-scale, 0.5);              /* change this if you want a different scale */

   transform: scale(var(--scale));
   transform-origin: top left;

   width: calc(100% / var(--scale));
   height: calc(100% / var(--scale));

   overflow: auto;            /* show scrollbars if content exceeds viewport */

   /* bonus*/
   > * { border-radius: calc(var(--border-radius) / var(--scale)) }
 }