: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;
  --private-color: #f9f8e6;
}

/* Дефолтный инвертированный тёмный режим */
.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;
}

a {
  /* Чтобы ссылки работали при оверлапе другими элементами */
  position: relative;
  z-index: 1;
}

.image {
  width: min(100%, var(--w, 100%));
}

.image > picture,
.image > video,
.image > iframe {
  background-size: 100%; /* Чтобы превью занимало весь picture */
  display: block;
  width: 100%;
  height: inherit;
  aspect-ratio: var(--ar, auto);
}
.image > iframe {
  border: 0;
}
.image > picture > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.image > video {
  object-fit: cover;
}

@media screen and (max-width: 800px) {
  .image > picture,
  .image > video,
  .image > iframe {
    aspect-ratio: var(--ar-mobile, var(--ar, auto));
  }
}

.image.loading {
  /* Не выпускаем анимацию загрузки видео за пределы */
  overflow: hidden;
}
.image:not(.browser).loading {
  /* Плейсхолдер при загрузке. Кроме браузеров, там и так видно и чтобы не ломать цвет шапки */
  background-color: var(--box-color);
}

/* Гигиена таблиц */
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;
}

ul, ol {
  padding-left: 0;
}

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

/* Убрать чёрные полосы у конкретного видео */
.cropSides.image:has(> video) {
  overflow: hidden;
}
.cropSides.image > video {
  scale: 1.003;
}


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

/* Переносить слова по слогам */
.hyphenate {
  hyphens: auto;
}

/* Не переносить блок */
.nowrap {
  white-space: nowrap;
}

/* Свойство hidden всегда скрывает, чтобы не переписывалось другими display */
[hidden] {
  display: none !important;
}