/* Generador de memes entre otros-------------------------------------------------------------*/
#memeCanvas {
    border: 1px solid black;
    max-width: 100%;
    max-height: 150%;
    height: auto;
    width: auto;
    margin-top: 10px;
}

input, button {
    margin: 5px;
    font-size: 1rem;
}


.responsive-div {
    width: 95%; /* Ocupa el 90% del ancho de la pantalla */
    height: auto; /* Altura automática para adaptarse al contenido */
    max-height: 90vh; /* Máximo 90% de la altura de la pantalla */
    margin: 0 auto; /* Centrado horizontal */
    padding: 20px;
    box-sizing: border-box; /* Incluye el padding dentro del tamaño */
    overflow-y: auto; /* Añade desplazamiento si el contenido supera el tamaño */
    background-color: #bb99ff;
    border: 2px solid #ccc;
    border-radius: 10px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    text-align: center;
}

/* Estilo para los inputs de texto */
input[type="text"] {
    width: 90%; /* Ocupa casi todo el ancho disponible */
    margin: 10px auto; /* Espaciado entre los inputs */
    padding: 12px 20px;
    font-size: 1.2em;
    font-family: 'Comic Sans MS', cursive, sans-serif; /* Tipografía divertida */
    color: #333;
    border: 3px solid #00bfff; /* Borde con color llamativo */
    border-radius: 8px; /* Bordes redondeados */
    background-color: #f0f8ff; /* Fondo azul claro */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra ligera */
    transition: transform 0.2s, box-shadow 0.2s;
}

/* Efecto hover */
input[type="text"]:hover {
    border-color: #1e90ff; /* Cambia el color del borde al pasar el cursor */
    background-color: #e6f7ff; /* Fondo más claro */
}

/* Efecto focus */
input[type="text"]:focus {
    outline: none; /* Quita el borde predeterminado */
    border-color: #4169e1; /* Borde azul más oscuro */
    box-shadow: 0 0 10px rgba(65, 105, 225, 0.7); /* Sombra intensa */
    transform: scale(1.05); /* Aumenta ligeramente el tamaño */
}

    /* Estilo para el input de subir imagen --------------------------------------------*/
    #uploadImage {
        display: none; /* Oculta el input original */
    }
    
    #uploadImage + label {
        display: inline-block;
        background-color: #ff6f61; /* Naranja divertido */
        color: white;
        font-size: 1.2em;
        padding: 10px 20px;
        border-radius: 8px;
        cursor: pointer;
        text-align: center;
        transition: transform 0.3s, background-color 0.3s;
        font-family: 'Comic Sans MS', cursive, sans-serif; /* Divertida tipografía */
    }
    
    #uploadImage + label:hover {
        background-color: #ff3b2f; /* Color más oscuro al pasar el cursor */
        transform: scale(1.1); /* Aumenta ligeramente el tamaño */
    }
    
    /* Estilo para los botones */
    .buttonmeme {
        background: linear-gradient(45deg, #6a5acd, #00bfff); /* Fondo degradado */
        color: white;
        border: none;
        padding: 10px 20px;
        border-radius: 12px;
        font-size: 1.2em;
        font-family: 'Press Start 2P', cursive; /* Fuente estilo retro */
        box-shadow: 0px 5px 0px #333; /* Efecto de botón presionado */
        cursor: pointer;
        transition: transform 0.2s, box-shadow 0.2s;
    }
    
    .buttonmeme:hover {
        transform: translateY(-3px); /* Se eleva un poco al pasar el cursor */
        box-shadow: 0px 8px 0px #333; /* Sombra más pronunciada */
    }
    
    .buttonmeme:active {
        transform: translateY(3px); /* Simula pulsación */
        box-shadow: 0px 3px 0px #333;
    }
    
    /* Tipografía especial para los botones */
    @import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');