@font-face {
  font-family: 'codex';
  src: url('fonts/codex.ttf') format('opentype');
}

@font-face {
  font-family: 'dreamsnote';
  src: url('fonts/DreamsNote.woff2') format('woff2');
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex; 
  justify-content: center;
  align-items: center;
  background-color: #0f1519;
}

.title {
  display: flex;
  align-items: flex-start;
  gap: 70px;
  transform: translateX(-13rem);
  color: #697d72;

}

.line-one {
  font-family: 'dreamsnote';
  font-weight: thick;
  font-size: 4.4rem;
  letter-spacing: 0.15em;
  transform: rotate(-90deg);
  transform-origin: right;
  white-space: nowrap;
}

.line-two {
  font-family: 'codex';
  font-size: 18rem;
  font-weight: normal;
  line-height: 0.9;
  margin-top: 60px;
}

a {
  text-decoration: none;
  color: #697d72;
  transition: color 0.3s ease, opacity 0.3s ease;
}

.link {
  position: relative;
  text-decoration: none;
  color: #697d72;
  display: inline-block;
  transition: color 0.6s ease, text-shadow 0.6s ease;
}

.link:hover {
  color: #aac7ba;
  text-shadow: 0 0 13px rgba(171, 203, 188, 0.4);
}

.hover-text {
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translate(-50%, 20px);

  font-family: 'dreamsnote';
  font-size: 1.8rem;
  font-weight: normal;
  letter-spacing: 0.1em;
  white-space: nowrap;

  opacity: 0;
  /* hidden by default */

  transition: opacity 0.8s ease, transform 0.8s ease;
  transform: translateX(-8.9rem);
}

.link:hover .hover-text {
  opacity: 1;
  /* ← make visible on hover */
}