/* © Lamec Sánchez Contreras, Alle Rechte vorbehalten */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Arial, sans-serif;
  font-size: 100%;
}

header {
  background-color: #333;
  color: white;
  padding: 1rem;
  text-align: center;
}


main {
  padding: 2rem;
  text-align: center;
}

.page {
  display: none;
  opacity: 0;
  transition: opacity 0.5s ease; /* Añade una animación de desvanecimiento */
}

.page.active {
  display: block;
  opacity: 1;
}

#profil {
  text-align: justify;
  padding: 20px;
  border-radius: 10px;
}

.h {
  margin-top: 2rem;
}

nav ul {
  display: none;
  flex-direction: row;
  gap: 0.5rem;
  padding: 0;
}

/* Menú desplegable cuando se activa */
nav ul.show {
  display: flex;
  background-color: #333;
  padding: 1rem;
  position: absolute;
  top: 60px; /*Alineación debajo del botón */
  left: 0;
  right: 0;
}

/* Estilos para los enlaces del menú en móviles */
nav a {
  color: white;
  font-size: 1.2rem;
  padding: 0.5rem;
  text-align: center;
}

nav ul {
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 1rem;
}

nav a {
  color: white;
  text-decoration: none;
  font-size: 1.2rem;
  position: relative;
  padding: 0.5rem;
  transition: color 0.3s ease, transform 0.3s ease;
}

nav a:hover {
  color: #ffcc00; /* Cambia el color al pasar el cursor */
  transform: scale(1.1); /* Agranda un poco el enlace */
}

/* Efecto de subrayado animado */
nav a::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background-color: #ffcc00;
  transition: width 0.3s ease, left 0.3s ease;
}

nav a:hover::before {
  width: 100%;
  left: 0;
}

.escoger{
  display: flex;
  align-items: center;
  color: #007bff;
}

h1{

  margin-right: 20px;
  hyphens: auto;
}

.h, h2 {
  color: #333;
  margin-bottom: 1rem;
  margin-left: 10px;
  font-size: 1.5rem;
  color: #333;
}


#dropdown {
  text-size-adjust: 20px;
  background-color: rgb(213, 217, 220);
  color: #3a4548;
  border-radius: 5px;
  width: 200px;
  height: 40px;
  font-size: 16px;
 
}

.mini_juego {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center; /* Centra los elementos horizontalmente */
}

.fotoJ {
  display: flex;
  justify-content: center; /* Centra las imágenes horizontalmente */
  gap: 10px; /* Espacio entre las imágenes */
}

.fotoJ img {
  max-width: 45%; /* Ajusta el tamaño máximo de las imágenes */
  height: auto; /* Mantiene la proporción de las imágenes */
  border: 5px solid #000; /* Línea gruesa negra */
  border-radius: 6px; /* Borde redondeado */
}
.spiel_01 {
  display: block;
  padding: 10px 20px;
  font-size: 16px;
  color: #fff;
  background-color: #007bff;
  text-decoration: none;
  border-radius: 5px;
  transition: background-color 0.3s;
  margin: 10px auto 0; /* Ajusta el margen para centrar el botón */
  width: fit-content; /* Ajusta el ancho del botón al contenido */
}

.spiel {
  display: block;
  padding: 10px 20px;
  font-size: 16px;
  color: #fff;
  background-color: #007bff;
  text-decoration: none;
  border-radius: 5px;
  transition: background-color 0.3s;
  margin: 10px auto 0; /* Ajusta el margen para centrar el botón */
  width: fit-content; /* Ajusta el ancho del botón al contenido */
}

.spiel:hover {
  background-color: #0056b3;
}

.container_porta {
  position: relative;
  text-align: center;
  display: flex;
  justify-content: center; /* Centra el contenido horizontalmente */
  align-items: center; /* Centra el contenido verticalmente */
  flex-direction: column;
  height: 45vh; /* Asegura que el contenedor ocupe toda la altura de la ventana */
}


.image {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  margin-top: 2rem;
  width: 350px;
  height: auto;
  margin-left: auto;
  margin-right: auto; /* Centra el contenedor */
}

