@namespace url(http://www.w3.org/1999/xhtml);
@namespace svg url(http://www.w3.org/2000/svg);

/* This matches all XHTML <a> elements, as XHTML is the default unprefixed namespace */
/* a {} */

/* This matches all SVG <a> elements */
/* svg|a {} */

/* This matches both XHTML and SVG <a> elements */
/* *|a {} */

/* https://stackoverflow.com/questions/24078524/svg-click-events-not-firing-bubbling-when-using-use-element */
@media all and (-ms-high-contrast: none) { svg|svg { pointer-events: none; } }

/* TODO: */
/* review media query breakpoints                 */
/* resize to viewport-relative vw, vh, vmin, vmax */
/* redefine colours using hsla                    */
/* scope custom values to parent container        */
/* Textures in SVG: https://stackoverflow.com/a/49108254 */

:root {
  --houseplant-green: hsl(90, 27%, 34%, 1.0);
  --paradise-green: hsl(81, 42%, 37%, 1.0);
  --picnic-green: hsl(99, 34%, 64%, 1.0);
  --waterfall-blue: hsl(177, 11%, 34%, 1.0);
  --massif-blue: hsl(206, 30%, 21%, 1.0);
  --wild-magenta: hsl(322, 40%, 51%, 1.0);
  --sturdy-brown: hsl(14, 90%, 16%, 1.0);
  --porcini: hsl(30, 10%, 48%, 1.0);
  --emperor: hsl(260, 24%, 14%, 1.0);
  --shadow: hsl(10, 24%, 0%, 1.0);
  --walnut: hsl(11, 50%, 17%, 1.0);
  --font-family-serif: "Palatino Linotype", "Book Antiqua", Palatino, serif;
  --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

* {
box-sizing: border-box;
padding: 0;
margin: 0;
}

button, input, select, textarea {
  font-family : inherit;
  font-size   : 100%;
}