html {
  width: 100vw;
}

body.light {
  --backgroundColor: #ebebeb;
}

body.dark {
  --backgroundColor: #2d2d2d;
}

/*Selector with [class] to raise specificity from (0,0,1) to (0,1,1) and overwrite semantic-css*/
body[class] {
  background-color: var(--backgroundColor);
}

@media (max-aspect-ratio: 4/3) {
  .element.custom {
    background-image: url('/images/croco.png');
  }
}

@media (max-aspect-ratio: 3/4) {
  .element.custom {
    background-image: url('/images/croco.png');
  }
}

@media (min-aspect-ratio: 4/3) {
  .element.custom {
    background-image: url('/images/croco.png');
  }
}