* {padding: 0;
    margin: 0;
}

body {background-color: black;}

header {background-color: black;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    }

    header h1 {position: relative;
    left: 800px;
    color: red;
    font-size: xx-large;
    }

    .inicio {
        margin: 30px;
        padding: 30px;
    }

    p{color: burlywood;
        font-size: x-large;

    }

    .slasher, .INFO {
        margin: 30px;
        padding: 30px;
    }

    .textoslasher{
        color:coral ;

    }

    h1 {align-items: center;
        color: red;
        text-align: center;
       }

       .exploracion {
        display: flex;
        padding: 20px;
        gap: 15px;
        justify-content: center;
        align-items: center;
       }

       img {
        height: 500px;
        width: 500px;
       }

       a {
        color: red;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: xx-large;
        color: red;
       }

       header a {position: relative;
        right: 50px;
        text-decoration: underline yellow;
        }

        @media (max-width: 880px) {
            header {
                flex-direction: column;
                align-items: center;
                text-align: center;
            }
        
            header h1 {
                left: 0; 
            }
        
            header a {
                right: 0; 
                margin-top: 10px;
            }
        
            .exploracion {
                flex-direction: column;
            }
        
            img {
                width: 90%;
                height: auto;
            }
        }

        @media (max-width: 480px) {
            header {
                flex-direction: column;
                align-items: center;
                text-align: center;
            }
        
            header h1 {
                left: 0; /* Anula el desplazamiento lateral */
                font-size: large; /* Reduce el tamaño del título para móviles */
            }
        
            header a {
                right: 0; /* Anula la posición relativa */
                margin-top: 10px;
                font-size: large; /* Ajusta el tamaño del enlace */
            }
        
            .inicio, .slasher {
                margin: 10px;
                padding: 15px;
            }
        
            p {
                font-size: large; /* Reduce el tamaño del texto para mejor lectura */
            }
        
            .exploracion {
                flex-direction: column;
                gap: 10px; /* Espacio entre imágenes */
            }
        
            img {
                width: 100%; /* Hace que las imágenes se adapten al ancho */
                height: auto;
                max-width: 300px; /* Evita imágenes demasiado grandes en móviles */
            }
        }