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

:root {
  --pasado-bg: #ffde45;
  --presente-bg: #fdd8e2;
  --futuro-bg: #c5d8d5;
  --transition-speed: 150ms;
}

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

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

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

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

.nav-item:hover,
.nav-item:focus-visible {
  font-weight: 950;
  outline: none;
  color: #fff9e6;
}

@media (max-width: 768px) {
  .nav-item {
    font-size: clamp(2rem, 10vw, 3rem);
  }
} 
.footer-meta {
    position: absolute;
    bottom: 1rem;
    width: 100%;
    text-align: center;
    font-family: "Aspekta", sans-serif;
    font-weight: 500;
    text-transform: uppercase;
    font-size: 1rem;
    letter-spacing: 0em;
  }
  
  .footer-meta span {
    display: inline-block;
    background-color: #000;
    color: #fff;
    padding: 0.005rem 0.15rem;
    line-height: 0.7;
  }