/* === Основа сайта === */
@font-face {
    font-family: "DaMiOne Regular"; /* название семейства шрифтов */
    src: url(/src/fonts/DaMiOne-Regular.ttf); /* ссылка на шрифт */
}

@font-face {
    font-family: "Mainframe Opto";
    src: url(/src/fonts/mainframe-opto-cyrillic.otf);
}

html {
     scroll-behavior: smooth;
     scroll-padding-top: 100px;
}

/* Глобальные переменные */

:root {
  --base-color: #00ffff;
  --secondary-color: #5eb1ff;

  --base-color-darker-5pc: color-mix(in srgb,var(--base-color),#000 5%); 
  --base-color-darker-10pc: color-mix(in srgb,var(--base-color),#000 10%);
  --base-color-darker-15pc: color-mix(in srgb,var(--base-color),#000 15%);
  --base-color-darker-20pc: color-mix(in srgb,var(--base-color),#000 20%);  
  --base-color-darker-25pc: color-mix(in srgb,var(--base-color),#000 25%);
  --base-color-darker-30pc: color-mix(in srgb,var(--base-color),#000 30%);
  --base-color-darker-35pc: color-mix(in srgb,var(--base-color),#000 35%);  
  --base-color-darker-40pc: color-mix(in srgb,var(--base-color),#000 40%);
  --base-color-darker-45pc: color-mix(in srgb,var(--base-color),#000 45%);
  --base-color-darker-50pc: color-mix(in srgb,var(--base-color),#000 50%);
  --base-color-darker-55pc: color-mix(in srgb,var(--base-color),#000 55%);  
  --base-color-darker-60pc: color-mix(in srgb,var(--base-color),#000 60%);     
  --base-color-darker-65pc: color-mix(in srgb,var(--base-color),#000 65%);
  --base-color-darker-70pc: color-mix(in srgb,var(--base-color),#000 70%);
  --base-color-darker-75pc: color-mix(in srgb,var(--base-color),#000 75%);     
  --base-color-darker-80pc: color-mix(in srgb,var(--base-color),#000 80%);
  --base-color-darker-85pc: color-mix(in srgb,var(--base-color),#000 85%);  
  --base-color-darker-90pc: color-mix(in srgb,var(--base-color),#000 90%);     
  --base-color-darker-95pc: color-mix(in srgb,var(--base-color),#000 95%);  

  --secondary-color-darker-5pc: color-mix(in srgb,var(--secondary-color),#000 5%); 
  --secondary-color-darker-10pc: color-mix(in srgb,var(--secondary-color),#000 10%);
  --secondary-color-darker-15pc: color-mix(in srgb,var(--secondary-color),#000 15%);
  --secondary-color-darker-20pc: color-mix(in srgb,var(--secondary-color),#000 20%);  
  --secondary-color-darker-25pc: color-mix(in srgb,var(--secondary-color),#000 25%);
  --secondary-color-darker-30pc: color-mix(in srgb,var(--secondary-color),#000 30%);
  --secondary-color-darker-35pc: color-mix(in srgb,var(--secondary-color),#000 35%);  
  --secondary-color-darker-40pc: color-mix(in srgb,var(--secondary-color),#000 40%);
  --secondary-color-darker-45pc: color-mix(in srgb,var(--secondary-color),#000 45%);
  --secondary-color-darker-50pc: color-mix(in srgb,var(--secondary-color),#000 50%);
  --secondary-color-darker-55pc: color-mix(in srgb,var(--secondary-color),#000 55%);  
  --secondary-color-darker-60pc: color-mix(in srgb,var(--secondary-color),#000 60%);     
  --secondary-color-darker-65pc: color-mix(in srgb,var(--secondary-color),#000 65%);
  --secondary-color-darker-70pc: color-mix(in srgb,var(--secondary-color),#000 70%);
  --secondary-color-darker-75pc: color-mix(in srgb,var(--secondary-color),#000 75%);     
  --secondary-color-darker-80pc: color-mix(in srgb,var(--secondary-color),#000 80%);
  --secondary-color-darker-85pc: color-mix(in srgb,var(--secondary-color),#000 85%);  
  --secondary-color-darker-90pc: color-mix(in srgb,var(--secondary-color),#000 90%);     
  --secondary-color-darker-95pc: color-mix(in srgb,var(--secondary-color),#000 95%);  
}

html {
     scroll-behavior: smooth;
     scroll-padding-top: 100px;
}

body {
  margin: 0; /* внешний отступ на всех четырех сторонах */
  padding: 0; /* внутренний отступ на всех четырех сторонах */
  background-image: url("/src/images/background.webp"); /* фоновое изображение */
  background-size: cover; /* размер фонового изображения */
  background-repeat: no-repeat; /* повторение фонового изображения */
  background-attachment: fixed; /* фиксировано ли фоновое изображение в области просмотра */
  background-position: center center; /* начальная позиция для фонового изображения */
  font-family: 'Mainframe Opto', sans-serif; 
  color: #d6e1ff; /* светлый текст для контраста */
  position: relative; /* позиция по странице */
  min-height: 100vh; /* минимальная высота элемента */
  scrollbar-color: var(--base-color) black;
  scrollbar-width: thin;
}

body::before {
  content: "";
  position: fixed; /* позиция по блоку */
  inset: 0; /* смещение элемента */
  background: rgba(0, 0, 0, 0.3); /* мягкое затемнение */
  z-index: -1; /* позиционирование элемента по оси z */
}

/* === Шапка === */
header {
  background: rgba(0, 0, 0, 0.8); /* полупрозрачный черный */
  color: #00ffff; /* цвет текста */
  padding: 20px; /* внутренний отступ на всех четырех сторонах */
  font-family: 'DaMiOne Regular', sans-serif;
  text-align: center;
  letter-spacing: 0.2em;
  border-bottom: 1px solid #00ffff; /* цвет нижней границы */
}

header h1 {
  margin: 0; /* отступ от элемента */
  font-size: 2.2em; /* размер заголовка */
}

.brandicon-header {
    width: 30vh; /* ширина в зависимости от высоты экрана */
    min-width: 150px;
    margin: 0px; 
}

nav {
  margin-top: 0;
}

nav a {
  color: #8be9fd;
  margin: 0 2vh;
  text-decoration: none;
  font-weight: 700;
  transition: color 0.3s;
  font-size: 0.9em;
}

nav a:hover {
  color: #a78bfa; /* цвет текста */
  text-shadow: 0 0 6px #a78bfa; /* цвет тени от текста */
}

/* Контейнер навигации */
.nav-container {
  display: flex;
  justify-content: space-between;
  align-items: center; /* расположение элементов по центру */
  flex-wrap: wrap;
}

/* Кнопка "бургер-меню" */
.menu-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 2em;
  color: #00ffff;
  cursor: pointer;
}

/* Ссылки навигации */
.nav-links {
  display: flex;
  gap: 1vw;
}

/* === Основной блок === */
.content {
  max-width: 960px;
  margin: 40px auto 140px;
  padding: 20px;
  background-color: rgba(0, 0, 20, 0.5); /* затемнённый блок на фоне */
  border-radius: 10px;
  backdrop-filter: blur(4px); /* мягкое размытие — эффект стекла */
  box-shadow: 0 0 20px rgba(0, 255, 255, 0.05);
  line-height: 25px;
}

.content p {
  text-align: justify;
  transform: scaleY(0.95);
}

b {
    color: var(--secondary-color-darker-5pc);
}

/* Заголовки */
h1, h2, h3 {
  color: #00ffff;
  text-align: center;
}

.hidden {
  display: none;
}

/* Списки */
ul {
  list-style: none;
  padding-left: 0;  
}

ul li {
  margin-bottom: 12px;
}

ul li::before {
  content: "✦";
  color: #A0FFFF;
  margin-right: 8px;
}

ul .multilevel-l1 {
  padding-left: 0px;
}

ul .multilevel-l2 {
  padding-left: 1em;
}

ul .multilevel-l3 {
  padding-left: 1em;
}

ul .multilevel-l4 {
  padding-left: 1em;
}

ul .multilevel-l5 {
  padding-left: 1em;
}

ul .contents {
  font-size: 1.15em;
}

/* Ссылки */
a {
    color:aqua;
}

a:link {
    text-decoration: none;
}

a:visited {
  text-decoration: underline;
}

a:hover {
  text-decoration: dotted;
}

a:active {
  text-decoration: underline;
}

details {
  padding: 10px;
}

/* === Карточки разделов === */
.sections {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  margin-top: 40px;
}

.card {
  background-color: rgba(255, 255, 255, 0.05);
  padding: 20px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  text-align: center;
  transition: 0.3s;
  backdrop-filter: blur(2px);
}

.card:hover {
  box-shadow: 0 0 12px rgba(0, 255, 255, 0.2);
  transform: translateY(-4px);
}

.card a {
  color: #8be9fd;
  text-decoration: none;
  font-size: 1.1em;
}

.card a:hover {
  color: #a78bfa;
  text-shadow: 0 0 6px #a78bfa;
}

/* === Возврат наверх страницы === */
#top{
	position:fixed;
	right:15px;
	bottom:20px;
	opacity:.65;
	height:7%
}

/* === "Пропавший" контент === */

.missing-content {
  display: flex;
  justify-content:center;
}

.missing-content-img {
  width: 45vh;
  min-width: 150px;
  margin-left: 16px; 
  border: 2px solid rgba(0,255,255,0.6);
  border-radius: 10%;
}


/* === Футер === */
footer {
  position: fixed;
  display: flex;
  left: 0;
  right: 0;
  bottom: 0;
  justify-content: center;
  background: rgba(0, 0, 0, 0.8);
  color: #888;
  text-align: center;
  padding: 20px;
  font-size: 0.7em;
  /* /* margin-top: 60px; */
  border-top: 1px solid #00ffff;
  flex-wrap: wrap;
}

.locale-switch-button {
  position: fixed;
  width: 15vh; /* ширина в зависимости от высоты экрана */
  min-width: 50px;
  margin: 0px; 
  border: 1px solid #00ffff;
  border-radius: 15%;
  right: 1vh;
  bottom: 3vh;
}

@media screen and (max-width: 768px) {
  body {
    scrollbar-width: none;
  }

  body::-webkit-scrollbar {
    display: none;
  }
  
  header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    display: inline-block;
    padding: 12px;
    z-index: 990;
  }

  header h1 {
    font-size: 1.6em;
  }

  h2 {
    font-size: 1.5em;
  }

  h3 {
    font-size: 1.2em;
  }

  ul {
    padding-left: 1em;
  }

  ul li {
    font-size: 1em;
    line-height: 1.4em;
  }

  .brandicon-header {
    width: 25vh;
    display: block;
    /* margin-left: auto;  отступ от элемента слева */
    /* margin-right: auto;  отступ от элемента справа */
    z-index: 999;
  }

  nav a {
    display: inline-block;
    margin: 10px 5px;
    font-size: 1.1em;
  }

  .menu-toggle {
    display: flex;
    position: fixed;
    right: 2vh;
    top: 2vh;
    z-index: 992;
  }

  .nav-links {
    display: none;
    flex-direction: column;
    width: 100%;
    text-align: center;
    margin-top: 10px;
  }

  .nav-links.visible {
    display: flex !important;
    position: relative;
    z-index: 991;
  }

  .nav-container {
    display: block;
  }
  
  .dimmed-background::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 500;
    pointer-events: none; /* Разрешает клики сквозь затемнение */
  }

  .filler {
    height: 1px;
    width: 100%;
    z-index: -2;
  }

  .content {
    margin: 90px 10px 150px;
    padding: 15px ;
    /* margin-bottom: 150px; */
  }

  .content p {
    font-size: 1em;
    line-height: 1.5em;
  }

  .card a {
    font-size: 1em;
  }

  .missing-content {
    display: inline-grid;
    justify-items: center;
  }

  .missing-content-img {
    width: 45vw;
    margin: 0;
  }

  footer {
    padding: 15px;
    font-size: 0.8em;
  }

  footer a {
    display: inline-block;
    word-break: break-word;
  }

  .locale-switch-button {
    width: 15vw; /* ширина в зависимости от ширины экрана */
    min-width: 25px;
    right: 1vh;
    bottom: 5vh;
  }
/*
  #top {
    height: 10%;
    right: 10px;
    bottom: 15px;
  }*/
}

@media screen and (max-width: 480px) {
  header h1 {
    font-size: 1.4em;
  }

  .card {
    padding: 15px;
  }

  .card a {
    font-size: 0.95em;
  }

  footer {
    font-size: 0.75em;
    /*padding: 10px;*/
    word-break: break-word;
  }

  footer p {
    margin: 0;
    line-height: 1.4em;
  }

  /* #top {
    height: 12%;
    right: 8px;
    bottom: 10px;
  } */
}