/* Reset para márgenes y rellenos por defecto */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Estilos generales */
body {
  background-image:url('https://i.pinimg.com/736x/70/11/b6/7011b61ad3c2d13d2e3509d9999c5a6e.jpg');  
  background-attachment: fixed;
  font-family:ms gothic;
  color:black;
        font-size:14px;
  line-height: 1.6;
    background-color: #e0f0e9; /* Fondo suave en tonos verdes */
    color: #333;
    display: flex;
    flex-direction: column; /* Colocamos todo en una columna */
    align-items: center; /* Centrar contenido horizontalmente */
    min-height: 100vh; /* Asegura que el contenido ocupe toda la pantalla */
}

/* Encabezado */
header {
    background-color: rgba(256, 150, 140, 0.7);
    color: white;
    padding: 5px;
    text-align: center;
    width: 900px; /* El encabezado tiene el mismo ancho que el contenedor de las columnas */
    box-sizing: border-box;
    position: relative; /* Asegura que el encabezado se quede arriba */
    top: 0;
    z-index: 10; /* Asegura que el encabezado esté por encima de los demás elementos */
}

/* Barra de navegación */
nav {
    background-color: #4f7f4f; /* Verde intermedio */
    width: 900px; /* La barra de navegación tiene el mismo ancho que el contenedor */
    box-sizing: border-box;
    position: relative;
    display: flex; /* Usamos flexbox para distribuir los elementos */
}

/* Estilos para los enlaces */
nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex; /* Usamos flexbox para los <li> */
    width: 100%; /* La lista ocupará todo el espacio disponible */
}

nav ul li {
    flex: 1; /* Cada <li> ocupará una parte igual del espacio disponible */
    text-align: center; /* Centrar el texto dentro de cada <li> */
}

nav ul li a {
    display: block; /* Aseguramos que el <a> ocupe todo el <li> */
    color: #4f7f4f;
    text-decoration: none;
    padding: 10px 20px;
    background-color: #ffffff;
    border: 2px outset #bdbdbd; /* Borde con estilo outset */
    border-radius: 0px;
    font-size: 1.1em;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    transition: all 0.2s ease;
}

/* Estilo de los botones al pasar el mouse */
nav ul li a:hover {
    border: 2px inset #bdbdbd; /* Cambiar a borde inset al hacer clic */
    background-color: #ffffff; /* Verde más claro al pasar el ratón */
}

/* Efecto de "hundirse" al hacer clic (estado activo) */
nav ul li a:active {
    border: 2px inset #bdbdbd; /* Cambiar a borde inset al hacer clic */
    transform: translateY(2px);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* Contenedor principal con tres columnas */
.container {
    display: flex;
    justify-content: space-between; /* Asegura que las columnas estén separadas */
    width: 900px; /* El contenedor tiene un ancho máximo de 900px */
    max-width: 100%; /* Permite que el contenedor se ajuste si el ancho de la pantalla es menor */
    box-sizing: border-box;
    margin-top: 2px; /* Espaciado superior */
   overflow-y: auto; 
}

/* Estilos para las columnas */
.left-column, .right-column {
    background-color: white;
    padding: 10px;
    border-radius: 0px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    width: 200px; /* Las sidebars tienen 200px de ancho */
    max-height: 700px; /* Limitar la altura máxima */
    overflow-y: auto; /* Permitir el desplazamiento si el contenido excede la altura */
}

.center-column {
    background-color: rgba(256, 150, 140, 0.4);
    padding: 20px;
    border-radius: 0px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    width: 500px; /* La columna central tiene 500px de ancho */
    height: 700px; /* Altura de la columna central */
    overflow-y: auto; /* Permitir el desplazamiento */
    overflow-x: hidden; 
}

/* Pie de página */
footer {
    background-color: rgba(256, 150, 140, 1);
    color: white;
    text-align: center;
    padding: 10px;
    position: relative;
    width: 900px;
    max-width: 100%; /* Para que se ajuste a la pantalla */
    margin-top: 20px; /* Separar el pie de página */
    box-sizing: border-box;
}

/* Estilo de los enlaces del pie de página */
footer p {
    font-size: 1em;
}

/* Estilo para el texto en las columnas */
.left-column h2, .center-column h2, .right-column h2 {
    font-size: 1.5em;
    margin-bottom: 10px;
}

.image {
    width: 100%;
}

.gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;
}

.gallery-item {
  width: calc(33.33% - 10px);
  margin-bottom: 20px; /* More space for the caption */
}

.gallery-item img {
  width: 100%;
  height: 130px; /* Slightly shorter to allow space for text */
  object-fit: cover;
  cursor: pointer;
  transition: 0.3s;
  display: block;
}

.caption {
  margin-top: 5px;
  text-align: center;
  font-size: 14px;
  color: #333;
}

#popup {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.85);
  justify-content: center;
  align-items: center;
  z-index: 999;
}

