@layer base, page, responsive;

@layer base {
  html, body{
    height: 100%;
  }
  body{
    font-family:'Pangolin', verdana;
    font-size: 1rem;
    font-weight: normal;
    margin: 0;
    background: url(/assets/backgrounds/stars5.gif) repeat #000000; /* Black */
  }
  @media (prefers-color-scheme: light) {
    body{
      background: url(/assets/backgrounds/bg2.jpg) repeat #eeeef6; /* Lavender */
    }
  }
  img{max-width:100%; max-height:100%; object-fit: contain;}

  .container{
    margin:0;
    height:100vh;
    display:flex;
    padding: 0;
    box-sizing: border-box;
  }

  .note{
    flex: 1 1 auto;
    display:flex;
    box-shadow: 0 0 8px black;
    padding: 0.5rem;
    box-sizing: border-box;
    min-width: 0;
  }

  .paper{
    flex: 1 1 auto;
    margin: 0;
    background: transparent;
    color:black;
    display:none;
    position: relative;
    flex-direction:column;
    box-shadow: 0 0 6px black;
    overflow:visible;
    padding: 1.25rem 0;
    min-width: 0;
  }

  .book-cover{
    flex: 0 0 auto;
    width: 50%;
    margin: -0.5rem -0.5rem -0.5rem auto;
    position: relative;
    display:flex;
    align-items:center;
    justify-content:center;
    padding-left: 3.125rem;
    box-sizing: border-box;
    min-width: 0;
    background-image: var(--cover-bg-image);
    background-color:#000;
    background-repeat: repeat;
  }
  .book-cover::before{
    content:"";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 100%;
    width: 100vw;
    pointer-events: none;
    z-index: 0;
    background: linear-gradient(to left, rgba(0,0,0,0.85), transparent 40%);
  }
  @media (prefers-color-scheme: light) {
    .book-cover::before{
      background: none;
    }
  }
  .book-cover a{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-decoration:none;
    cursor:pointer;
    background: var(--cover-a-bg);
    padding: 1.5rem 2.25rem;
    border-radius: 0;
    border: 6px solid transparent;
    border-image: var(--cover-border-image);
    box-shadow:
      0 4px 14px rgba(0,0,0,0.5),
      inset 0 2px 6px var(--cover-inset-shadow, rgba(0,0,0,0.45)),
      inset 0 -2px 6px var(--cover-highlight);
  }
  .book-cover img{
    max-width:70%;
    filter: drop-shadow(2px 4px 8px rgba(0,0,0,0.6));
  }
  .book-cover .cover-text{
    font-family: 'Pangolin', verdana;
    font-size: 2rem;
    color: var(--ink);
    letter-spacing: 0.05em;
    text-align: center;
    filter: drop-shadow(2px 4px 8px rgba(0,0,0,0.6));
  }

  .cover-spine{
    position: absolute;
    top: 2.75rem;
    bottom: 2.75rem;
    left: -1.25rem;
    width: 3.75rem;
    pointer-events: none;
    z-index: 1;
  }
  .cover-spine::before,
  .cover-spine::after{
    content:"";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 3.75rem;
    background-repeat: repeat-y;
    background-size: 3.75rem 2.5rem;
    background-position: left top;
  }
  .cover-spine::before{
    z-index: 1;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%2760%27%20height%3D%2740%27%3E%3Crect%20x%3D%2738%27%20y%3D%2713%27%20width%3D%2714%27%20height%3D%2714%27%20rx%3D%271%27%20fill%3D%27%230a0a0a%27%20stroke%3D%27%231a1a1a%27%20stroke-width%3D%271%27/%3E%3C/svg%3E");
  }
  .cover-spine::after{
    z-index: 2;
    filter: drop-shadow(0px 2px 1px rgba(0,0,0,0.45));
  }

  .spread{
    position: relative;
    z-index: 0;
    flex: 1 1 auto;
    display:none;
    flex-direction:row;
    align-items: stretch;
    gap: 3.125rem;
    min-height: 0;
  }

  .page-nav{
    flex-shrink: 0;
    display:flex;
    padding: 0.375rem 1.25rem 0.875rem;
  }
  .page-left .page-nav{ justify-content: flex-start; }
  .page-right .page-nav{ justify-content: flex-end; }
  .page-nav a{
    font-family:'Pangolin', verdana;
    font-size: 1.25rem;
    color: var(--ink);
    text-decoration:none;
    border: 1px dashed var(--nav-border);
    border-radius: 0.5rem;
    padding: 0.5rem 1.25rem;
  }

  .dog-ear{
    position:absolute;
    bottom:0;
    width:10.5rem;
    height:10.5rem;
    z-index:1;
    display:flex;
    font-family:'Pangolin', verdana;
    font-size:1.4rem;
    color: var(--ink);
    text-decoration:none;
    box-sizing:border-box;
  }
  .dog-ear-left{
    left:0;
    clip-path: polygon(0 100%, 0 25%, 75% 100%);
    background: linear-gradient(135deg, var(--dogear-a), var(--dogear-b));
    align-items:flex-end;
    justify-content:flex-start;
    padding: 0 0 0.75rem 0.75rem;
  }
  .dog-ear-right{
    right:0;
    clip-path: polygon(100% 100%, 100% 25%, 25% 100%);
    background: linear-gradient(225deg, var(--dogear-a), var(--dogear-b));
    align-items:flex-end;
    justify-content:flex-end;
    padding: 0 0.75rem 0.75rem 0;
  }
  .dog-ear:hover{
    filter:brightness(1.2);
  }

  .page{
    flex: 1 1 0;
    min-width: 0;
    min-height: 0;
    z-index: 1;
    position: relative;
    display:flex;
    flex-direction:column;
    background-color: var(--page-color);
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%27120%27%20height%3D%27120%27%3E%3Cfilter%20id%3D%27n%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.9%27%20numOctaves%3D%272%27%20stitchTiles%3D%27stitch%27/%3E%3CfeColorMatrix%20type%3D%27matrix%27%20values%3D%270%200%200%200%200.5%20%200%200%200%200%200.5%20%200%200%200%200%200.5%20%200%200%200%200.13%200%27/%3E%3C/filter%3E%3Crect%20width%3D%27100%25%27%20height%3D%27100%25%27%20filter%3D%27url(%23n)%27/%3E%3C/svg%3E");
    background-repeat: repeat;
    box-shadow:
      0 16px 26px rgba(0,0,0,0.55),
      0 0 0 1px var(--page-edge);
  }

  .lines{
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    margin: 0;
    padding: 1rem 2.5rem 1.5rem;
    line-height:1.625rem;
    color: var(--ink);
  }

  .spine{
    position: absolute;
    top: 1rem;
    bottom: 1rem;
    left: 50%;
    width: 5.625rem;
    transform: translateX(-50%);
    pointer-events: none;
    z-index: 0;
    background:
      linear-gradient(to right,
        transparent 0, transparent 0.5rem,
        rgba(0,0,0,0.4) 0.875rem, rgba(0,0,0,0.4) 4.75rem,
        transparent 5.125rem, transparent 5.625rem
      ),
      linear-gradient(to right,
        rgba(0,0,0,0.1) 0%, transparent 15%,
        transparent 85%, rgba(0,0,0,0.1) 100%
      );
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, black 3.75rem, black calc(100% - 3.75rem), transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, black 3.75rem, black calc(100% - 3.75rem), transparent 100%);
  }
  .spine-coil{
    position: absolute;
    top: 1rem;
    bottom: 1rem;
    left: 50%;
    width: 5.625rem;
    transform: translateX(-50%);
    pointer-events: none;
    z-index: 2;
  }
  .spine-coil::before,
  .spine-coil::after{
    content:"";
    position: absolute;
    inset: 0;
    background-repeat: repeat-y;
    background-size: 5.625rem 2.5rem;
    background-position: center top;
  }
  .spine-coil::before{
    z-index: 1;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%2790%27%20height%3D%2740%27%3E%3Crect%20x%3D%273%27%20y%3D%2713%27%20width%3D%2714%27%20height%3D%2714%27%20rx%3D%271%27%20fill%3D%27%230a0a0a%27%20stroke%3D%27%231a1a1a%27%20stroke-width%3D%271%27/%3E%3Crect%20x%3D%2773%27%20y%3D%2713%27%20width%3D%2714%27%20height%3D%2714%27%20rx%3D%271%27%20fill%3D%27%230a0a0a%27%20stroke%3D%27%231a1a1a%27%20stroke-width%3D%271%27/%3E%3C/svg%3E");
  }
  .spine-coil::after{
    z-index: 2;
    filter: drop-shadow(0px 2px 1px rgba(0,0,0,0.45));
  }

  .lines h1, .lines h2, .lines h3, .lines h4, .lines h5, .lines h6, .lines ul, .lines ol, .lines li{margin:0}
  .lines h1{
    font-size:20pt;
    margin: 1.625rem 0 1.625rem;
    text-align: center;
  }
  .lines h1 img{
    display:block;
    height:3.25rem;
    width:auto;
    max-width:100%;
  }
  .lines h1 .h1-photo, .lines h2 .h1-photo, .lines h3 .h1-photo{
    position:relative;
    display:inline-block;
    vertical-align: top;
    background: var(--h1-photo-bg);
    padding: 0.625rem 1rem;
    box-shadow: 1px 1px 4px rgba(0,0,0,0.35);
  }
  .lines h1 .h1-photo::before, .lines h2 .h1-photo::before, .lines h3 .h1-photo::before{
    content:"";
    position:absolute;
    top:-0.625rem;
    left:50%;
    transform: translateX(-50%) rotate(-2deg);
    width:60%;
    height:1.125rem;
    background-color: var(--tape-gray);
    border-right:1px dotted var(--tape-edge-gray);
    border-left:1px dotted var(--tape-edge-gray);
    opacity:0.4;
    box-shadow:0.5px 0.5px 1px rgba(0,0,0,0.2);
  }
  .lines h2 .h1-photo img, .lines h3 .h1-photo img{
    display:block;
    max-width:100%;
  }

  .lines p, .lines li{
    text-shadow:
      0.4px 0.4px 0 var(--shimmer-1),
      -0.3px -0.3px 0 var(--shimmer-2);
  }
  .lines p{
    text-indent: 1.875rem;
    margin-top:0;
    margin-bottom:1.625rem;
  }
  .lines p.center{
    text-align:center;
    text-indent:0;
  }

  .lines a{
    color:var(--ink);
    text-decoration:none;
    padding: 0 0.1875rem;
    background: var(--lines-a-bg);
  }
  .lines a:hover{
    background: var(--lines-a-bg-hover);
  }

  *::-moz-selection{
    background: var(--selection-bg);
  }
  *::selection{
    background: var(--selection-bg);
  }

  .back-button{
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1001;
    width: 260px;
    height: 260px;
    box-sizing: border-box;
    border-radius: 50%;
    border: 3px solid transparent;
    background-image:
      linear-gradient(#000000, #000000), /* Black */
      linear-gradient(180deg, #FF3399, #FF355E, #FF9980, #FED85D, #9DE093, #02A4D3, #4F69C6, #6B3FA0);
    background-origin: padding-box, border-box;
    background-clip: padding-box, border-box;
    background-repeat: no-repeat, no-repeat;
    background-position: 0 0, 0 0;
    background-size: auto, 100% 100%;
    transform: translate(-50%, -50%);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }
  .back-button:focus{
    outline: 2px solid var(--ink);
    outline-offset: 2px;
  }
  .back-button::after{
    content:"";
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background-image: url('/assets/backgrounds/moontexture.png');
    background-size: 90px 90px;
    background-repeat: repeat;
    background-position: center;
    opacity: 0.2;
    pointer-events: none;
    z-index: 0;
  }
  .back-button span{
    position: absolute;
    top: 68%;
    left: 68%;
    transform: translate(-50%, -50%);
    z-index: 1;
    font-family: 'Zen Dots', monospace;
    font-size: 1.4rem;
    font-weight: normal;
    white-space: nowrap;
    color: var(--ink);
    -webkit-text-stroke: 1.25px #100e25;
    paint-order: stroke fill;
    text-shadow:
      1.5px 1.5px 0 #100e25,
      -1.5px 1.5px 0 #100e25,
      1.5px -1.5px 0 #100e25,
      -1.5px -1.5px 0 #100e25;
  }
  .back-button:hover span{
    filter: brightness(1.3);
  }
  @media (prefers-color-scheme: light) {
    .back-button{
      background-image:
        linear-gradient(#ffffff, #ffffff), /* White */
        linear-gradient(180deg, #FF3399, #FF355E, #FF9980, #FED85D, #9DE093, #02A4D3, #4F69C6, #6B3FA0);
      box-shadow: 0 2px 8px rgba(16, 14, 37, 0.25);
    }
    .back-button:hover{
      box-shadow: 0 2px 16px rgba(16, 14, 37, 0.4);
    }
    .back-button span{
      -webkit-text-stroke: 0.75px #100e25;
      text-shadow:
        1.5px 1.5px 0 #ffffff,
        -1.5px 1.5px 0 #ffffff,
        1.5px -1.5px 0 #ffffff,
        -1.5px -1.5px 0 #ffffff;
    }
  }
}

@layer responsive {
  @media (max-width:1100px) {
    html, body{ height: auto; }
    .container{ height: auto; min-height: 100vh; }
    .note{ display:block; }
    .spine, .spine-coil{ display:none; }
    .page{ display:block; }
    .lines{ overflow-y: visible; }

    .book-cover{ display:none; }
    .paper{ display:block; }
    .spread{ display:block; }
    .page-nav{ display:none; }
    .dog-ear{ display:none; }
    .back-button{ display:none; }
  }

  @media (max-width:576px) {
    .paper{margin:0.125rem;}
    .lines p{text-indent:0;}
  }
}