:root {
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: auto;

  --text-color: black;
  --background-color: white;
  --hover-color: red;
  --box-color: #f7f7f7;
  --browser-color: #ebecec;
}

/* Дефолтный инвертированный тёмный режим */
.darkmode {
  --text-color: white;
  --background-color: black;
}

body {
  position: relative;
  overflow-x: hidden;
}

body,
h1,
h2,
h3,
p,
a,
ul,
ol {
  margin: 0;
  font-weight: normal;
  text-decoration: none;
}

img, picture, video {
  /* Чтобы контент растягивался на весь контейнер */
  object-fit: cover;
}

.image > img,
.image > picture,
.image > video {
  width: 100%;
  /* ↑↑↑↑ temp!!!!!! Скриптом задавать аспект ратио, тогда убрать стиль */
  max-width: 100.1%;
  /* .1 чтобы не торчали волосы по краям из-за скейла */
  display: block;
}

.image > picture {
  /* Чтобы превью занимало весь picture */
  background-size: 100%;
}
.image > picture > img {
  /* Ограничиваем превью внутри picture */
  width: 100%;
}

/* Не выпускаем анимацию загрузки видео за пределы */
article .image.loading {
  overflow: hidden;
}

/* Гигиена таблиц */
table {
  border-collapse: collapse;
}

td {
  text-align: left;
  vertical-align: top;
}

thead th {
  text-align: left;
  vertical-align: bottom;
}

/* Видимость от ширины */
@media screen and (max-width: 800px) {
  .desktopOnly {
    display: none !important;
  }
}

@media screen and (min-width: 801px) {
  .mobileOnly {
    display: none !important;
  }
}

/* Гигиена списков */
ul {
  list-style: none outside;
  padding-left: 0;
}

/* Фон блоков в тёмной теме */
article .darkmode {
  background: var(--background-color);
}

/* Баг с обводкой видео в сафари на Айфоне 12 мини */
video {
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
}

/* Скрытие всех блоков .randomize, пока скрипт не сработал */
body:not(.ready) .randomize {
  visibility: hidden;
}