:root{
  --bottom-gap: 2vh; /* empty space at the bottom (15% of screen height) */
  --top-gap: 80px;    /* space to account for the name/header area */
}
@font-face{font-family: Uncut;
			src:url("fonts/Uncut/Webfonts/UncutSans-Book.woff2")}
body {
  margin: 0;
  font-family: Uncut, sans-serif;
  background: white;
  color: black;
}

header {
  position: fixed;
  top: 20px;
  left: 20px;
  color: lightblue
}

header a:hover{
	filter: blur(0.7px);
	transition: 0.5s;
	color: lightsteelblue;
}

.site-title {
  text-decoration: none;
  font-weight: regular;
  color: black;
  font-size: 19px;
}

main {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 20px var(--bottom-gap); /* adds that bottom space */
}

/* Carousel */
/* Carousel container */
.carousel {
  position: relative;
  width: min(90vw, 900px);
  height: calc(100vh - var(--bottom-gap) - var(--top-gap));
  margin: auto;
  overflow: hidden;
}

.carousel-track {
  display: flex;
  transition: transform 0.5s ease-in-out;
  height: 100%; /* so images can size to the container height */
}

/* All images stacked on top of each other */
.carousel img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity 1s ease; /* fade transition */
}
/* Show only the active one */
.carousel img.active {
  opacity: 1;
}

/* .carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  font-size: 2rem;
  cursor: pointer;
  color: black;
}

.carousel-btn.prev {
  left: 10px;
}

.carousel-btn.next {
  right: 10px;
} */

/* ===========================
   Info page layout & styling
   =========================== */


/* Main wrapper sits on the right side of the page */
.info-wrapper {
  max-width: 360px;
  margin-left: auto;          /* pushes it to the right */
  margin-right: 25%;         /* keeps some space from the right edge */
  padding-top: calc(var(--top-gap) + 100px); /* drop below header */
  padding-bottom: var(--bottom-gap);
}

/* Profile image above the text */
.info-photo {
  width: 240px;      /* adjust to taste */
  height: auto;
  display: block;
  margin-bottom: 18px;
  object-fit: cover;
  box-shadow: none;
}

/* Paragraph / bio */
.bio {
  font-size: 16px;
  line-height: 1.45;
  margin: 0 0 18px 0;
}

/* meta lines: username, email, location */
.info-meta {
  margin: 10px 0;
  font-size: 16px;
  line-height: 1.4;
}

/* Back link fixed in a corner (desktop) */
.back-link {
  position: fixed;
  right: 20px;      /* screenshot shows Back at bottom-right */
  bottom: 20px;
  text-decoration: none;
  color: black;
  font-size: 16px;
  z-index: 10;
}

/* Small screens — stack and center */
@media (max-width: 720px) {
  .info-wrapper {
    max-width: 90%;
    margin: calc(var(--top-gap) + 8px) auto 40px;
    padding-bottom: 40px;
  }

  .info-photo {
    width: 60vw;
    max-width: 300px;
  }

}

/*Transiciones*/
.prueba1{
	display: flex;
	position: fixed;
	bottom: 25px;
	right: 25px;
	width:auto;
	height: auto;
	text-align: right;
	/*background-color:#185A97;
	border-radius: 20px;
	filter: blur(20px);
	opacity: 50%;*/
	}

nav a:hover{
	filter: blur(0.7px);
	transition: 0.5s;
	color: lightsteelblue;
}

.info-link {
  text-decoration: none;
  color: black;
}

.info-link:hover {
  filter: blur(0.7px);
  transition: 0.5s;
  color: lightsteelblue;
}
/* Invisible click areas covering each half of the carousel */
.hotspot {
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  cursor: pointer;
  z-index: 3;          /* above images */
  background: transparent;
  user-select: none;
  -webkit-user-select: none;
  outline: none;
}

.hotspot.left  { left: 0; }
.hotspot.right { right: 0; }

/* Optional tiny tactile feedback on click */
.hotspot:active {
  opacity: 0.02; /* barely visible tap feedback */
}

/*Ahora necesito de neuvo de chat gpt:
	Quitar las flechas del carousel, poner que la mitad de la pantalla sea el boton
	que el carousel sea automatico, cada bastante tiempo,
	Terminar de personalizar la info page
	Hacer una buena seleccion de las imagenes

<img src="images/photo1.jpg" alt="Artwork 1">
        <img src="images/photo2.jpg" alt="Artwork 2">
        <img src="images/photo3.jpg" alt="Artwork 3">
		<img src="images/photo4.jpg" alt="Artwork 4">
		<img src="images/photo5.jpg" alt="Artwork 5">
		<img src="images/photo6.jpg" alt="Artwork 6">
		<img src="images/photo7.jpg" alt="Artwork 7">
		<img src="images/photo8.jpg" alt="Artwork 8">
        <img src="images/photo9.jpg" alt="Artwork 9">
        <img src="images/photo10.jpg" alt="Artwork 10">
		<img src="images/photo11.jpg" alt="Artwork 11">
		<img src="images/photo12.jpg" alt="Artwork 12">
		<img src="images/photo13.jpg" alt="Artwork 13">
		<img src="images/photo14.jpg" alt="Artwork 14">
*/