/* Debug */
:root {
  --debugGrey05:  rgba(120, 120, 120, 0.05);
  --debugGrey1:   rgba(120, 120, 120, 0.1);

  --debugGrey2:   rgba(120, 120, 120, 0.2);
  --debugRed2:    rgba(238, 39,  17,  0.2);
  --debugBlue2:   rgba(24,  113, 233, 0.2);
  --debugGreen2:  rgba(18,  192, 91,  0.2);
  --debugYellow2: rgba(249, 191, 15,  0.2);
  --debugPink2:   rgba(255, 0,   255, 0.2);
  --debugCyan2:   rgba(20,  230, 245, 0.2);

  --debugCyan3:   rgba(20,  230, 245, 0.3);

  --debugGrey4:   rgba(120, 120, 120, 0.4);
  --debugRed4:    rgba(238, 39,  17,  0.4);
  --debugBlue4:   rgba(24,  113, 233, 0.4);
  --debugGreen4:  rgba(18,  192, 91,  0.4);
  --debugYellow4: rgba(249, 191, 15,  0.4);
  --debugPink4:   rgba(255, 0,   255, 0.4);
  --debugCyan4:   rgba(20,  230, 245, 0.4);

  --debugGrey8:   rgba(120, 120, 120, 0.8);
  --debugRed8:    rgba(238, 39,  17,  0.8);
  --debugBlue8:   rgba(24,  113, 233, 0.8);
  --debugGreen8:  rgba(18,  192, 91,  0.8);
  --debugYellow8: rgba(249, 191, 15,  0.8);
  --debugPink8:   rgba(255, 0,   255, 0.8);
  --debugCyan8:   rgba(20,  230, 245, 0.8);

  --wireWeight: 1px;
}

html.chrome, html.firefox { --wireWeight: var(--pixel); }

body.debug address, body.debug article, body.debug aside,
body.debug blockquote, body.debug canvas, body.debug dd, body.debug div,
body.debug dl, body.debug dt, body.debug fieldset, body.debug figcaption,
body.debug figure, body.debug footer, body.debug form, body.debug grid,
body.debug h1, body.debug h2, body.debug h3, body.debug h4, body.debug h5,
body.debug h6, body.debug header, body.debug hr, body.debug li,
body.debug main, body.debug nav, body.debug noscript, body.debug ol,
body.debug p, body.debug pre, body.debug section, body.debug table,
body.debug tfoot, body.debug ul, body.debug video {
  box-shadow: inset 0px 0px 0px var(--wireWeight) var(--debugPink4),
              0px 0px 0px var(--wireWeight) var(--debugPink4),
              0px var(--blockSpacingBottom) 0px 0px var(--debugYellow2),
              0px calc(var(--blockSpacingTop) * -1) 0px 0px var(--debugYellow2);
}
body.debug hr {
  box-shadow: inset 0px 0px 0px var(--wireWeight) var(--debugGreen4),
              0px 0px 0px var(--wireWeight) var(--debugGreen4);
}
body.debug :first-child {
  box-shadow: inset 0px 0px 0px var(--wireWeight) var(--debugGreen4),
              0px 0px 0px var(--wireWeight) var(--debugGreen4),
              0px var(--blockSpacingBottom) 0px 0px var(--debugYellow2);
}
body.debug :last-child {
  box-shadow: inset 0px 0px 0px var(--wireWeight) var(--debugGreen4),
              0px 0px 0px var(--wireWeight) var(--debugGreen4),
              0px calc(var(--blockSpacingTop) * -1) 0px 0px var(--debugYellow2);
}
body.debug :first-child:last-child {
  box-shadow: inset 0px 0px 0px var(--wireWeight) var(--debugGreen4),
              0px 0px 0px var(--wireWeight) var(--debugGreen4);
}

body.debug grid > * {
  box-shadow: inset 0px 0px 0px var(--wireWeight) var(--debugBlue8),
              0px 0px 0px var(--wireWeight) var(--debugBlue8);
}