body,
html {
    height: 100%;
    margin: 0;
    padding: 0;
}


.background-image {
    background-image: url('img/background.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
}

.contenedor {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}


.caja {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-40%, -50%);
    width: 100%;
    height: 70%;
    max-width: 1000px;
    max-height: 500px;
}

.caja button {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    background-color: transparent;
    z-index: 1;
}



.caja button:hover {
    background-color: rgb(255, 234, 0);
}


.caja button.estilo,
.caja button.rojo,
.caja button.azul,
.caja button.blanco,
.caja button.verde,
.caja button.amarillo {
    position: relative;
    background-color: transparent;
    font-size: 19px;
    border: 4px solid #000000;

    padding: 12px 12px;
    cursor: pointer;
    z-index: 2;
}




.estilo:hover {
    background-color: #e1ff00;
}

.estilo:active {
    background-color: #5B9BE6;
}

.rojo {

    position: relative;
    background-image: url('img/Zombie.webp');
    background-size: cover;
    z-index: 3;
}

.azul {
    position: relative;
    background-image: url('img/brain.PNG');
    background-size: cover;
    background-position: center;
    z-index: 3;
}

.blanco {
    position: relative;
    background-image: url('img/grass.PNG');
    background-size: cover;
    background-position: center;
    z-index: 0;
}

.negro {
    position: relative;
    background-image: url('img/Wnut.webp');
    background-size: cover;
    background-position: center;
    z-index: 3;
}

.verde {
    position: relative;
    background-image: url('img/zombot.PNG');
    background-size: cover;
    background-position: center;
    z-index: 3;
}

.amarillo {
    position: relative;
    background-image: url('img/migas.PNG');
    background-size: cover;
    background-position: center;
    z-index: 3;

}

/* Estilos para el footer */
footer {
    position: relative;
    height: 100px;
    color: white;
}

footer h1 {
    position: absolute;
    background-color: #4f4e78;
    font-size: 25px;
    font-family: 'Press Start 2P', system-ui;

    color: rgb(234, 255, 0);
    top: 520px;
    left: 20px;
    margin: 0;
}

button {
    padding: 10px 15px;
    background-color: #4f4e78;
    color: #24ff14;
    border-radius: 5px;
    cursor: pointer;
    font-family: 'Press Start 2P', system-ui;
    font-size: 12px;
    border: 3px solid #000000;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 3px 3px 9px #121212;
    text-shadow: 3px 3px 4px #000000;
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

button:hover,
button:active {
    background-color: #989898;
    color: #15ff00;
    border-color: rgb(30, 255, 0);
    transform: translateY(-2px);
    box-shadow: 5px 5px 15px #121212;
}


.rojo:hover {
    background-color: #f2ff00;
}

.azul:hover {
    background-color: #f2ff00;
}

.blanco:hover {
    background-color: #f2ff00;
}

.negro:hover {
    background-color: #f2ff00;
}

.verde:hover {
    background-color: #f2ff00;
}

.amarillo:hover {
    background-color: #f2ff00;
}

.rojo:active {
    background-color: #5B9BE6;
}

.azul:active {
    background-color: #5B9BE6;
}

.blanco:active {
    background-color: #5B9BE6;
}

.negro:active {
    background-color: #5B9BE6;
}

.verde:active {
    background-color: #5B9BE6;
}

.amarillo:active {
    background-color: #5B9BE6;
}