html, body {
  height: 100%;
}

.menu-center {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
}


.hint {
  font-family: 'MomsTypewriter', monospace;
  opacity: 0.6;
  letter-spacing: 0.15em;
  margin-bottom: 20px;
  font-size: 0.9em;
}


.menu {
  position: fixed;
  top: 20px;
  left: 20px;
  font-family: 'MomsTypewriter', monospace;
  z-index: 100;
}

.menu a {
  display: block;
  margin-bottom: 12px;
  color: #c0392b;
  text-decoration: none;
  letter-spacing: 0.15em;
  opacity: 0.7;
  transition: opacity 0.3s, transform 0.3s;
}

.menu a:hover {
  opacity: 1;
  transform: translateX(4px);
}


.chapter {
  font-size: 2.2em;
  text-align: center;
  margin: 80px 0 40px;
  letter-spacing: 0.3em;
}

img {
  max-width: 100%;
  display: block;
  margin: 40px auto;
  filter: grayscale(80%) contrast(120%);
}


@font-face {
  font-family: 'October Crow';
  src: url('fonts/OctoberCrow.ttf');
}

@font-face {
  font-family: 'Mom«t___';
  src: url('fonts/Mom«t___.ttf');
}


body {
  letter-spacing: 0.03em;
  background-color: #000;
  color: #c0392b;
  font-family: 'Mom«t___', monospace;
  line-height: 1.7;
  margin: 0;
  padding: 0;
}


.container {
  max-width: 700px;
  margin: 80px auto;
  padding: 20px;
}

h1 {
  font-family: inherit;
  font-size: 2.8rem;
  letter-spacing: 3px;
  text-align: center;
}

}

p {
  font-size: 1.1rem;
  letter-spacing: 0.4px;
  margin-bottom: 25px;
}

.intro {
  font-style: italic;
  opacity: 0.85;
}

.end {
  margin-top: 60px;
  font-size: 0.9rem;
  opacity: 0.6;
  text-align: center;
}

}

@keyframes whisper {
  0% {
    opacity: 0.6;
    filter: blur(0.5px);
  }
  50% {
    opacity: 1;
    filter: blur(0px);
  }
  100% {
    opacity: 0.7;
    filter: blur(0.8px);
  }
}

.intro {
  animation: whisper 4s infinite;
  letter-spacing: 1px;
}