style.css

/*
SPDX-FileCopyrightText: 2024 Pablo Portas López <81629707+TeenBiscuits@users.noreply.github.com>

SPDX-License-Identifier: Apache-2.0
*/

.fondo-animado {
  margin-top: 0;
  width: 100%;
  height: 100vh;
  animation: animacionColor 40s infinite alternate;
}

@keyframes animacionColor {     /*Funcion que se encarga de crear un degradado de varios colores*/

  0% {
    background-color: #8bc9f3;
  }

  25% {
    background-color: #b365d2;
  }

  50% {
    background-color: #e88b81;
  }

  75% {
    background-color: #ecd36e;
  }

  100% {
    background-color: #7ce8a9;
  }
}

/* div padre y tripartito que contiene a los tres principales */
.contenedor {   
  padding-top: 0;
  padding: 20px;
  padding-bottom: 25px;
  display: grid;
  grid-template-columns: 32.5% 35% 32.5%;
  /* Directamente establece las proporciones de los tres divs Los divs internos heredarán su anchura del grid-template-columns */
}

/* div principal donde se encuentra el temporizador y los dos contadores */
.texto {   
  box-shadow: 0px 20px 10px rgb(0, 0, 0, 0.5);
  line-height: 55px;
  border-radius: 10px;
  box-shadow: #ccc;
  background-image: url(imagenes/PapelNotas.png);
  margin-top: 5%;
  text-align: center;
  font-size: 35px;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  margin-left: 15%;
  margin-right: 20%;
  border: 1px solid #ccc;
  /* Borde para el área de texto */
  padding: 10px;
  /* Espacio interior para el área de texto */
  height: fit-content;
  /* Ajusta la altura al contenido */
}

/* segundo div principal donde está situado el puzzle */
.puzzle {    
  box-shadow: 0px 20px 10px rgb(0, 0, 0, 0.5);
  border: 5px #009578;
  background-image: url(imagenes/FondoTablero.jpg);
  display: grid;
  column-width: 100px;
  grid-template-columns: repeat(4, 1fr);
  aspect-ratio: 1/1;
  /* Cuatro columnas de tamaño igual */
  gap: 5px;
  /* Espacio entre las piezas del puzzle */
}

/* Ultimo div principal donde se encuentras los switches de ayuda */
.botones {  
  background-image: url(imagenes/PapelNotas.png);
  margin-top: 5%;
  border-radius: 10px;
  box-shadow: 0px 20px 10px rgb(0, 0, 0, 0.5);
  text-align: center;
  font-size: 35px;
  font-family: fantasy;
  margin-left: 20%;
  margin-right: 15%;
  border: 1px solid #ccc;
  /* Borde para el área de texto */
  padding: 10px;
  /* Espacio interior para el área de texto */
  height: fit-content;
  /* Ajusta la altura al contenido */
}

/* elementos que componen el rompecabezas */
.pieza {   
  place-items: center;
  background-color: light rgb(12, 207, 12);
  background-size: contain;
  /* Color de fondo de cada pieza */
  color: white;
  -webkit-text-stroke: 1px black;
  font-size: xx-large;
  font-family: Arial, Helvetica, sans-serif;
  /* Color del texto de cada pieza */
  display: flex;
  justify-content: center;
  /* Centra el contenido horizontalmente */
  align-items: center;
  /* Centra el contenido verticalmente */
  /* Altura de cada pieza */
}

/* cuerpo de la pagina */
body {  
  margin: 0;
}

h1 {
  margin-top: 0;
  text-align: center;
}

/* Estilo base para el switch */
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

/* Oculta el input */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* Estilo para el slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: .4s;
  border-radius: 34px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  transition: .4s;
  border-radius: 50%;
}

/* Cambia el fondo del slider cuando se marca el checkbox */
input:checked+.slider {
  background-color: #001c83;
}

/* Mueve el slider a la derecha cuando se marca el checkbox */
input:checked+.slider:before {
  transform: translateX(26px);
}

/* Opcional: agrega una sombra al slider */
.slider:active:before {
  width: 28px;
}

/*Estilo para el botón*/
.boton {   
  padding: 10px 20px;
  font-size: 16px;
  color: #fff;
  background-color: #001c83;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.boton:hover {
  background-color: #7d0047;
}

.siguente {
  display: inline-block;
}

.contenedor-centrado {
  display: flex;
  height: 20px;
  justify-content: center;
  align-items: center;
}

/* Imagen que aparece al presionar el switch de ayuda de ayuda*/
#imagenDeLaEsquina {
  display: none;
  text-align: center;
  padding: 4.0%;
}