/* The ink-in-water logo: a stage as big as the window, a canvas the script paints with a glass tank of clear water,
   drops of ink and the logo they draw. Every colour is a variable here: the script reads them when it starts. */
:root {
  --wall: #eeebe4;          /* the background: the wall behind the tank */
  --wall-deep: #dcd7cc;     /* the wall towards the edges */
  --table: #d8d1c3;         /* the table the tank stands on */
  --table-deep: #c4bbaa;    /* the front of the table */
  --shade: #4f4637;         /* the shadow of the tank */
  --glass: #7f9c9c;         /* the edges of the glass */
  --shine: #ffffff;         /* the light on the glass and the water */
  --water: #e2efec;         /* the water near the surface */
  --water-deep: #c6dedb;    /* the water at the bottom */
  --surface: #f5fbfa;       /* the surface of the water, seen from a little above */
  --ink: #1d2a63;           /* the ink, and the logo it draws */
  --accent: #e2552d;        /* the last drop, in a second colour */
  --hint: #7c837f;          /* the small text */
  --screen: 100vh;
}
@supports (height: 100lvh) {
  :root { --screen: 100lvh; }
}

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

.scena {
  position: relative;
  height: var(--screen);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}

/* the logo is drawn in this face: the script reads it to measure and paint the letters */
.palco {
  display: block;
  width: 100%;
  height: 100%;
  font-family: 'Fraunces Variable', Georgia, serif;
  font-weight: 640;
}

.nota {
  position: absolute;
  left: 0;
  right: 0;
  bottom: max(18px, env(safe-area-inset-bottom));
  margin: 0;
  font-family: 'Fraunces Variable', Georgia, serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-align: center;
  color: var(--hint);
  pointer-events: none;
}