* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: "Alexandria", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-weight: 400;
}

html {
  box-sizing: border-box;
  font-size: 1px !important;
}

body {
  background-color: #030507;
}

/* Центрирование контента */

.outer {
  display: table;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

.middle {
  display: table-cell;
  vertical-align: middle;
}

.inner {
  margin-left: auto;
  margin-right: auto;
  max-width: 570rem;
  min-width: 360rem;
  padding: 20rem;
}

/* Текстовые элементы */

a, span {
  font-size: 50rem;
  line-height: 55rem;
}

.white {
  color: white;
}

.gray {
  color: gray;
}

.point {
  cursor: pointer;
}

/* Прочее */

/* Плавный переход прозрачности */
.gray,
.gray a,
.white span,
.white a {
  transition: opacity 0.3s ease;
}

/* Утилитарный класс для затемнения */
.dimmed {
  opacity: 0.2 !important;
  transition: opacity 0.3s ease;
}

/* Деформация серого текста */
.gray a span {
  display: inline-block;
  transition: transform 0.3s ease;
}

/* При наведении на белый текст (почта) затемняем остальное */
.inner:has(#mail:hover) .gray,
.inner:has(#mail:hover) .white span {
  opacity: 0.2;
  transition: opacity 0.3s ease;
}

/* При наведении на серый текст затемняем остальное */
.inner.gray-hovered .gray a:not(.active),
.inner.gray-hovered .white span,
.inner.gray-hovered .white a {
  opacity: 0.2;
}