*, ::before, ::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
  font-family: "Roboto", sans-serif;
  font-weight: 600;
  font-style: normal;
}

.home {
    height: 100vh;
    position: relative;
}
video {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index:1;
}
.home-content {
    position: relative;
    display: flex;
    padding-top: 1px;
    color: #fff;
    text-align: center;
    flex-direction: column;
    align-content: center;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    z-index:3;
}

h1 {
  font-family: "Anton SC", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: clamp(45px, 7vw, 130px);
  color:#b70100;
}

.home-content h1 {

background-image: url(textmask.png);
background-size: contain;
background-clip: text;
color: transparent;
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
-webkit-text-stroke:1px red;
} 


.home p {
    font-size: clamp(25px, 4vw, 48px);
    margin-top: 10px;
}


.glightbox_video {
    margin-top: 30px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }
  
  


 #page404-audio {
                display: flex;
                flex-direction: column;
                align-items: center;
                margin-top: 70px;               

            }

            #page404-audio audio {
                display: none
            }

            #page404-audio .info {
                color: #999;
                font-size: 16px;
                font-weight: 400;
                line-height: 1;
                text-align: right
            }

            #page404-audio .controls {
                display: flex;
                align-items: center;
                justify-content: space-between;
            }

            #page404-audio .controls button {
                margin: 1rem;
                padding: 0;
                width: 30px;
                height:30px;
                border: 0;
                background-color: transparent;
                background-position: center;
                background-repeat: no-repeat;
                background-size: contain;
                cursor: pointer;
                transition: all linear .2s
            }
            
           #page404-audio .controls button.play {
            
                width: 80px;
                height:80px;
            }
            
          #page404-audio .controls button.pause {
            
                width: 80px;
                height:80px;
            }  

          
          #page404-audio .volume-control {
                margin-top: 1px;
            }

           #page404-audio #volume-slider {
                width: 100px; /* Длина ползунка */
                height:2px;
            }
            
            #volume-slider {
              -webkit-appearance: none; /* Убираем стандартный стиль для WebKit-браузеров */
              width: 100%;
              height: 2px;
              background: #666;
              outline: none;
              opacity: 0.7;
              transition: opacity 0.2s;
            }

            /* Стиль для самого ползунка */
            #volume-slider::-webkit-slider-thumb {
              -webkit-appearance: none;
              appearance: none;
              width: 16px;
              height: 16px;
              border-radius: 50%;
              background: #bc0003;
              cursor: pointer;
            }

            #volume-slider::-moz-range-thumb {
              width: 16px;
              height: 16px;
              border-radius: 50%;
              background: #bc0003;
              cursor: pointer;
            }

            #page404-audio-prev {
                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 7.5' xml:space='preserve'%3E%3Cpath fill='%23bc0003' d='M5 0 0 3.8l5 3.8V0zm0 3.8 5 3.8V0L5 3.8z'/%3E%3C/svg%3E")
            }

            #page404-audio-prev:hover {
                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 7.5' xml:space='preserve'%3E%3Cpath fill='%23ffffff' d='M5 0 0 3.8l5 3.8V0zm0 3.8 5 3.8V0L5 3.8z'/%3E%3C/svg%3E")
            }
            
            #page404-audio-prev:active  {
                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 7.5' xml:space='preserve'%3E%3Cpath fill='%23bc0003' d='M5 0 0 3.8l5 3.8V0zm0 3.8 5 3.8V0L5 3.8z'/%3E%3C/svg%3E")
            }
            
            
             #page404-audio-prev:focus {
                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 7.5' xml:space='preserve'%3E%3Cpath fill='%23bc0003' d='M5 0 0 3.8l5 3.8V0zm0 3.8 5 3.8V0L5 3.8z'/%3E%3C/svg%3E")
            }
            
            
            #page404-audio-next {
                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 7.5' xml:space='preserve'%3E%3Cpath fill='%23bc0003' d='M0 0v7.5l5-3.8L0 0zm5 3.8v3.8l5-3.8L5 0v3.8z'/%3E%3C/svg%3E")
            }

            #page404-audio-next:hover {
                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 7.5' xml:space='preserve'%3E%3Cpath fill='%23ffffff' d='M0 0v7.5l5-3.8L0 0zm5 3.8v3.8l5-3.8L5 0v3.8z'/%3E%3C/svg%3E")
            }
            
             #page404-audio-next:active {
                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 7.5' xml:space='preserve'%3E%3Cpath fill='%23bc0003' d='M0 0v7.5l5-3.8L0 0zm5 3.8v3.8l5-3.8L5 0v3.8z'/%3E%3C/svg%3E")
            }
            
             #page404-audio-next:focus {
                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 7.5' xml:space='preserve'%3E%3Cpath fill='%23bc0003' d='M0 0v7.5l5-3.8L0 0zm5 3.8v3.8l5-3.8L5 0v3.8z'/%3E%3C/svg%3E")
            }
            

            #page404-audio-switch.pause {
             background-image: url("data:image/svg+xml,%3Csvg width='104' height='104' viewBox='0 0 104 104' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='52' cy='52' r='52' fill='%23bc0003'/%3E%3Crect x='40' y='34' width='7' height='36' fill='white'/%3E%3Crect x='56' y='34' width='7' height='36' fill='white'/%3E%3C/svg%3E%0A");
            
            }

            #page404-audio-switch.pause:hover {
             background-image: url("data:image/svg+xml,%3Csvg width='104' height='104' viewBox='0 0 104 104' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='52' cy='52' r='52' fill='white'/%3E%3Crect x='40' y='34' width='7' height='36' fill='%23BC0003'/%3E%3Crect x='56' y='34' width='7' height='36' fill='%23BC0003'/%3E%3C/svg%3E%0A");
            }
            
            #page404-audio-switch.pause:active {
             background-image: url("data:image/svg+xml,%3Csvg width='104' height='104' viewBox='0 0 104 104' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='52' cy='52' r='52' fill='%23bc0003'/%3E%3Crect x='40' y='34' width='7' height='36' fill='white'/%3E%3Crect x='56' y='34' width='7' height='36' fill='white'/%3E%3C/svg%3E%0A");
            
            }
            
            #page404-audio-switch.pause:focus {
             background-image: url("data:image/svg+xml,%3Csvg width='104' height='104' viewBox='0 0 104 104' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='52' cy='52' r='52' fill='%23bc0003'/%3E%3Crect x='40' y='34' width='7' height='36' fill='white'/%3E%3Crect x='56' y='34' width='7' height='36' fill='white'/%3E%3C/svg%3E%0A");
            
            }
            

            #page404-audio-switch.play {
               background-image: url("data:image/svg+xml,%3Csvg width='104' height='104' viewBox='0 0 104 104' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='52' cy='52' r='52' fill='%23bc0003'/%3E%3Cpath d='M42 36V70L69 52.6531L42 36Z' fill='%23ffffff' stroke='%23ffffff'/%3E%3C/svg%3E");

            }

            #page404-audio-switch.play:hover {
                background-image: url("data:image/svg+xml,%3Csvg width='104' height='104' viewBox='0 0 104 104' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='52' cy='52' r='52' fill='white'/%3E%3Cpath d='M42 36V70L69 52.6531L42 36Z' fill='%23BC0003' stroke='%23BC0003'/%3E%3C/svg%3E%0A");
            }
            
             #page404-audio-switch.play:active {
               background-image: url("data:image/svg+xml,%3Csvg width='104' height='104' viewBox='0 0 104 104' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='52' cy='52' r='52' fill='%23bc0003'/%3E%3Cpath d='M42 36V70L69 52.6531L42 36Z' fill='%23ffffff' stroke='%23ffffff'/%3E%3C/svg%3E");

            }
            
             #page404-audio-switch.play:focus {
               background-image: url("data:image/svg+xml,%3Csvg width='104' height='104' viewBox='0 0 104 104' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='52' cy='52' r='52' fill='%23bc0003'/%3E%3Cpath d='M42 36V70L69 52.6531L42 36Z' fill='%23ffffff' stroke='%23ffffff'/%3E%3C/svg%3E");

            }
            

     
            

