Сергей delphinpro

// Добавить
document.body.style.overflow = 'hidden';

// Убрать
document.body.style.overflow = '';

Подсветка намекает на некорректное значение цвета.

Очевидно перепутали букву l с цифрой 1

На html игры не пишут. Их всегда пишут на javascript
Просто так называют игры, которые для отображения используют холст (canvas)
Такое название сложилось исторически, с тех времен, когда игры в основном писались на флеше. Вот чтобы их как-то обособить игры на js стали называть играми на html5 в противовес флешу.

Сергей Молвов, с has все довольно просто

.vskrytiye__ot:has(.vskrytiye__btn:not(.blue):hover) .vskrytiye__btn.blue {
  /* Стили для второй кнопки при наведении на первую */
}
.vskrytiye__ot:has(.vskrytiye__btn.blue:hover) .vskrytiye__btn:not(.blue) {
  /* Стили для первой кнопки при наведении на вторую */
}

Заморочки с :not из-за того, что наличие класса .blue - единственное различие между кнопками

Однако можно привязаться к последовательности кнопок в html

.vskrytiye__ot:has(.vskrytiye__ot__b:first-child .vskrytiye__btn:hover) .vskrytiye__ot__b:last-child .vskrytiye__btn {
  /* Стили для последней кнопки при наведении на первую */
}
.vskrytiye__ot:has(.vskrytiye__ot__b:last-child .vskrytiye__btn:hover) .vskrytiye__ot__b:first-child .vskrytiye__btn {
  /* Стили для первой кнопки при наведении на последнюю */
}

Но так длиннее получается.

Лучше всего будет дать кнопкам разные классы

.vskrytiye__ot:has(.first-btn:hover) .second-btn {
  /* Стили для второй кнопки при наведении на первую */
}
.vskrytiye__ot:has(.second-btn:hover) .first-btn {
  /* Стили для первой кнопки при наведении на вторую */
}

Но это не будет работать на данный момент в FireFox!

Ничего интересного не вижу.
Вижу сетку 3х3 с вариативными размерами ячеек.
Легко реализуется и адаптируется на гридах.
Возможно сетку нужно будет сделать более детальную:

html, body {
  height: 100%;
}

Открываете файл style.css, ищете 539 строку и удаляете правило.

Как-то так

но не пойму, как 4 блок перенести в 3 колонку сначала?
Использовал данные стили, но 4 блок был на месте 5, и последующие не заполняли свободные ячейки

.box:nth-child(3n) {
 grid-column: span 2
}

У вас повтор идет через пять блоков. Значит должно стоять 5n – каждый пятый
Но применяться должно к 4-му блоку в этой пятерке. Значит нужно добавить смещение + 4
Итог:

.box:nth-child(5n + 4) {
    grid-column: span 2;
}

.element {
  /* width: calc(33.3% - 20px); */
  width: calc((100% - 20px * 2) / 3);
  height: 50px;
  background: black;
}

Или сделать так:

.container {
  width: 500px;
  display: grid;
  grid-gap: 20px;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid green;
}

.element {
  height: 50px;
  background: black;
}

Нет, нельзя

Но можно отобразить текст после загрузки картинки.

<div class="block">
  <img src="..." onload="this.classList.add('loaded')">
  <span>Текст поверх картинки</span>
</div>

.block {
  position: relative;
}
.block span {
  position: absolute;
  display: none;
}
.block img.loaded + span {
  display: block;
}

window.open('https://t.me/durov')

target работает нативно только в ссылках и формах.

<li class="telega">
  <a href ="https://t.me/durov" target="_blank">tg</a>
</li>