#dfMenu {display: none}
#dfLive {display:none}
#dfReleases {display:none}
#dfMV {display:none}
#dfLinks {display:none}
#soloMenu {display: none}
#soloJACKWIP {display: none}
#soloJACKU {display: none}
#soloTUNNEL {display: none}
#soloSET {display: none}
#soloAMAJ {display: none}
#soloAS {display: none}
#mfpMenu {display: none}
#mfpX {display: none}
#mfpAC {display: none}
#mfpES {display: none}
#mfrMenu {display: none}
#mfrX {display: none}
#mfrY {display: none}
#mfrZ {display: none}
#calMenu {display: none}
#mfrGehenGeht {display: none}
#mfrTINMA {display:none}
#mfrTTT {display:none}
#aboutMenu {display:none}
#contactMenu {display:none}

html {
  -webkit-text-size-adjust: none;
  text-size-adjust: none;}

  .back {display: block;
  position: fixed;}

html, body {
  overflow-x: hidden;
  max-width: 100%;}

body {background-color: rgb(176, 210, 255);
font-family: 'Courier New', Courier, monospace;}

button {all: unset;
cursor: pointer;
color: rgb(0, 0, 0);
background-color: rgb(176, 210, 255)}

/* Pressed buttons: shown while a button is held down (:active) and for as
   long as its section is open (.pressed, toggled in index.js).
   box-shadow spread grows the red background past the text without
   changing layout, and the outline follows the border-radius. */
button:active,
button.pressed {
  background-color: rgba(159, 169, 255, 0);
  border-radius: 50%;
  outline: 0.1px solid rgb(255, 255, 0);
  outline-offset: 0.15rem;
}

p {width: min(600px, 90vw);
margin: 0.2rem;
font-size: 0.7rem;
line-height: 1.1rem;
color: rgb(0, 0, 0);
mix-blend-mode: luminosity;}

.text-bg {background-color:rgb(176, 210, 255);}

h2 {all: unset;
font-size: 0.6rem;
font-weight: bold;
letter-spacing: 0.3rem;
margin-left: 0.2rem;
color: rgb(255, 255, 255);
mix-blend-mode: difference;}

a {color: rgb(0, 30, 255);}

.container {display: flex;
flex-direction: column;
font-family: 'Courier New', Courier, monospace;
font-size: 0.9rem;}

.mainMenu {margin: 0.3rem}

.menu {margin-left: min(20px, 3vw);}

.submenu {margin-left: min(20px, 3vw);}

.subbutton {
  font-size: 0.8rem;
  margin: 0.2rem;
  color: rgb(0, 0, 0);}

.audioControls {
  width: 100%;
  scale: 75%;
  display: block;
  margin: 0;
  translate: 0px;
  transform-origin: top left;
  opacity: 100%;
  mix-blend-mode: darken;
}

.audioControls::-webkit-media-controls-panel { background-color: white; }


.credits {font-size: 0.5rem;
margin: 0rem;
color: rgb(0, 0, 0);
mix-blend-mode: difference;}

.imgPos2
{display: block;
translate: 100px;
margin-bottom: 0.5rem;}

.imgPos1
{display: block;
translate: 20px;
margin-bottom: 0.5rem;}

.imgPos3
{display: block;
translate: 50px;
margin-bottom: 0.5rem;}

.slideshow {display: block;
position: absolute;
z-index: -1;
width: min(80vw, 300px);
cursor: grab;
touch-action: none;
user-select: none;
padding: 0px;
will-change: transform;}

.picture {display: block;
position: absolute;
z-index: -1;
width: min(80vw, 200px);
cursor: grab;
touch-action: none;
user-select: none;
will-change: transform;}

.picture-fixed {display: block;
position: absolute;
z-index: -1;
width: min(80vw, 200px);
cursor: grab;
touch-action: none;
user-select: none;
will-change: transform;
right: 0;}


.audio_div {width: 600px;
margin-left: -15px;}

.slideshow.dragging {cursor: grabbing;}

.banner {display: block;
position: fixed;
top: 0;
right: 0;
width: min(100px, 50vw);
mix-blend-mode: difference;}

.slideshow p {
  cursor: text;
  touch-action: auto;
  user-select: text;
  position: relative; /* so it can receive pointer events above the img if they overlap */
}

/* The slideshow can be dragged anywhere, including on top of other
   images — without a controlled backdrop, mix-blend-mode would then
   blend against whatever happens to be underneath instead of the
   page's yellow. `isolation: isolate` gives this element its own
   private stacking context, so the ::before background below is the
   *only* thing its blended children ever see, regardless of what's
   behind it on the page. Sized with inset:0 rather than padding, so
   there's no visible border — the background fits the box exactly. */
.slideshow .audio_div {
  position: relative;
  isolation: isolate;
  background-color: rgb(176, 210, 255);
  width: 400px;
}

.slideshow .audio_div::before {
  content: "";
  position: absolute;
  inset: 0;
  width: 200px;
}

.slideshow .audioControls {
  position: relative; /* keeps it painted after (on top of) the ::before background */
}

.picCaption::before {content: "";
position: absolute;
inset:0;}

.picCaption {background-color:rgb(176, 210, 255);
  position: relative;
  isolation: isolate;}



/* With no viewport meta tag, mobile browsers render the page at its
   natural size and zoom out to fit it on screen — which shrinks
   everything uniformly. We can't reliably detect "mobile" by CSS width
   here (the reported viewport width no longer matches the real screen),
   so target touchscreens directly via pointer/hover instead. */
@media (hover: none) and (pointer: coarse) {
  /* Nearly all type on this page is set in rem, so scaling the root
     font-size scales paragraphs, headers, and buttons together. */
  html { font-size: 300%; }
  p {width: 95vw;
margin: 0.2rem;
margin-left: 0.7rem;
font-size: 0.6rem;
line-height: 0.8rem;
color: rgb(0, 0, 0);
mix-blend-mode: luminosity;}

h2 {font-size: 0.5rem;
margin-left: 0.7rem;}

  /* Images are sized in vw/px rather than rem, so pull them in a bit
     here — smaller to begin with, so they overflow less once the
     browser zooms out. */
  .slideshow { width: min(65vw, 480px); }
  .picture { width: min(60vw, 160px); }
  .banner { width: min(200px, 50vw); }
}