/* base.css */
@import url("https://fonts.googleapis.com/css2?family=Aspekta:wght@300;550;850&display=swap");

:root {
  --transition-speed: 150ms;
  --default-bg: #fdf3ff;
}

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

html,
body {
  height: 110%;
  font-family: "Aspekta", sans-serif;
  background: var(--default-bg);
  transition: background-color var(--transition-speed) ease;
}

.lista-proyectos {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  justify-content: center;
  align-items: center;
  gap: 0.2rem;
}

.proyecto-item {
  text-decoration: none;
  color: #c8ccce;
  font-weight: 550;
  font-size: clamp(2.5rem, 8vw, 4rem);
  transition: color var(--transition-speed) ease, font-weight var(--transition-speed) ease;
}

.proyecto-item:hover,
.proyecto-item:focus-visible {
  font-weight: 850;
  outline: none;
  color: #fff9e6;
}
.volver-tiempo {
  position: fixed;
  top: 50%;
  left: 0rem;
  transform: translateY(-50%);
  background-color: transparent;
  color: #000000;
  font-family: 'Aspekta', sans-serif;
  font-weight: 550;
  font-size: clamp(1rem, 1vw, 1rem);
  text-decoration: none;
  border: none;
  transition: all 1s ease;
  cursor: pointer;
  z-index: 999;
}
  
.volver-tiempo:hover {
  font-weight: 800;
  color: #ebe2fd; /* o el color que prefieras */
}



@media (max-width: 768px) {
  .proyecto-item {
    font-size: clamp(2rem, 10vw, 3rem);
  }
}