@font-face {
  font-family: 'TT2020';
  src: url('fonts/style_g.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
  
  
  
  body {
    margin: 0;
    background: #0a0807;
    height: 100vh;
    overflow: hidden;
  }
 
  .paper {
    height: 66%;
    width: 70%;
    margin-left: auto;
    margin-right: auto;
    top: 11%;
    position: relative;
 
    background-color: #ece3cd;
    background-image:
      radial-gradient(ellipse 70% 55% at 28% 22%, rgba(255, 248, 226, 0.55) 0%, transparent 60%),
      radial-gradient(ellipse 80% 70% at 78% 82%, rgba(150, 130, 92, 0.18) 0%, transparent 55%),
      radial-gradient(ellipse 40% 30% at 12% 92%, rgba(120, 95, 60, 0.10) 0%, transparent 70%),
      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400'><filter id='p'><feTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='3' stitchTiles='stitch' seed='4'/><feColorMatrix values='0 0 0 0 0.55  0 0 0 0 0.50  0 0 0 0 0.40  0 0 0 0.22 0'/></filter><rect width='100%25' height='100%25' filter='url(%23p)'/></svg>");
    background-blend-mode: normal, normal, normal, multiply;
 
    box-shadow:
      0 4px 10px rgba(0, 0, 0, 0.45),
      0 28px 60px rgba(0, 0, 0, 0.55),
      0 60px 110px rgba(0, 0, 0, 0.4),
      inset 0 0 90px rgba(95, 75, 45, 0.14);
      
      font-family: 'TT2020', 'Special Elite', 'Courier Prime', 'Courier New', Courier, monospace;
      
  }
 
  .paper::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 380 380'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch' seed='11'/><feColorMatrix values='0 0 0 0 0.45  0 0 0 0 0.40  0 0 0 0 0.32  0 0 0 0.55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23g)'/></svg>");
    mix-blend-mode: multiply;
    opacity: 0.55;
  }
.center {
  position: absolute;
  top: 25%;
  left: 15%;
  right: 15%;


  container-type: inline-size;
  text-align: center;          /* horizontal centering only */
}

.menu {
  list-style: none;            /* remove the bullets */
  padding: 0;                  /* remove default left padding */
  margin: 0;
}

.menu li {
  display: inline-block;
  margin: 6cqi 3cqi;            /* vertical spacing between items */
  
}

.menu a {
  text-decoration: none;
  color: inherit;
  font-size: 3cqi;
}
    
    .center h1 {
  font-size: 3cqi;   /* 6% of .center's width */
  font-weight: normal;
  

}
    
    
.footer {
  container-type: inline-size;
  width: 49vw;                      /* matches .center's inline size */
  left: 50%;
  transform: translateX(-50%);      /* re-center it */
  /* remove left: 0; right: 0; */
  
  position: absolute;
  text-align: center;
  font-family: 'TT2020', 'Special Elite', 'Courier Prime', 'Courier New', Courier, monospace;
  text-transform: lowercase;
  top: 90%;
}

.footer a {
  color: #594f44;
  text-decoration: none;
  margin: 0 1.2em;
  font-size: 3cqi;
}

.footer span {
  color: #594f44;
  font-size: 3cqi;
}

.content {
  width: 66.6667%;
  margin: 0 auto;
  font-size: 3cqi;
  text-align: left;
}