/* The Bauhaus shapes logo: a stage as big as the window, an SVG the script fills with the grid, the bar, the shapes
   and the letters. Flat colours only, every one a variable here: the paper, the three primaries, the black. */
:root {
  --paper: #f1eadb;         /* the background: ivory paper */
  --red: #d8382b;           /* signal red */
  --blue: #1f48a6;          /* cobalt blue */
  --yellow: #f2b51b;        /* chrome yellow */
  --black: #151413;         /* the black of the bar, the cuts and the letters */
  --rule: #d7ccb4;          /* the hairlines of the grid */
  --hint: #8c836f;          /* the small text under the stage */
  --screen: 100vh;
}
@supports (height: 100lvh) {
  :root { --screen: 100lvh; }
}

* { box-sizing: border-box; }
html,
body {
  margin: 0;
  height: 100%;
}
body {
  background: var(--paper);
  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 set in this face: the script reads it to measure the letters */
.palco {
  display: block;
  width: 100%;
  height: 100%;
  font-family: 'Archivo Variable', 'Arial Black', sans-serif;
  font-weight: 800;
}

/* the colours, by name: the script gives each shape one of them */
.rosso { fill: var(--red); }
.blu { fill: var(--blue); }
.giallo { fill: var(--yellow); }
.nero { fill: var(--black); }
.carta { fill: var(--paper); }
.bianco { fill: #fff; }
.buio { fill: #000; }

.griglia {
  fill: none;
  stroke: var(--rule);
}
.segno {
  fill: none;
  stroke: var(--black);
  stroke-linecap: square;
}
.colpo {
  fill: none;
  stroke: var(--black);
  stroke-linecap: butt;
}
.colophon {
  fill: var(--black);
  font-weight: 500;
}
.colophon .forte { font-weight: 800; }

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