body.moon-maniac {
  background:
    radial-gradient(circle at 50% 250px, rgba(3, 201, 147, 0.18), transparent 34%),
    radial-gradient(circle at 76% 330px, rgba(214, 0, 41, 0.22), transparent 36%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.18), #030706 920px),
    url(../img/moon-maniac-hero.png) center top / 1920px auto no-repeat,
    #030706;
  color: #d8ece7;
}

body.moon-maniac a {
  color: #23ffc3;
}

body.moon-maniac .wrapper {
  width: min(1200px, calc(100vw - 30px));
}

body.moon-maniac .header {
  min-height: 650px;
}

body.moon-maniac .top-panel {
  top: 18px;
  min-height: 76px;
  background:
    linear-gradient(180deg, rgba(8, 25, 24, 0.92), rgba(4, 10, 11, 0.78)),
    linear-gradient(90deg, transparent, rgba(0, 255, 184, 0.18), transparent);
  border: 1px solid rgba(177, 205, 198, 0.45);
  box-shadow:
    inset 0 0 0 1px rgba(0, 255, 184, 0.12),
    0 0 28px rgba(0, 0, 0, 0.75),
    0 0 28px rgba(0, 255, 184, 0.15);
}

body.moon-maniac .menu a {
  height: 76px;
  line-height: 76px;
  color: #f6fbf8;
  letter-spacing: 0;
  text-shadow: 0 2px 4px #000, 0 0 10px rgba(0, 255, 190, 0.4);
}

body.moon-maniac .menu a:hover,
body.moon-maniac .menu .active a {
  color: #ffffff;
}

