@font-face {
  font-family: 'StarsRevenge';
  src: url('/fonts/Stars-Revenge.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

a, a:visited, a:hover, a:active, a:focus { text-decoration: none; color: inherit; }
a { cursor: pointer; }


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

body {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: #f8f5f2;
  color: #f8f8f8;
}

.cover { 
  width: min(90vw, 700px); 
  margin: 0 auto; 
}

.book-bg {
  position: relative;
  width: 100%;
  aspect-ratio: 1/1;
  background: url('/images/black-book.png') center / contain no-repeat;
  filter:
    drop-shadow(0 1px 0 rgba(0,0,0,.25))
    drop-shadow(0 12px 32px rgba(0,0,0,.38));
  overflow: hidden; 
}

.book-bg::after {
  content: "";
  position: absolute;
  left: 50%; bottom: 6%;
  transform: translateX(-50%);
  width: 70%; height: 14%;
  background: radial-gradient(ellipse at center, rgba(0,0,0,.35) 0%, rgba(0,0,0,0) 70%);
  filter: blur(8px);
  opacity: .65;
  pointer-events: none;
}

.book-heading {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(0%, -54%); 
  z-index: 2;
  font-family: 'StarsRevenge', sans-serif; 
  font-size: clamp(18px, 6vw, 35px);
  color: #e5e5e5;
  text-shadow: 0 2px 4px rgba(0,0,0,0.6);
}

.zigzag {
  position: relative;        
  display: inline-block;
  line-height: 1.15;
}
.zigzag .ch { display: block; min-width: 1ch; }
.zigzag .ch:nth-child(odd)  { padding-right: .35em; text-align: right; }
.zigzag .ch:nth-child(even) { padding-left:  .35em; text-align: left;  }

.zigzag::before {
  content: "";
  position: absolute;
  inset: 0; 
  background: url('/images/wave.png') center / 220% auto no-repeat;
  z-index: -1;         
  opacity: .95;
  pointer-events: none;
}