:root {
  /* Colors */
  --color-canvas: #E7E3DF;
  --color-dot: #D1D1D1;

  /* Header text (Resume). Dark on the beige canvas; the entry door switches it to light
     together with the canvas turning green (js/door/main.js), the exit door switches it back. */
  --color-header-text: #323232;

  /* The "outside" world you step back into after the exit door (js/exit-door/main.js).
     Same as --color-canvas above, which the entry door overrides while you are inside. */
  --color-canvas-outside: #E7E3DF;

  /* Dot grid */
  --dot-size: 3px;
  --dot-gap: 35.5px;

  /* Grid lines (the dots turn into these as you scroll through the door) */
  --color-grid-line: #0D7165;
  --grid-line-width: 1px;

  /* Threads that cross the green space (css/threads.css). Layer blur applied to all of them. */
  --thread-blur: 5px;

  /* Width of the five artworks between the doors (empathize -> test).
     Empathize is the reference: its artwork is 1112px wide when the box is 1280px.
     Every other scene gets a scale so its VISIBLE artwork is the same width as empathize
     (each SVG has a different amount of empty space around its artwork).
     Make a scene bigger / smaller by changing its number (1 = same box width as empathize). */
  --scene-max-width: 1280px;
  --ideation-scale: 0.93;
  --prototype-scale: 0.94;
  --test-scale: 1.02;
  /* Define is scaled in js/define/main.js (DEFINE_SCALE) */

  /* Camera (after the exit door): its maximum width. Same width as the artworks above.
     It also never gets taller than the screen (see css/camera.css). Bigger number = bigger camera. */
  --camera-max-width: 1112px;

  /* Title screen (css/title.css) */
  --color-title-bg: var(--color-canvas-outside);          /* same canvas as the homepage */
  --color-title-text: var(--color-header-text);   /* same dark text as the header */
  --color-title-button-bg: #E7E3DF;                /* Enter button background */
  --color-title-button-line: #323232;              /* Enter button border, text and icon */
  --color-title-button-hover-lip: #289E4B;         /* the lip turns green on hover */
  --cursor-figma: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='33' height='35' viewBox='20 20 330 350'%3E%3Cdefs%3E%3Cfilter id='s' x='-30%' y='-30%' width='170%' height='180%'%3E%3CfeDropShadow dx='0' dy='8' stdDeviation='9' flood-color='%23000' flood-opacity='.25'/%3E%3C/filter%3E%3C/defs%3E%3Cg filter='url(%23s)'%3E%3Cpath d='M68 70L272 188L168 222L115 298Z' fill='%23fff' stroke='%23fff' stroke-width='38' stroke-linejoin='round'/%3E%3Cpath d='M68 70L272 188L168 222L115 298Z' fill='%23333' stroke='%23333' stroke-width='8' stroke-linejoin='round'/%3E%3C/g%3E%3C/svg%3E") 3 3, default;   /* dark arrow with a thick white outline and soft shadow, tilted like Figma's multiplayer cursor (title screen) */
  --title-button-gap: 32px;                        /* space between the subtitle and the Enter button */

  /* Entrance of the homepage text and folder once the ribbon has finished (css/title.css) */
  --entrance-delay: 0s;            /* pause after the ribbon has finished completely, before the first text line */
  --entrance-duration: 1s;
  --entrance-layer-stagger: 0.18s; /* each item (header link, text line, folder asset) starts this much after the one before */
}