#popup img {
  max-width: 90%;
  max-height: 90%;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.6);
  cursor: pointer;
}

/* Container for 3-column center layout */
.floating-gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  max-width: 960px;
  margin: 0 auto;
  padding: 20px 0;
}

/* Each image + caption */
.gallery-item {
  width: calc(33.33% - 20px);
  text-align: center;
}

/* Floating effect */
#float {
  animation-name: floating;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

/* Keyframe animation */
@keyframes floating {
  0%   { transform: translateY(0px); }
  50%  { transform: translateY(15px); }
  100% { transform: translateY(0px); }
}

/* Image styling */
.gallery-item img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  display: block;
}

/* Caption below image */
.caption {
  margin-top: 8px;
  font-size: 14px;
  color: #444;
}

/* Floating Recipe Gallery */
.floating-recipe {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  max-width: 960px;
  margin: 0 auto;
  padding: 20px 0;
}

.gallery-item {
  width: calc(33.33% - 20px);
  text-align: center;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.gallery-item:hover {
  transform: scale(1.05);
}

/* Float animation */
#float {
  animation-name: floating;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

@keyframes floating {
  0%   { transform: translateY(0px); }
  50%  { transform: translateY(15px); }
  100% { transform: translateY(0px); }
}

/* Image styling */
.gallery-item img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  display: block;
}

.caption {
  margin-top: 8px;
  font-size: 14px;
  color: #444;
}

/* Output text */
.nav-output {
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  margin-top: 20px;
  color: #222;
}


.botoncito {
  background: linear-gradient(to bottom,  rgba(251,185,225,1) 0%,rgba(245,232,203,1) 0%,rgba(246,219,162,1) 28%,rgba(246,219,162,1) 28%,rgba(253,185,226,1) 100%); 
  border: 1px dashed #000000;
  padding: 5px;
  text-align: justify;
}

/* nav output wrapper */
.nav-output {
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  margin-top: 20px;
  color: #222;
}

/* the botoncito box */
/* Layout for 3 pictures per row */
.floating-recipe {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 20px;
}

.gallery-item {
  width: calc(33.33% - 10px);
  text-align: center;
  cursor: pointer;
  transition: transform 0.3s;
}

.gallery-item:hover {
  transform: scale(1.05);
}

.gallery-item img {
  width: 100%;
  border-radius: 10px;
}

.caption {
  font-size: 1rem;
  margin-top: 5px;
  font-weight: bold;
}

/* Recipe box styling */
.boto-recipe {
  background: linear-gradient(to bottom, rgba(251,185,225,1) 0%, rgba(245,232,203,1) 0%, rgba(246,219,162,1) 28%, rgba(246,219,162,1) 28%, rgba(253,185,226,1) 100%);
  border: 1px dashed #000000;
  padding: 10px;
  margin-top: 20px;
  text-align: justify;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

/* Animated image inside recipe */
#ingredients {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 15px;
  animation: pop 1s ease-in-out infinite alternate;
  -webkit-animation: pop 1s ease-in-out infinite alternate;
  -moz-animation: pop 1s ease-in-out infinite alternate;
}

.recipe-item {
  width: calc(33.33% - 20px); /* 3 items per row */
  text-align: center;
  text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000, 0 0;
  font-style: italic;
  font-weight: bold;
  color: #fff;
}

.recipe-item img {
  width: 100%;
  border-radius: 8px;
  display: block;
  margin-bottom: 5px;
}

.recipe-item p {
  margin: 0;
  font-family: 'Courier New', monospace;
  font-size: 14px;
  text-shadow: 1px 1px 0 #fff;
  color: #000;
}

.procedure {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;
  gap: 10px;
}

.procedure-item {
  width: 100%;
  margin-bottom: 5px;
}

.procedure-item img {
  width: 430px;
  height: 350px;
  padding: 5px;    
  object-fit: contain; 
  cursor: pointer;
  transition: transform 0.3s;
}

.procedure-item img:hover {
  transform: scale(1.05);
}

.caption {
  margin-top: 5px;
  text-align: center;
  font-size: 14px;
  color: #333;
}

.cookies { 
border-width: 7px; 
border-style: solid; 
border-image: url('https://latte-lavanda.neocities.org/cafeteria/biscuitcreme.png') 7 fill round; 
height:auto;
border-radius:10px;
} 

/* ===== Scrollbar CSS ===== */
  /* Firefox */
  * {
    scrollbar-width: thin;
    scrollbar-color: #fa968c #ffffff;
  }

  /* Chrome, Edge, and Safari */
  *::-webkit-scrollbar {
    width: 15px;
  }

  *::-webkit-scrollbar-track {
    background: #ffffff;
  }

  *::-webkit-scrollbar-thumb {
    background-color: #fa968c;
    border-radius: 10px;
    border: 0px solid #ffffff;
  }