html {
            scroll-behavior: smooth;
        }
        
        .video__back{
            background-size: cover; /* Ajusta el tamaño del GIF */
            background-repeat: no-repeat; /* Evita que el GIF se repita */
            background-position: center; /* Centra el GIF */
        }
        
        .pixel-font {
            font-family: 'Press Start 2P', cursive;
        }
        
        /* Preloader styles */
        .preloader {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #1a1a1a;
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 9999;
            transition: opacity 0.5s ease-out;
        }

        .preloader.fade-out {
            opacity: 0;
        }

        .pixel-loader {
            width: 80px;
            height: 80px;
            position: relative;
            animation: pixel-rotate 2s infinite steps(8);
        }

        .pixel-block {
            position: absolute;
            width: 20px;
            height: 20px;
            background-color: #4CAF50;
            animation: pixel-color 2s infinite;
        }

        @keyframes pixel-rotate {
            0% {
                transform: rotate(0deg);
            }
            100% {
                transform: rotate(360deg);
            }
        }

        @keyframes pixel-color {
            0%, 100% { background-color: #4CAF50; }
            25% { background-color: #2196F3; }
            50% { background-color: #9C27B0; }
            75% { background-color: #FF9800; }
        }

        .loading-text {
            position: absolute;
            bottom: 20%;
            color: white;
            font-size: 1.2em;
            letter-spacing: 2px;
        }

        .progress-bar {
            position: absolute;
            bottom: 30%;
            width: 300px;
            height: 30px;
            background: #222;
            border: 4px solid #444;
            overflow: hidden;
        }

        .progress {
            width: 0%;
            height: 100%;
            background: linear-gradient(45deg, #4CAF50 25%, #45a049 25%, #45a049 50%, #4CAF50 50%, #4CAF50 75%, #45a049 75%, #45a049 100%);
            background-size: 20px 20px;
            transition: width 0.3s ease-out;
            animation: progress-animation 1s linear infinite;
        }

        @keyframes progress-animation {
            0% {
                background-position: 0 0;
            }
            100% {
                background-position: 20px 0;
            }
        }