/* The title written in the sand: one canvas as big as the window. Every colour is a variable here: the sand dry and
   wet, the shades of the groove, the grains, the sea and its foam. */
:root {
  --sand: #e8d2a8;          /* the dry sand */
  --sand-deep: #b99a6c;     /* the sand in shadow: blotches, ripples, the shade of the rim */
  --sand-light: #fbf1db;    /* the sand in the light */
  --sand-wet: #c9b394;      /* what the water does to the sand: it is multiplied over it */
  --groove-dark: #86684a;   /* the wall of the groove in shadow (multiplied over the sand) */
  --groove: #b49874;        /* the floor of the groove (multiplied) */
  --groove-light: #cdb593;  /* the floor near the lit wall (multiplied) */
  --rim: #fff6e2;           /* the light on the raised rim and the lit wall */
  --grain: #6f5636;         /* the dark specks in the sand */
  --shell: #fffaf2;         /* the bits of shell */
  --water: #6cc4bb;         /* the shallow water at the edge of the wave */
  --water-deep: #1f7a8a;    /* the deeper water */
  --foam: #ffffff;          /* the foam and the bubbles */
  --sky: #f2fbff;           /* the sky reflected on the wet sand */
  --hint: #8b7552;          /* the small text */
  --screen: 100vh;
}
@supports (height: 100lvh) {
  :root { --screen: 100lvh; }
}

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

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

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

/* the words are in the sand: 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(18px, 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;
}