:root {
  --bg: #EFF7DA;
  --accent-bg: #F7F1DA; 
  --text: black;
  --text-light: #585858;
  --border: #898ea4;
  --accent: teal;
  --accent-hover: #1266e2;
  --accent-text: var(--bg);
  --code: #d81b60;
  --preformatted: #444;
  --marked: #ffdd33;
  --disabled: #efefef;
}

img {
  display: block;
  margin: 0 auto;
  max-height: 500px;
}

.bx-wrapper {
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  border: 0;
}

.bx-wrapper .bx-viewport {
  background: #EFF7DA;
}

/* Dark theme */
@media (prefers-color-scheme: dark) {
  :root,
  ::backdrop {
    color-scheme: dark;
    --bg: #212121;
    --accent-bg: #2b2b2b;
    --text: #dcdcdc;
    --text-light: #ababab;
    --accent: #ffb300;
    --accent-hover: #ffe099;
    --accent-text: var(--bg);
    --code: #f06292;
    --preformatted: #ccc;
    --disabled: #111;
  }
   
  img,
  video {
    opacity: 0.8;
  }

  img {
    display: block;
    margin: 0 auto;
    max-height: 500px;
  }

  .bx-wrapper {
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    border: 0;
  }

  .bx-wrapper .bx-viewport {
    background: #212121;
  }
}