/* Дефиниране на основни цветови променливи (CSS variables) */
    :root {
      --neon-cyan: #00ffff;     /* Неонов циан */
      --neon-green: #00ffcc;    /* Неонов зелен */
      --neon-pink: #ff66ff;     /* Неонов розов */
      --neon-purple: #cc00ff;   /* Неонов лилав */
      --neon-yellow: #ffcc00;   /* Неонов жълт */
      --neon-blue: #00bfff;     /* Неонов син */
      --neon-red: #ff3366;      /* Неонов червен */
      --neon-orange: #ff9933;   /* Неонов оранжев */
    }
    
    /* Основни стилове за body елемента */
    body {
      color: #e0e0e0;           /* Основен цвят на текста */
      font-family: 'Courier New', Courier, monospace;  /* Моноспачен шрифт за хакерски вид */
      font-size: 17px;          /* Основен размер на шрифта */
      line-height: 1.6;         /* Височина на реда за по-добра четимост */
      margin: 0;                /* Нулиране на външните отстъпи */
      padding: 20px;            /* Вътрешен отстъп */
      display: flex;            /* Flexbox подредба */
      justify-content: center;  /* Центриране на съдържанието хоризонтално */
      min-height: 100vh;        /* Минимална височина - цял екран */
      /* Фоново изображение - може да се смени */
      background: url('../img/aiflux-bg.png') center/cover fixed no-repeat;
      position: relative;       /* Относителна позиция за z-index на децата */
    }

    /* Контейнер за основното съдържание */
    .container {
      max-width: 850px;         /* Максимална ширина на съдържанието */
      width: 100%;              /* Пълна ширина до max-width */
      z-index: 1;               /* Поставя съдържанието над фона */
    }

    /* Анимация за "плуващ" ефект */
    @keyframes float {
      0% { transform: translateY(0px); }   /* Начална позиция */
      50% { transform: translateY(-10px); } /* Преместване нагоре */
      100% { transform: translateY(0px); }  /* Връщане в начална позиция */
    }

    /* Стилове за заглавията h1, h2, h3 */
    h1, h2, h3 {
      text-align: center;        /* Центриране на текста */
      margin-bottom: 20px;      /* Отстъп от долу */
      text-transform: uppercase; /* Главни букви */
      letter-spacing: 2px;      /* Разстояние между буквите */
    }

    /* Специфични стилове за h1 */
    h1 {
      color: var(--neon-cyan);                  /* Цвят от променливата */
      font-size: 2.5rem;                        /* Голям размер на шрифта */
      text-shadow: 0 0 10px var(--neon-cyan),  /* Неонов ефект с сянка */
                   0 0 20px var(--neon-cyan);
      margin-top: 20px;                         /* Отстъп отгоре */
      animation: float 6s ease-in-out infinite;  /* Прилагане на анимацията */
      position: relative;                       /* За позициониране на псевдо елементи */
      background: rgba(0, 0, 0, 0.45);          /* Полупрозрачен черен фон */
      padding: 15px;                            /* Вътрешен отстъп */
      border-radius: 10px;                      /* Заоблени ъгли */
      border: 1px solid var(--neon-cyan);       /* Граница с неонов цвят */
      box-shadow: 0 0 15px rgba(0, 255, 255, 0.3); /* Сянка с неонов ефект */
      backdrop-filter: blur(2px);               /* Леко размазване на фона */
    }

    /* Псевдо елементи за h1 (мълнии отстрани) */
    h1::before, h1::after {
      content: "⚡";             /* Символ мълния */
      position: absolute;       /* Абсолютно позициониране */
      top: 50%;                 /* 50% от височината */
      transform: translateY(-50%); /* Центриране вертикално */
      animation: pulse 1.5s infinite alternate; /* Пулсираща анимация */
    }

    /* Позициониране на лявата мълния */
    h1::before {
      left: -40px;              /* Отместване вляво */
    }

    /* Позициониране на дясната мълния */
    h1::after {
      right: -40px;             /* Отместване вдясно */
    }

    /* Стилове за h2 заглавия */
    h2 {
      font-size: 1.8rem;        /* Размер на шрифта */
      padding-bottom: 10px;     /* Отстъп отдолу */
      border-bottom: 2px solid; /* Граница отдолу */
      position: relative;       /* За позициониране на псевдо елемент */
    }

    /* Допълнителна декоративна линия под h2 */
    h2::after {
      content: "";              /* Празен content за псевдо елемент */
      position: absolute;       /* Абсолютно позициониране */
      bottom: -5px;             /* Позиция под границата */
      left: 50%;                /* 50% от ширината */
      transform: translateX(-50%); /* Центриране хоризонтално */
      width: 50%;               /* Ширина 50% */
      height: 3px;              /* Височина на линията */
      background: currentColor;  /* Цвят същия като текста */
      filter: blur(2px);        /* Леко размазване за неонов ефект */
    }

    /* Стилове за контейнера на снимката */
    .photo {
      display: flex;            /* Flexbox подредба */
      justify-content: center;  /* Центриране хоризонтално */
      margin: 30px 0;           /* Отстъпи отгоре и отдолу */
      position: relative;       /* За позициониране */
    }

    /* Стилове за самата снимка */
    .photo img {
      width: 180px;            /* Ширина */
      height: 180px;           /* Височина (същата като ширината за кръг) */
      border-radius: 50%;       /* Заобляне на ъглите за кръг */
      object-fit: cover;        /* Запълване на пространството без деформация */
      box-shadow: 0 0 20px var(--neon-green), /* Неонова сянка */
                  0 0 40px var(--neon-green);
      border: 3px solid var(--neon-green); /* Неонова граница */
      animation: float 4s ease-in-out infinite; /* Плуваща анимация */
      transition: all 0.3s ease; /* Плавен преход при hover */
      background: rgba(0, 0, 0, 0.6); /* Полупрозрачен черен фон */
      padding: 5px;            /* Вътрешен отстъп */
    }

    /* Ефекти при hover върху снимката */
    .photo img:hover {
      transform: scale(1.05);   /* Леко увеличаване */
      box-shadow: 0 0 30px var(--neon-pink), /* Промяна на сянката */
                  0 0 60px var(--neon-pink);
      border-color: var(--neon-pink); /* Промяна на цвета на границата */
    }

    /* Стилове за секциите (основните блокове) */
    .section {
      margin: 40px 0;           /* Големи отстъпи отгоре и отдолу */
      padding: 25px;            /* Вътрешен отстъп */
      border-radius: 15px;      /* Заоблени ъгли */
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); /* Тъмна сянка */
      animation: fadeIn 1s ease-in; /* Анимация при появяване */
      position: relative;       /* За позициониране на псевдо елементи */
      overflow: hidden;         /* Скриване на излизащо съдържание */
      transition: transform 0.3s ease, box-shadow 0.3s ease; /* Плавни преходи */
      border: 1px solid;        /* Граница */
      background: rgba(10, 10, 10, 0.65); /* Полупрозрачен тъмен фон */
      backdrop-filter: blur(4px); /* Размазване на фона зад елемента */
    }

    /* Ефекти при hover върху секциите */
    .section:hover {
      transform: translateY(-5px); /* Леко издигане */
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.7); /* По-силна сянка */
      background: rgba(15, 15, 15, 0.75); /* По-малко прозрачен фон */
    }

    /* Декоративна линия в горната част на секциите */
    .section::before {
      content: "";              /* Празен content за псевдо елемент */
      position: absolute;       /* Абсолютно позициониране */
      top: 0;                   /* В горната част */
      left: 0;                  /* От ляво */
      right: 0;                 /* До дясно */
      height: 3px;              /* Височина на линията */
      background: linear-gradient(90deg, transparent, currentColor, transparent); /* Градиент */
    }

    /* Анимация за плавно появяване */
    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(20px); } /* Начално състояние - невидимо и изместено */
      to { opacity: 1; transform: translateY(0); }     /* Крайно състояние - видимо и на място */
    }

    /* Анимация за пулсиращ ефект */
    @keyframes pulse {
      0% { opacity: 0.5; }     /* Начална прозрачност */
      100% { opacity: 1; }     /* Крайна прозрачност */
    }

    /* Стилове за връзките */
    a {
      color: inherit;           /* Наследява цвят от родителя */
      text-decoration: none;    /* Без подчертаване */
      position: relative;       /* За позициониране на псевдо елемент */
      transition: all 0.3s ease; /* Плавен преход за всички свойства */
    }

    /* Подчертаване при hover чрез псевдо елемент */
    a::after {
      content: "";              /* Празен content */
      position: absolute;       /* Абсолютно позициониране */
      bottom: -2px;             /* Позиция под текста */
      left: 0;                  /* От ляво */
      width: 0;                 /* Начална ширина 0 */
      height: 2px;              /* Височина на линията */
      background: currentColor;  /* Цвят същия като текста */
      transition: width 0.3s ease; /* Плавно увеличаване на ширината */
    }

    /* Ефекти при hover върху връзките */
    a:hover {
      text-shadow: 0 0 8px currentColor; /* Неонова сянка */
    }

    /* Пълно подчертаване при hover */
    a:hover::after {
      width: 100%;              /* Пълна ширина */
    }

    /* Стилове за неномерирани списъци */
    ul {
      padding-left: 25px;       /* Отстъп отляво */
      list-style-type: none;    /* Без точки пред елементите */
    }

    /* Стилове за елементи от списъка */
    li {
      margin-bottom: 12px;       /* Отстъп между елементите */
      position: relative;       /* За позициониране на псевдо елемент */
      padding-left: 25px;       /* Отстъп отляво за стрелката */
    }

    /* Стрелка пред всеки елемент от списъка */
    li::before {
      content: "❯";             /* Символ стрелка */
      position: absolute;       /* Абсолютно позициониране */
      left: 0;                  /* В лявата част */
      color: currentColor;      /* Цвят същия като текста */
      animation: pulse 1.5s infinite; /* Пулсираща анимация */
    }

    /* Контейнер за статуса */
    .status-wrapper {
      display: flex;            /* Flexbox подредба */
      justify-content: center;  /* Центриране хоризонтално */
      margin: 50px 0;           /* Големи отстъпи */
    }

    /* Стилове за статус бутона */
    .status {
      background: linear-gradient(90deg, var(--neon-green), var(--neon-cyan)); /* Градиентен фон */
      padding: 15px 30px;       /* Вътрешни отстъпи */
      border-radius: 50px;      /* Заоблени ъгли за овална форма */
      text-align: center;       /* Центриран текст */
      color: #000;              /* Черен текст */
      font-weight: bold;        /* Удебелен шрифт */
      font-size: 20px;          /* Голям размер на шрифта */
      animation: pulse 2s infinite, float 4s ease-in-out infinite; /* Две анимации */
      box-shadow: 0 0 20px var(--neon-green); /* Неонова сянка */
      text-transform: uppercase; /* Главни букви */
      letter-spacing: 1px;      /* Разстояние между буквите */
      position: relative;       /* За позициониране на псевдо елемент */
      overflow: hidden;         /* Скриване на излизащо съдържание */
    }

    /* Ефект на "сияние" за статуса */
    .status::after {
      content: "";              /* Празен content */
      position: absolute;       /* Абсолютно позициониране */
      top: -50%;                /* Отгоре извън елемента */
      left: -50%;               /* Отляво извън елемента */
      width: 200%;              /* Двойна ширина */
      height: 200%;             /* Двойна височина */
      background: linear-gradient( /* Градиент за сияние */
        to bottom right,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.1) 50%,
        rgba(255, 255, 255, 0) 100%
      );
      transform: rotate(30deg);  /* Завъртане на градиента */
      animation: shine 3s infinite; /* Анимация на сиянието */
    }

    /* Анимация за ефекта на сияние */
    @keyframes shine {
      0% { transform: translateX(-100%) rotate(30deg); } /* Начална позиция вляво */
      100% { transform: translateX(100%) rotate(30deg); } /* Крайна позиция вдясно */
    }

    /* Специален клас за Linux текст */
    .linux {
      color: var(--neon-blue);  /* Син неонов цвят */
      font-weight: bold;        /* Удебелен шрифт */
      text-shadow: 0 0 5px var(--neon-blue); /* Неонова сянка */
    }

    /* Специален клас за езици за програмиране */
    .languages {
      color: var(--neon-pink);  /* Розов неонов цвят */
      font-weight: bold;        /* Удебелен шрифт */
      text-shadow: 0 0 5px var(--neon-pink); /* Неонова сянка */
    }

    /* Стилове за цитати */
    blockquote {
      border-left: 4px solid;   /* Граница отляво */
      margin: 25px 0;           /* Отстъпи отгоре и отдолу */
      padding: 15px 25px;       /* Вътрешни отстъпи */
      background-color: rgba(0, 0, 0, 0.3); /* Полупрозрачен фон */
      font-style: italic;       /* Курсивен шрифт */
      font-size: 22px;          /* Голям размер на шрифта */
      position: relative;       /* За позициониране на псевдо елемент */
      border-radius: 0 10px 10px 0; /* Заоблени ъгли само отдясно */
      backdrop-filter: blur(2px); /* Леко размазване на фона */
    }

    /* Декоративни кавички за цитата */
    blockquote::before {
      content: """;             /* Символ за кавички */
      position: absolute;       /* Абсолютно позициониране */
      top: -20px;               /* Позиция над цитата */
      left: 10px;               /* Отстъп отляво */
      font-size: 60px;          /* Голям размер */
      opacity: 0.2;             /* Полупрозрачни */
      line-height: 1;           /* Нормална височина на реда */
    }

    /* Стилове за секцията с идентичност */
    #identity {
      border-color: var(--neon-cyan);  /* Граница с неонов циан */
      color: var(--neon-cyan);         /* Текст с неонов циан */
    }
    #identity h2 {
      color: var(--neon-cyan);         /* Заглавие с неонов циан */
      border-color: var(--neon-cyan);  /* Граница на заглавието */
    }

    /* Стилове за секцията с експертиза */
    #expertise {
      border-color: var(--neon-green); /* Граница с неонов зелен */
      color: var(--neon-green);        /* Текст с неонов зелен */
    }
    #expertise h2 {
      color: var(--neon-green);        /* Заглавие с неонов зелен */
      border-color: var(--neon-green); /* Граница на заглавието */
    }

    /* Стилове за секцията с проекти */
    #projects {
      border-color: var(--neon-purple); /* Граница с неонов лилав */
      color: var(--neon-purple);        /* Текст с неонов лилав */
    }
    #projects h2 {
      color: var(--neon-purple);        /* Заглавие с неонов лилав */
      border-color: var(--neon-purple); /* Граница на заглавието */
    }

    /* Стилове за секцията с визия */
    #vision {
      border-color: var(--neon-orange); /* Граница с неонов оранжев */
      color: var(--neon-orange);        /* Текст с неонов оранжев */
    }
    #vision h2 {
      color: var(--neon-orange);        /* Заглавие с неонов оранжев */
      border-color: var(--neon-orange); /* Граница на заглавието */
    }

    /* Стилове за секцията с философия */
    #philosophy {
      border-color: var(--neon-red);    /* Граница с неонов червен */
      color: var(--neon-red);           /* Текст с неонов червен */
    }
    #philosophy h2 {
      color: var(--neon-red);           /* Заглавие с неонов червен */
      border-color: var(--neon-red);    /* Граница на заглавието */
    }

    /* Стилове за секцията с умения */
    #skills {
      border-color: var(--neon-blue);   /* Граница с неонов син */
      color: var(--neon-blue);          /* Текст с неонов син */
    }
    #skills h2 {
      color: var(--neon-blue);          /* Заглавие с неонов син */
      border-color: var(--neon-blue);   /* Граница на заглавието */
    }

    /* Стилове за секцията с личностни черти */
    #traits {
      border-color: var(--neon-pink);   /* Граница с неонов розов */
      color: var(--neon-pink);          /* Текст с неонов розов */
    }
    #traits h2 {
      color: var(--neon-pink);          /* Заглавие с неонов розов */
      border-color: var(--neon-pink);   /* Граница на заглавието */
    }

    /* Стилове за секцията с мото */
    #motto {
      border-color: var(--neon-yellow); /* Граница с неонов жълт */
      color: var(--neon-yellow);        /* Текст с неонов жълт */
    }
    #motto h2 {
      color: var(--neon-yellow);        /* Заглавие с неонов жълт */
      border-color: var(--neon-yellow); /* Граница на заглавието */
    }

    /* Ефект при hover върху заглавията h2 - "глич" ефект */
    h2:hover {
      animation: glitch 0.5s linear infinite; /* Анимация за глич ефект */
    }

    /* Анимация за глич ефекта */
    @keyframes glitch {
      0% { text-shadow: 2px 0 var(--neon-cyan), -2px 0 var(--neon-pink); }
      25% { text-shadow: -2px 0 var(--neon-cyan), 2px 0 var(--neon-pink); }
      50% { text-shadow: 2px 0 var(--neon-pink), -2px 0 var(--neon-cyan); }
      75% { text-shadow: -2px 0 var(--neon-pink), 2px 0 var(--neon-cyan); }
      100% { text-shadow: 2px 0 var(--neon-cyan), -2px 0 var(--neon-pink); }
    }

    /* Медийни заявки за адаптивен дизайн - таблети */
    @media (max-width: 768px) {
      body {
        padding: 10px;          /* По-малък вътрешен отстъп */
        font-size: 16px;        /* По-малък размер на шрифта */
        background-attachment: scroll; /* Фонът да се движи със съдържанието */
      }

      h1 {
        font-size: 1.8rem;      /* По-малък размер на главното заглавие */
      }

      h2 {
        font-size: 1.4rem;      /* По-малък размер на второстепенните заглавия */
      }

      .photo img {
        width: 140px;           /* По-малка снимка */
        height: 140px;
      }

      .section {
        padding: 15px;          /* По-малък вътрешен отстъп */
        margin: 30px 0;         /* По-малки външни отстъпи */
        background: rgba(10, 10, 10, 0.75); /* По-малко прозрачен фон */
      }

      blockquote {
        font-size: 18px;        /* По-малък размер на шрифта за цитати */
      }

      .status {
        font-size: 16px;        /* По-малък размер на шрифта за статуса */
        padding: 12px 20px;     /* По-малки отстъпи */
      }
    }

    /* Медийни заявки за адаптивен дизайн - мобилни устройства */
    @media (max-width: 480px) {
      h1 {
        font-size: 1.5rem;      /* Още по-малък размер на главното заглавие */
      }

      /* Скриване на мълниите отстрани на h1 */
      h1::before, h1::after {
        display: none;
      }

      .section {
        padding: 12px;          /* Още по-малък вътрешен отстъп */
        background: rgba(10, 10, 10, 0.8); /* Още по-малко прозрачен фон */
      }

      blockquote {
        font-size: 16px;        /* Още по-малък размер на шрифта за цитати */
        padding: 10px 15px;     /* По-малки отстъпи */
      }
    }
	
	
	
	
	/* Допълнителни стилове */
.highlight-orange {
  color: var(--neon-orange);
  font-weight: bold;
}

.highlight-blue {
  color: var(--neon-blue);
  font-weight: bold;
}

.highlight-green {
  color: var(--neon-green);
  font-weight: bold;
}

.highlight-red {
  color: var(--neon-red);
  font-weight: bold;
}

.text-right {
  text-align: right;
}

blockquote {
  border-left: 3px solid var(--neon-yellow);
  padding-left: 15px;
  margin: 20px 0;
  font-style: italic;
}

.terminal {
  color: var(--neon-green);
  background: rgba(0, 0, 0, 0.7);
  padding: 15px;
  border-radius: 5px;
  border-left: 3px solid var(--neon-green);
  margin: 20px 0;
  font-family: 'Courier New', monospace;
}

.terminal p {
  margin: 0;
  line-height: 1.5;
}