body.moon-maniac .menu a:hover:after,
body.moon-maniac .menu .active a:after {
  bottom: 17px;
  background: linear-gradient(90deg, transparent, #00ffc0, #d8002d, transparent);
  box-shadow: 0 0 18px rgba(0, 255, 192, 0.85);
}

body.moon-maniac .topPanel__buttons {
  align-items: center;
}

body.moon-maniac .button,
body.moon-maniac button,
body.moon-maniac .buttonDark,
body.moon-maniac .button-login,
body.moon-maniac .button-small {
  background:
    linear-gradient(180deg, rgba(11, 80, 68, 0.96), rgba(2, 30, 28, 0.98));
  border: 1px solid rgba(191, 220, 214, 0.68);
  box-shadow:
    inset 0 0 16px rgba(0, 255, 190, 0.2),
    0 0 20px rgba(0, 255, 190, 0.12),
    0 8px 22px rgba(0, 0, 0, 0.45);
  text-shadow: 0 2px 4px #000;
}

body.moon-maniac .button:hover,
body.moon-maniac button:hover,
body.moon-maniac .buttonDark:hover,
body.moon-maniac .button-login:hover {
  border-color: #00ffc0;
  box-shadow:
    inset 0 0 22px rgba(0, 255, 190, 0.34),
    0 0 24px rgba(0, 255, 190, 0.32);
}

body.moon-maniac .logo {
  left: 50%;
  top: 122px;
  transform: translateX(-50%);
  width: min(700px, 70vw);
  text-align: center;
  filter: drop-shadow(0 24px 34px rgba(0, 0, 0, 0.9));
}

body.moon-maniac .logo img {
  width: 100%;
  height: auto;
}

body.moon-maniac .leaves,
body.moon-maniac .smog {
  opacity: 0.42;
}

body.moon-maniac .sparks-sparks {
  filter: hue-rotate(105deg) saturate(1.2);
}

body.moon-maniac .content {
  margin-top: -160px;
}

body.moon-maniac .fast-button {
  justify-content: center;
  gap: 12px;
  align-items: stretch;
  margin-bottom: 18px;
}

body.moon-maniac .download-block,
body.moon-maniac .status-block {
  position: relative;
  top: auto;
  right: auto;
  left: auto;
  width: 390px;
  height: 122px;
  margin: 0;
  background:
    linear-gradient(180deg, rgba(8, 30, 29, 0.94), rgba(1, 10, 12, 0.94));
  border: 1px solid rgba(193, 210, 207, 0.55);
  box-shadow:
    inset 0 0 20px rgba(0, 255, 184, 0.14),
    0 0 24px rgba(0, 0, 0, 0.72);
}

body.moon-maniac .download-block:before,
body.moon-maniac .status-block:before,
body.moon-maniac .top-content:before,
body.moon-maniac .block-widget:before,
body.moon-maniac .page-content:before {
  content: "";
  position: absolute;
  inset: 8px;
  pointer-events: none;
  border: 1px solid rgba(0, 255, 190, 0.18);
}

body.moon-maniac .download-block a {
  width: 100%;
  padding: 34px 24px 0;
  text-align: center;
  color: #fff;
  font-size: 30px;
}

body.moon-maniac .download-block span {
  background: linear-gradient(#ffffff, #bceee1 54%, #d50031);
  -webkit-background-clip: text;
  text-shadow: none;
}

body.moon-maniac .download-block p {
  color: #72ffe0;
  text-transform: uppercase;
}

body.moon-maniac .server,
body.moon-maniac .server-bottom {
  padding: 33px 28px;
  background: none;
}

body.moon-maniac .server .status-online {
  color: #00ffc0;
  text-shadow: 0 0 12px rgba(0, 255, 190, 0.85);
}

body.moon-maniac .progress-bar-webengine:after {
  background-color: #111615;
}

body.moon-maniac .progress-bar-webengine span {
  background: linear-gradient(90deg, #00b480, #00ffc0, #d60030);
  box-shadow: 0 0 16px rgba(0, 255, 190, 0.4);
}

body.moon-maniac .top-content,
body.moon-maniac .block-widget,
body.moon-maniac .page-content {
  position: relative;
  padding: 10px;
  background:
    linear-gradient(180deg, rgba(5, 24, 23, 0.92), rgba(3, 10, 12, 0.94));
  border: 1px solid rgba(196, 212, 208, 0.46);
  box-shadow:
    inset 0 0 26px rgba(0, 255, 190, 0.08),
    0 14px 38px rgba(0, 0, 0, 0.52);
}

body.moon-maniac .page-content {
  margin-bottom: 12px;
  color: #d8ece7;
}

body.moon-maniac .swiper-container,
body.moon-maniac .swiper-slider {
  width: 585px;
}

body.moon-maniac .swiper-slider .swiper-slide h2 {
  background: rgba(2, 14, 14, 0.74);
}

body.moon-maniac .widget-fon,
body.moon-maniac .widget-fon-guilds,
body.moon-maniac .widget-fon-discussions {
  width: calc((100% - 6px) / 3);
  background:
    linear-gradient(180deg, rgba(7, 32, 29, 0.95), rgba(2, 11, 12, 0.96));
  border: 1px solid rgba(188, 211, 206, 0.38);
}

body.moon-maniac .block-widget-title {
  padding-top: 36px;
  color: #ffffff;
  text-shadow: 0 0 14px rgba(0, 255, 190, 0.4);
}

body.moon-maniac .top-list {
  color: #d8ece7;
}

body.moon-maniac .top-list a {
  color: #ffffff;
}

body.moon-maniac .top-list:hover {
  background-color: rgba(0, 255, 190, 0.08);
  border-bottom-color: rgba(0, 255, 190, 0.22);
}

body.moon-maniac .footer {
  margin-top: 18px;
  padding-bottom: 44px;
  background:
    linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.52));
}

body.moon-maniac .footer-block-coperite {
  color: #a9c7c1;
}

body.moon-maniac .footer-block-coperite a,
body.moon-maniac .f-menu li a:hover {
  color: #00ffc0;
}

body.moon-maniac .soc-block a,
body.moon-maniac .toTop {
  background-color: #071616;
  border-color: #00ffc0;
  box-shadow: inset 0 0 12px rgba(0, 255, 190, 0.45);
}

body.moon-maniac .modal-content,
body.moon-maniac .widget-account-panel,
body.moon-maniac .sidebar,
body.moon-maniac .panel-sidebar {
  background-color: rgba(2, 14, 14, 0.96);
}

body.moon-maniac input,
body.moon-maniac textarea,
body.moon-maniac select,
body.moon-maniac .input-re {
  background: rgba(0, 0, 0, 0.46);
  border: 1px solid rgba(0, 255, 190, 0.28);
  color: #ffffff;
}

body.moon-maniac ::-webkit-input-placeholder {
  color: #a9c7c1;
}

@media (max-width: 1240px) {
  body.moon-maniac {
    background-size: auto 650px, auto, auto, 1500px auto, auto;
  }

  body.moon-maniac .header {
    min-height: 590px;
  }

  body.moon-maniac .content {
    margin-top: -115px;
  }

  body.moon-maniac .fast-button {
    flex-wrap: wrap;
  }

  body.moon-maniac .download-block,
  body.moon-maniac .status-block {
    width: min(390px, 100%);
  }

  body.moon-maniac .top-content,
  body.moon-maniac .block-widget {
    flex-wrap: wrap;
  }

  body.moon-maniac .swiper-container,
  body.moon-maniac .swiper-slider {
    width: 100%;
  }

  body.moon-maniac .widget-fon,
  body.moon-maniac .widget-fon-guilds,
  body.moon-maniac .widget-fon-discussions {
    width: 100%;
    margin-left: 0;
    margin-top: 8px;
  }
}