/* The title on the steamy mirror: one canvas as big as the window. Every colour is a variable here: the tiles, the
   brass frame, the room seen in the mirror, the steam and the drops. */
:root {
  --tile: #9fbcae;          /* the glazed tiles of the wall */
  --tile-light: #c4dacd;    /* the light on the tiles */
  --tile-dark: #6f9282;     /* the tiles in shadow */
  --grout: #e9efe9;         /* the lines between the tiles */
  --brass: #c09a5e;         /* the frame of the mirror and the shelf brackets */
  --brass-light: #f1d9a6;   /* the light on the brass */
  --brass-dark: #7c5d32;    /* the brass in shadow */
  --shelf: #f3efe7;         /* the marble shelf under the mirror */
  --wall: #c9876a;          /* the clay plaster wall of the room in the mirror */
  --wall-shade: #8c5340;    /* the same wall in shadow */
  --niche: #6e3b2e;         /* the inside of the niche in the wall */
  --leaf: #4f7b5a;          /* the leaves of the plant */
  --leaf-dark: #2f5440;     /* the leaves in shadow */
  --pot: #c77c5a;           /* the terracotta pot */
  --tub: #f3ebe0;           /* the bathtub */
  --floor: #b9876a;         /* the floor tiles */
  --towel: #ef9f86;         /* the towel on the ladder */
  --wood: #a7774f;          /* the wooden ladder */
  --lamp: #ffd9a0;          /* the warm glow of the lamp */
  --haze: #eef3f1;          /* the colour of the condensation */
  --steam: #ffffff;         /* the steam rising from below */
  --label: #33463d;         /* the writing on the bottles */
  --hint: #3d5a4c;          /* the small text */
  --screen: 100vh;
}
@supports (height: 100lvh) {
  :root { --screen: 100lvh; }
}

* { box-sizing: border-box; }
html,
body {
  margin: 0;
  height: 100%;
}
body {
  background: var(--tile);
  overflow: hidden;
}

.scena {
  position: relative;
  height: var(--screen);
  overflow: hidden;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}

.bagno {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

/* the words are in the steam: this copy is only for screen readers */
.leggibile {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  margin: 0;
}

.nota {
  position: absolute;
  left: 0;
  right: 0;
  top: max(16px, env(safe-area-inset-top));
  margin: 0;
  font-family: 'Familjen Grotesk Variable', 'Arial', sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-align: center;
  color: var(--hint);
  pointer-events: none;
  opacity: 0;
}
.nota__dito { display: none; }
@media (hover: none) {
  .nota__mouse { display: none; }
  .nota__dito { display: inline; }
}