@font-face {
    font-family: "Druk Wide Bold Italic";
    src: url("/static/fonts/Druk Wide Cyr Bold Italic.otf") format("opentype");
    font-weight: 700;
    font-style: italic;
}

@font-face {
    font-family: "Druk Wide Bold";
    src: url("/static/fonts/Druk Wide Cyr Bold.otf") format("opentype");
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: "Druk Wide Heavy Italic";
    src: url("/static/fonts/Druk Wide Cyr Heavy Italic.otf") format("opentype");
    font-weight: 900;
    font-style: italic;
}

@font-face {
    font-family: "Druk Wide Heavy";
    src: url("/static/fonts/Druk Wide Cyr Heavy.otf") format("opentype");
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: "Druk Wide Medium Italic";
    src: url("/static/fonts/Druk Wide Cyr Medium Italic.otf") format("opentype");
    font-weight: 500;
    font-style: italic;
}

@font-face {
    font-family: "Druk Wide Medium";
    src: url("/static/fonts/Druk Wide Cyr Medium.otf") format("opentype");
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: "Druk Wide Super Italic";
    src: url("/static/fonts/Druk Wide Cyr Super Italic.otf") format("opentype");
    font-weight: 800;
    font-style: italic;
}

@font-face {
    font-family: "Druk Wide Super";
    src: url("/static/fonts/Druk Wide Cyr Super.otf") format("opentype");
    font-weight: 800;
    font-style: normal;
}

/* Общие reset и базовые стили */
html, body {
  height: 100%;
  margin: 0;
  overflow-x: hidden; /* запрещаем горизонтальную прокрутку */
  background-color: #232323;
  background-image: url('/static/background.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: scroll;
  color: #e6e6e6;
  font-family: Arial, sans-serif;
  overscroll-behavior: contain;
  touch-action: manipulation;
}


/* Хедер */
header {
  font-family: 'Druk Wide Cyr Bold Italic', Arial, sans-serif;
  position: fixed;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  max-width: 1200px;
  background: rgba(27, 27, 27, 0.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: var(--main-radius);
  border: 1px solid rgba(178, 34, 34, 0.4);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
  padding: 10px 0px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.header-content {
  font-family: 'Druk Wide Cyr Bold Italic', Arial, sans-serif;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: nowrap;
  max-width: 100%;
  padding: 0 0px;
  box-sizing: border-box;
  overflow: hidden;
  justify-content: center;
  width: 100%;
}

.logo {
  height: 3em;
  width: auto;
  flex-shrink: 0;
  border-radius: 0;
  box-shadow: none;
  margin: 0;
}

.title {
  font-family: 'Druk Wide Bold Italic', Arial, sans-serif;
  font-weight: bold;
  color: #b22222;
  user-select: none;
  white-space: nowrap;       /* не переносим */
  overflow: hidden;          /* скрываем выход за пределы */
  text-overflow: ellipsis;   /* многоточие, если не вмещается */
  font-size: clamp(0.5rem, 6vw, 2rem); /* шрифт динамически меняется */
  flex-shrink: 1;            /* позволяет сжиматься */
  max-width: 100%;           /* не вылезает за пределы контейнера */
}

/* Основные стили для main и содержимого */
main {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 40px 20px;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

/* Футер */
footer {
  width: 100%;
  background-color: #1A1A1AFF;
  text-align: center;
  position: relative;
  padding-top: 10px;
  padding-bottom: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: auto;
  font-family: 'Druk Wide Medium Italic', Arial, sans-serif;
}

.footer-box {
  backdrop-filter: blur(10px);
  padding: 10px;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  width: fit-content;
  margin: 0 auto;
}

.footer-box a {
  font-size: 13px;
  color: #ffffff;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.3s ease-in-out;
}

footer p {
  color: #ffffff;
  font-size: 14px;
  margin: 0;
}

/* Адаптив */
@media (max-width: 600px) {
  header {
    padding: 10px 0px;
  }
  .header-content {
    font-size: min(4vw, 1.5rem);
    gap: 10px;
  }
  .logo {
    height: 2rem;
  }
  .title {
    font-size: 1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #b22222;
  }

  h1 {
    font-size: 2rem;
    padding: 0 10px;
  }

  .form-container {
    padding: 10px;
  }

  iframe {
    min-height: 400px;
  }
}