/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  background-color: black;
  color: white;
  font-family: Verdana;
  background-image: url('bodycover.jpg'); 
  background-repeat: no-repeat; 
  background-size: cover; 
  background-attachment: fixed; 
  background-position: center;
  margin: 0;
  padding: 0;
  min-height: 100vh;
}

.header-sticky {
    position: sticky;   /* «Прилипает» к верху при скролле */
    top: 0;             /*  Дистанция от верхнего края */
    z-index: 1000;      /* Шапка всегда поверх скроллящегося текста */
    background: rgba(0, 0, 0, 0.9); /* Темный фон, чтобы текст под ней не просвечивал */
    padding-bottom: 10px;
    /*border-bottom: 2px double #ff00de;  Разделительная линия в стиле неона */
}

.scroll-content {
    padding-top: 20px; /* Отступ, чтобы контент не прилипал к шапке */
    font-family: 'Courier New', Courier, monospace;
}

 .container {
            width: 70%;
            background-attachment: fixed;
            background-color: rgba(41, 49, 51, 0.9);
            padding: 20px;
            border: 1px double black;
            margin: 20px auto;
        }
        
.neon-sign {
    font-family: 'Courier New', Courier, monospace;
    font-size: 48px;
    color: #fff;
    text-transform: uppercase;
    text-align: center;
    
    /* Свечение: несколько слоев тени */
    text-shadow: 
        0 0 5px #fff,
        0 0 10px #fff,
        0 0 20px #ff00de, /* Основной цвет (розовый) */
        0 0 40px #ff00de,
        0 0 80px #ff00de,
        0 0 90px #ff00de;
    
    /* Анимация мерцания, как у старой вывески */
    animation: flicker 5s infinite alternate;
}

@keyframes flicker {
    0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
        text-shadow: 
            0 0 5px #fff,
            0 0 10px #fff,
            0 0 20px #ff00de,
            0 0 40px #ff00de,
            0 0 80px #ff00de;
        opacity: 1;
    }
    20%, 24%, 55% {        
        text-shadow: none;
        opacity: 0.5; /* В эти моменты вывеска «подмигивает» */
    }
}

.bottom-right-sticker {
    position: fixed;   /* Фиксируем относительно экрана */
    bottom: 20px;      /* Отступ от нижнего края */
    right: 10px;       /* Отступ от правого края */
    z-index: 9999;     /* Чтобы элемент всегда был ПОВЕРХ остального контента */
    width: 10%;
}