@font-face {
            font-family: 'Font';
            src: url('fonts/StarGun.ttf') format('truetype');
        }
       
        body {
			flex-direction: column;
            font-family: 'Font', sans-serif;
            overflow-x: hidden;
            color: #B52D1B;
            margin: 0;
            padding: 0px;
            
			
        }
        .sbt{
            height: 2000px;
            
        }
        .space{
            height: 100px;
        }
        .star_gun_title {
            position: fixed;
            width: 1540px;
            z-index: -1; 
            top: -16.3%;
            pointer-events: none; 
            
            animation : star_gun_title linear;
            animation-fill-mode: forwards;
            animation-timeline: scroll();
            animation-range-start: contain 0px;
            animation-range-end: contain 2000px;
        }
		.parallax-bg {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 400vh; 
			background-image: url('images/background.png');
			background-repeat: repeat-y;
			background-size: 100% auto;
			z-index: -1;
			pointer-events: none; 
            
		}
		.parallax-2bg {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 800vh; 
			background-image: url('images/2ndbackground.png');
			background-repeat: repeat-y;
			background-size: 100% auto;
			z-index: -1;
			pointer-events: none; 
            animation : stars 7s ease-in-out infinite;;
            
           
		}

        @keyframes stars {
            0%{
                filter:saturate(100%);
            }50%{
                filter: saturate(200%);
            }100%{
                filter: saturate(100%);
            }
            
        }
        .container {
            display: flex;
            gap: 0px;
            align-items: flex-start;
        }

       

        .center-block {
            flex: 1;
            width: 1540px;
            margin: 0 auto;
            text-align: center;
        }
		
		.right-block {
            width: 0%;
        }

        .right-buttons{
            position: fixed;
            right: -10% ;
            top : 33%;

            z-index: 10;
            animation : right_buttons linear;
            
            animation-timeline: scroll();
            animation-range-start: contain 1800px;
            animation-range-end: contain 1900px;
            animation-fill-mode: forwards;
            
        }
       
		
		.title {
            font-size: 125px;
            
			text-shadow: #110A03 5px 5px 0px;
            -webkit-text-stroke-width: 0.5px;
            -webkit-text-stroke-color: #FBC531;
        }

        .center-block {
            flex: 1;
            text-align: center;
            max-width: 160vh;
		}
			
		.row {
			display: flex;
			flex-direction: row;
            background-color: #110A03CC;
            
		}

        .DDOWN {
            right : 50%;
            bottom: 2%;
            font-size: 64px;
			position: fixed;
            display: flex;
			     
            margin: 0 auto;
            text-align: center;
           
            animation : DOWN linear;
            
            animation-timeline: scroll();
            animation-range-start: contain 0px;
            animation-range-end: contain 1000px;
            animation-fill-mode: forwards;
		}
        .DDOWNANIM {
        
            animation: DOWNANIM 1s ease-in-out infinite;
            z-index: 10; 
            pointer-events: none; 
		}
			
		.lefot {
            flex: 1;
            
            text-align: left;
            animation : l linear;
            animation-timeline: view();
			width: 66%;

           
        }

        @keyframes l {
            0%{
                opacity: 0%;
                transform: translateX(-50%);
            }
            25%,75%{
                opacity: 100%;
                transform: translateX(00%);
            }
            100%{
                opacity: 0%;
                transform: translateX(-50%);
            }
        }

        @keyframes DOWN {
            0%{
                opacity: 100%;
                transform: translateY(00%);
            }100%{
                opacity: 0%;
                transform: translateY(100%);
            }
        }
        @keyframes DOWNANIM {
            0%{
                transform: translateY(00%);
                color: #B52D1B;
                
            }50%{
                transform: translateY(50%);
                color: #FBC531;
             
            }100%{
                transform: translateY(00%);
                color: #B52D1B;
              
            }
        }
       
       
        .textre{
            opacity: 1;
        }
        
       
        .screen_container{
    
            margin: 10px auto; 
            width:480px;
        }
		.ima {
			right:0%;
            
            animation : screen_a linear;
            
            animation-timeline: view();
		}
        @keyframes screen_a {
            0%{
                opacity: 0%;
                transform: translateX(50%);
            }
            25%,75%{
                opacity: 100%;
                transform: translateX(00%);
            }
            100%{
                opacity: 0%;
                transform: translateX(50%);
            }
        }

       
       
		        
		h2 {
			font-size: 65px;
			text-shadow: #110A03 2.5px 2.5px 0px;
			margin-bottom: 50px;
            -webkit-text-stroke-width: 0.25px;
            -webkit-text-stroke-color: #FBC531;
            margin-left: 2.5%;
            margin-right: 2.5%;
		}
		h3 {
			font-size: 45px;
			text-shadow: #110A03 1.75px 1.75px 0px;
			color : #FBC531;
            margin-left: 2.5%;
            margin-right: 2.5%;
		}

        a {
			font-size: 45px;
			text-shadow: #110A03 1.75px 1.75px 0px;
			color : #214AA7;
            -webkit-text-stroke-width: 0.25px;
            -webkit-text-stroke-color: #FBC531;
          
            top : 200px;
		}

       .corridor-container {
            width: 160hv;
            overflow: hidden;
            height: 480px; 
            position: relative;
        }
        .corridor-container2 {
            width: 160hv;
            overflow: hidden;
            height: 800px; 
            position: relative;
        }

        .corridor-track {
            display: flex;
            width: max-content;
            animation: scrollBanner 14s linear infinite;
        }

        .corridor-track img {
            
            flex-shrink: 0;
        }
        .desurt-track {
            display: flex;
            width: max-content;
            
            animation: scrollBanner2 0.5s linear infinite;
            
        }
        @keyframes scrollBanner2 {
            from {
            transform: translate(0%,75%);
        
            }
            to {
            transform: translate(-50%,75%);
           
            }
        }
        
        
        @keyframes scrollBanner {
            from {
            transform: translateX(0);
            
            }
            to {
            transform: translateX(-50%);
            }
        }
        
        .mountain{
            position: absolute;
            animation: mountain linear;
            animation-timeline: scroll();
            
        }

        
        @keyframes mountain {
            from{
                transform: translatey(0%);
            }
            to{
                transform: translatey(-400%);
            }
        }
        .scrollmountain{
            animation: mountainscroll 2s linear infinite;
        }
         @keyframes mountainscroll {
            from{
                transform: translateX(0%);
            }
            to{
                transform: translateX(-50%);
            }
        }

         .mountain2{
            position: absolute;
            animation: mountain linear;
            animation-timeline: scroll();
            
        }

        
        @keyframes mountain2 {
            from{
                transform: translatey(0%);
            }
            to{
                transform: translatey(-400%);
            }
        }
        .scrollmountain2{
            animation: mountainscroll2 4s linear infinite;
        }
         @keyframes mountainscroll2 {
            from{
                transform: translateX(0%);
            }
            to{
                transform: translateX(-50%);
            }
        }

        .overlay-player {
            position: absolute;
            top: 192px;
            left: 50%;
            transform: translateX(-50%);
            
            z-index: 10; 
            pointer-events: none; 
        }
        .overlay-ship {
            position: absolute;
            top: 64px;
            left: 33%;
            animation: ship-flying 7s ease-in-out infinite;
            z-index: 10; 
            pointer-events: none; 
        }

         @keyframes ship-flying {
            0% {
            transform: translateY(30%);
            }
            50% {
            transform: translateY(90%);
            }
            100% {
            transform: translateY(30%);
            }
            
        }

        @keyframes star_gun_title {
            0% {
                filter: brightness(100%);
                transform: scale(0);
            }
            50%{
                filter: brightness(100%);
                transform: scale(1);
            }
            100%{
                filter: brightness(25%);
                transform: scale(1);
            }

        }

        @keyframes right_buttons {
            0%{
                right: -10% ;
            }
            100%{
                right: 1% ;
            }
        }
       
       
        .Rightinfobulle {
            position : absolute;
            transform: scale(0);
            right : 100%;
            background-color: #251E6ACC ;
            height: 50px;
            color : #FBC531;
            border-left: 15px solid transparent;
            border-right: 15px solid transparent;
            border-bottom: 15px solid transparent;
            
           
            
        }

        .infobulle {
            position: absolute;
            
            transform: scale(0);
            right : 30%;
            background-color: #251E6ACC ;
            height: 50px;
            color : #FBC531;
            border-left: 15px solid transparent;
            border-right: 15px solid transparent;
            border-bottom: 15px solid transparent;
            z-index: 1;
            
            
        }

        a:hover > .Rightinfobulle {
            transform: scale(1)translateY(-100px);
        }
        a:hover > .infobulle {
            transform: scale(1);
        }