/* Подключение локальных шрифтов */
@font-face {
    font-family: 'CustomFont1';
    src: url('/fonts/N.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'CustomFont2';
    src: url('/fonts/F.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'CustomFont3';
    src: url('/fonts/H.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/* Общий сброс стилей */
* { margin: 0; padding: 0; box-sizing: border-box; }

/* Фон сайта */
body {
  background: url(background.jpg) no-repeat center center fixed;
  background-size: cover;
  color: #ff0000;
  font-family: 'Roboto', Arial, sans-serif;
  overflow-x: hidden;
  min-height: 100vh;
}

/* Новая «шапка» (навигация) */
.navbar {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.0);
  z-index: 1000;
}
.navbar ul {
  display: flex;
  gap: 30px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.navbar a {
  color: #ffffff;
  text-decoration: none;
}
.navbar a:hover {
  color: #ff0000;
}
/* Стиль для меню (настройка размеров и оформления) */
.menu-item {
    font-family: 'CustomFont3', sans-serif;
    font-size: 2rem;
    font-weight: bold;
    letter-spacing: 4px;
    text-transform: uppercase;
    text-shadow: 0 0 20px blue;
    transition: transform 0.3s, text-shadow 0.3s;
}
/* Баннер */
.banner {
  position: relative;
  width: 100%;
  height: 20vh;
  margin-top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.banner::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background: url('head.gif') no-repeat center center/cover;
  opacity: 0.4;
  z-index: 0;
  margin-top: 55px;
}
/* Стиль для WC4EVER */
.wc4ever {
    font-family: 'CustomFont3', sans-serif;
    font-size: 11rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 100px;
    color: black;
    text-shadow: 0 0 15px white, 0 0 30px white, 0 0 45px white;
    margin-top: 100px;
}
@keyframes glow {
    0% { text-shadow: 0 0 10px white, 0 0 20px white, 0 0 30px white; }
    100% { text-shadow: 0 0 20px white, 0 0 40px white, 0 0 60px white; }
}
/* Подзаголовок с анимацией букв */
.banner-subtitle {
  position: relative;
  z-index: 2;
  font-size: 1.8rem;
  font-weight: bold;
  margin-top: 10px;
  text-align: center;
}
.letter-container {
  display: inline-block;
  animation: glowEffect 10s infinite;
}
.letter {
  opacity: 0;
  display: inline-block;
  animation: appearAndVanish 10s infinite;
  animation-delay: calc(var(--i) * 0.2s);
}
@keyframes appearAndVanish {
  0% { opacity: 0; transform: translateY(20px); }
  30% { opacity: 1; transform: translateY(0); }
  60% { opacity: 1; transform: translateY(0); }
  80% { opacity: 0; transform: translateY(-20px); }
}
@keyframes glowEffect {
  70% { text-shadow: 0 0 20px #ff0000; }
}


.navbar a {
  color: #ffffff;
  opacity: 1;
  transition: opacity 0.7s ease !important;
}

body.sidebar-open .navbar a {
  opacity: 0;
}
/* Стили для модального окна */
.modal {
  display: none;               /* Скрыто по умолчанию */
  position: fixed;
  z-index: 2000;               /* Поверх всех элементов */
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  overflow: auto;
  background: rgba(0, 0, 0, 0.5);  /* Полупрозрачный чёрный фон */
}
.footer {
  background: rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);
  color: #fff;
  text-align: center;
  padding: 10px 20px;
  position: relative;
  width: 100%;
  font-family: 'CustomFont3', sans-serif;
}
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  flex-direction: column;
}

.footer {
  margin-top: auto; /* Футер всегда будет прижат вниз */
}

/*----------------------------------------------*/


/* HTML и BODY оба скрывают скролл */
html, body {
  scrollbar-width: none;            /* Firefox */
  -ms-overflow-style: none;         /* IE, Edge */
  overflow-y: scroll;               /* оставить scroll, чтобы не прыгала вёрстка */
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  width: 0px;
  height: 0px;
  display: none;
}