.image img {
  width: 1px;
  flex-grow: 1;
  object-fit: cover;
  opacity: 0.8;
  transition: 0.8s ease;
  
}
.image img:hover {
  cursor: crosshair;
  width: 80px;
  opacity: 2;
  filter: contrast(120%);
  position: obsolute;
}

.content {
  margin-bottom: 2rem; /* Espacio entre secciones */
}
.content zuruck {
  text-align: center;
  display: block;
  margin-top: 1rem;
  color: #007bff;
  text-decoration: none;
}


.container03 {
  display: flex;
  justify-content: center;
  align-items: center;

}
#imagen02 {
  width: 300px;
  height: 80%;
  transition: box-shadow 4s;
  transform-origin: center;
  background-image: url(https://cdn.glitch.global/29fc6b9b-7e59-44f2-a004-e66db75b0ae3/space.webp?v=1737730753804);
  border-radius: 8px;
}

#imagen02:hover {
  box-shadow: 0px 0px 50px rgb(0, 0, 0, 1);
  cursor: crosshair;
}



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

.contenedor figure {
  position: relative;
  width: 400px;
  height: 250px;
  cursor: pointer;
  overflow: hidden;
  border-radius: 6px;
  box-shadow: 0px 15px 25px rgba(0,0,0,0.50);
}

.contenedor figure img {
  width: 100%;
  height: 100%;
  transition: all 400ms ease-out;
}

.contenedor figure .capa {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(10, 50, 228, 0.7);
  transition: all 400ms ease-out;
  opacity: 0;
  visibility: hidden;
  text-align: center;
}

.contenedor figure:hover > .capa,
.contenedor figure.touch-active > .capa {
  opacity: 1;
  visibility: visible;
}

.contenedor figure:hover > img,
.contenedor figure.touch-active > img {
  transform: scale(1.5);
}

.contenedor figure .capa h3 {
  color: #fff;
  font-weight: 400;
  margin: 70px 0 15px;
  transition: all 400ms ease-out;
}

.contenedor figure .capa p {
  color: #fff;
  font-size: 15px;
  line-height: 1.5;
  max-width: 220px;
  margin: auto;
}


.responsive-video {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  max-width: 80%;
  background: #000;
  margin: 0 auto;
}

.responsive-video video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

@media (max-width: 780px) {
  .responsive-video {
    max-width: 100%;
  }
}

@media (min-width: 770px) {
  .responsive-video {
    max-width: 66%;
  }
}

model-viewer {
  width: 100%;
  height: 400px;
  border-style: solid;
  border-width: 7px;
}

.slider {
  position: relative;
  width: 100%;
  max-width: 600px; /* Ajusta el tamaño máximo del slider */
  margin: auto;
  overflow: hidden;
  border: 2px solid #ddd;
  border-radius: 5px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.slides {
  display: flex;
  transition: transform 0.5s ease-in-out;
}

.slide {
  min-width: 100%;
  box-sizing: border-box;
}

.slide img {
  width: 100%;
  display: block;
}

button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: transparent;
  color: white;
  border: none;
  padding: 10px;
  cursor: pointer;
}

.prev {
  left: 0;
}

.next {
  right: 0;
}



.presumen {
  color: gray;
  align-items: center;
  text-align: justify;
 line-height: 1.2;
 hyphens: auto;

}

.presumen br {

  margin-bottom: 1rem; /* Añade un margen inferior para crear espacio entre líneas */
  display: block; /* Asegura que el margen se aplique correctamente */
  content: ""; /* Necesario para algunos navegadores */
}

.responsive-img {
  max-width: 100%;
  height: auto;
}

#opcion3 .content img {
  max-width: 100%; /* Hace que el GIF sea responsivo */
  height: auto; /* Mantiene la proporción del GIF */
  display: block; /* Asegura que el GIF se comporte como un bloque */
  margin: 10px auto; /* Centra el GIF horizontalmente */
}


footer {
  background-color: #222;
  color: #fff;
  font-size: 14px;
  bottom: 0;
  position: fixed;
  left: 0;
  right: 0;
  text-align: center;
  z-index: 999;
}


footer p {
  margin: 10px 0;
  text-align: center;
  hyphens: auto;
}


footer i {
  color: rgb(16, 16, 16);
}

footer a {
  color: #3c97bf;
  text-decoration: none;
}