.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.preloader {
    text-align: center;
    color: white;
}

.progress-bar {
    width: 300px;
    height: 10px;
    background-color: #444;
    margin-bottom: 20px;
}

.progress {
    width: 0%;
    height: 100%;
    background-color: #b70100;
}

#loading-text {
    font-size: 18px;
}


.neonText {
  font-family: "Playwrite CU", cursive;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  color: #fff;
  text-shadow:
      0 0 4px #fff,
      0 0 11px #fff,
      0 0 19px #fff,
      0 0 40px #f09,
      0 0 80px #f09,
      0 0 90px #f09,
      0 0 100px #f09,
      0 0 150px #f09;
      
}

.pulse {
  animation: flicker 1.5s infinite alternate;  
}

/* Flickering animation */
@keyframes flicker {
    
  0%, 18%, 22%, 25%, 53%, 57%, 100% {

      text-shadow:
      0 0 4px #fff,
      0 0 11px #fff,
      0 0 19px #fff,
      0 0 40px #f09,
      0 0 80px #f09,
      0 0 90px #f09,
      0 0 100px #f09,
      0 0 150px #f09;
  
  }
  
  20%, 24%, 55% {        
      text-shadow: none;
  }    
}



.dust-container {
    position: absolute;
    width: 50%;
    height: 100%;
    overflow: hidden;
    z-index:2;
    top: 50%;  /* position the top  edge of the element at the middle of the parent */
    left: 50%; /* position the left edge of the element at the middle of the parent */

    transform: translate(-50%, -50%);
}


/* Для устройств с высотой экрана до 1024px*/
@media screen and (min-width: 1680px) {


 #page404-audio {
                margin-top: 50px;

  }

}



/* Для устройств с высотой экрана до 1024px*/
@media screen and (max-height: 800px) {

}

/* Для устройств с высотой экрана до 1024px*/
@media screen and (max-height: 820px) {
    .home-content {
    padding-top: 30px;
    
    }


}


@media screen and (max-width: 819px) {


}