/* estilo.css */

.Div2 {
    display: flex;
    justify-content: space-around;
    padding: 10px;
}
.opcion {
    padding: 10px 20px;
    background-color: transparent;
    border: 1px solid #aaa;
    border-radius: 12px;
    cursor: pointer;
    transition: background-color 1s ease, color 1s ease, box-shadow 0.5s ease;

}
.opcion:hover {
    background-color: #04dcdc;
    color: #04dcdc;
    box-shadow: 0 0 5px rgb(4,220,220), /* brillo al rededor (cerca) */
    0 0 25px rgb(4,220,220); /* brillo al rededor */
    background-color: rgb(4,220,220); /* fondo */
    color: rgb(0, 0, 0); /* texto */
    padding: 10px 20px;
    border: none;
    border-radius: 12px;
    cursor: pointer;
}

/* Vim */
.vim{
    cursor: pointer;
 transition: background-color 0.7s ease, color 0.7s ease, box-shadow 0.3s ease;

}
.vim:hover {
    background-color: #e400cd;
    color: #fdd488;
    box-shadow: 0 0 5px rgb(187, 0, 255), /* brillo al rededor (cerca) */
    0 0 25px rgb(187, 0, 255); /* brillo al rededor */
    background-color: rgb(187, 0, 255); /* fondo */
    color: rgb(0, 0, 0); /* texto */
    cursor: pointer;
}

/* Contenedor */
/* Centrar el contenedor de las imágenes */
.container {
    position: relative; /* Necesario para posicionar los botones */
    display: flex;
    justify-content: center; /* Centra el contenido */
    align-items: center; /* Centra verticalmente */
    flex-direction: column; /* Alinea los elementos en columna */
}

/* Centrar las imágenes dentro de cada slide */
.mySlides {
    display: flex;
    flex-direction: column; /* Alinea el número y la imagen en columna */
    align-items: center; /* Centra horizontalmente */
}

/* Estilo para las imágenes */
.mySlides img {
    max-width: 100%; /* Asegura que la imagen no exceda el ancho del contenedor */
    height: auto; /* Mantiene la proporción de la imagen */
}

/* Estilo para el div que contiene la opción */
.Div1 {
    display: flex;
    justify-content: center; /* Centra horizontalmente */
    margin-top: 20px; /* Espacio superior */
}

.opcion img {
    max-width: 100%; /* Asegura que la imagen no exceda el ancho del contenedor */
    height: auto; /* Mantiene la proporción de la imagen */
}



/* --- */


body {
  font-family: Arial;
  margin: 0;
  background-image: url("fondo.png");
  background-size: cover;
  background-repeat: no-repeat;
  font-family: 'Shadows Into Light', sans-serif;
  color: #ffffff;
  background-attachment: fixed;
}

* {
  box-sizing: border-box;
}

img {
  vertical-align: middle;
}

/* Position the image container (needed to position the left and right arrows) */


/* Hide the images by default */
.mySlides {
  display: none;
}

/* Add a pointer when hovering over the thumbnail images */
.cursor {
  cursor: pointer;
}

/* XD Pasar imágenes */
/* Next & previous buttons */


/* Position the "next button" to the right */
.prev, .next {
   cursor: pointer;
    position: absolute; /* Posiciona los botones de forma absoluta */
    top: 50%; /* Centra verticalmente */
    transform: translateY(-50%); /* Ajusta la posición vertical */
    padding: 16px;
    color: white;
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    border-radius: 3px;
    user-select: none;
}
.prev {
	left: 25%;
}
/* Position the "next button" to the right */
.next {
  right: 25%;
  /* border-radius: 3px 0 0 3px; */
}

/* float */
.floatleft {
  float: left;
}