@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=IBM+Plex+Sans:wght@100..700&display=swap');

@font-face {
    font-family: 'Play';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/fonts/IBMPlexPlay.woff2') format('woff2'),
         url('/fonts/IBMPlexPlay.woff') format('woff');
    /* Optional: limit glyph range to save bandwidth (edit if needed)
    unicode-range: U+000-5FF; 
    */
  }

   @font-face {
    font-family: 'Play Mono';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/fonts/IBMPlexMono-PLAY.woff2') format('woff2');
    /* Optional: limit glyph range to save bandwidth (edit if needed)
    unicode-range: U+000-5FF; 
    */
  }

  @font-face {
    font-family: 'PlayBat';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/fonts/IBMPlexMono-PLAYBATS.woff2') format('woff2');
    /* Optional: limit glyph range to save bandwidth (edit if needed)
    unicode-range: U+000-5FF; 
    */
  }



@page {
    /* --paged-layout: booklet; */
    size: A5;
    margin-top: 10mm;
    margin-bottom: 10mm;

    /*font-family: 'Times', 'Arial Narrow', Arial, sans-serif;*/
  
  }

  @page:left {
    margin-left: 5mm;
    margin-right: 10mm;
  }

  @page:first {
    margin-left: 5mm;
    margin-right: 10mm;
  }

  @page:nth(2n+4) {
    @top-center {
      content: "Digitale";
      font-family: "Play";
    }
    @bottom-center {
      content: counter(page);
      font-size: 1em;
      font-family: "Play";
    }
  }
  
  @page:right {
    margin-left: 10mm;
    margin-right: 5mm;
  }

  @page:nth(2n+3) {
    @top-center {
      content: "Welten";
      font-family: "Play";
    }
    @bottom-center {
      content: counter(page);
      font-size: 1em;
      font-family: "Play";
    }
  }

  @page:nth(3) {
     @top-center {
      content: "DW";
    }
  }

  @page:nth(18) {
     @top-center {
      content: "DW";
    }
  }

  @page:nth(20) {
     @top-center {
      content: "";
    }
    @bottom-center {
      content: "";
    }
  }

   @page:nth(19) {
     @top-center {
      content: "";
    }
    @bottom-center {
      content: "";
    }
  }

   @page:nth(16) {
      margin:0;
      line-height:0;
    }
    @page:nth(17) {
      margin:0;
      line-height:0;
    }


@media print {
    body{
        font-family: "IBM Plex Mono", sans-serif;
        font-weight: 300;
        font-size: 1em;
    }


     h1{
        /* break-before: page; */
        font-size: 3em;
        line-height: 2.5;
        color: red;

     }
     h2{
        break-before: page;
        font-family: "Play Mono";
        color:#000000;
        /* text-shadow: 0 0 5px #FFF, 0 0 10px #FFF, 0 0 15px #FFF, 0 0 20px #000000, 0 0 30px #000000, 0 0 40px #000000, 0 0 55px #000000, 0 0 75px #000000, 5px -6px 2px rgba(0,0,0,0); */
        font-feature-settings: "zero" on, "salt" on, "ss02" on, "ss03" on, "ss19" on, "liga" off;
        text-transform: uppercase;
        font-weight: 700;
        font-size: 2em;
        margin: 0;
        
     }
     h3{
      font-family: "Play Mono";
        font-feature-settings: "zero" on, "salt" on, "ss02" on, "ss03" on, "ss19" on, "liga" off;
        text-transform: uppercase;
        font-weight: 900;
        margin: 0 2em;
        font-size: 1em;
     }

     .credits>blockquote{
      font-size: 0.7em;
     }

     blockquote{
        margin: 0;
        font-size: 0.9em;
        line-height: 1.4;
        margin-bottom: 1em;
     }

     .artists{
        margin-bottom: 0.5em;
     }


     .icon{
      font-family: "PlayBat";
      color:rgb(0, 0, 0);
     }

     .full_img{
      object-fit: contain;
    width: 100%;
    height: 100%;
      z-index: -1;
     }


     .full_img_scan
     {
      /* --pagedjs-full-page: page; */
      object-fit: cover;
      object-position: 0px 0px;
      width: 100%;
      height: auto;
     }

     .last_img{
      position: absolute;
      bottom: 0;
     }

     .imprint{
      position: absolute;
      bottom: 0;
      right:0;
      font-size: 0.7em;
     }
}

img {
  max-width: 100%;
}

.pink-font {
  font-weight: bold;
  color: #000000;
}

.center-div {
  width: 100%;
  display: flex;
  justify-content: center;
}

.image-maze {
  margin: auto;
  width: 60%;
}


.dotted-fade {
  position: relative;
  color: black;
  isolation: isolate; /* keeps the pseudo-element confined */
}

/* the dithered, fading halo */
.dotted-fade::after {
  content: attr(data-text);
  position: absolute;
  inset: -0.5em; /* controls halo spread */
  z-index: -1;
  background:
    radial-gradient(circle at 1px 1px, rgba(0, 0, 0, 0.4) 1px, transparent 0);
  background-size: 4px 4px;

  /* fade out radially from text shape */
  mask-image: radial-gradient(circle, black 0%, transparent 80%);
  -webkit-mask-image: radial-gradient(circle, black 0%, transparent 80%);

  /* use the text as a transparency mask — this makes the pattern only appear around it */
  mix-blend-mode: multiply;
  opacity: 0.4;
  pointer-events: none;
  filter: blur(2px);
}