body {
    margin: 0;
    height: 110vh;
    display: flex;
    flex-direction: column;
    max-width: 1024px;
}

.image-container {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    overflow: hidden;
    height: 100vh;
    width: 100vw;
}

.image-wrapper {
    position: relative;
    height: 100%;
    margin-bottom: 1em;
}

.main-image {
    width: 96%;
    margin: 1em;
    border: 1px inset #fff;
    background-color: #fff;
    border-radius: 4px;
}        
        .navigation-controls {
            position: relative;
            padding: 4px 25px;
            border-radius: 4px;
            text-align: center;

        }

        
        .nav-btn:hover {
        background: none;
        transform: translateY(-2px);
        color:green;
        }
        .nav-btn {
            padding: 2px 10px;
            transition: all 0.3s ease;
            text-decoration: none;
        }
        
        .nav-btn:disabled {
            background: #7f8c8d;
            cursor: not-allowed;
            transform: none;
        }
                
        
        .image-counter {
            opacity: 0.5;
            border-top: 1px inset white;
            padding: 0px 1em;
        }
        
        /* Navegación con teclado */
        .key-navigation {
            top: 0px;
            left: 20px;
            color: #606060;
            padding: 7px 15px;
            display: none;
        }
        
        /* Responsive */
        @media (max-width: 768px) {
            .navigation-controls {
                flex-direction: column;
                bottom: 10px;
                padding: 10px 15px;
            }
            
            .nav-btn {
                padding: 10px 15px;
                font-size: 14px;
            }
            
            .image-info {
                bottom: 150px;
                font-size: 12px;
            }
            
            .key-navigation {
                display: none;
            }
        }