/* h1 { font-size: 6vw; text-align: center; }
main { width: 90vw; margin: 0 auto; }
button { width: 50vw; height: 8vh; font-size: 3vw; } */

html, body{
  border: 0;
}

body > *{
  border: 1px dashed red;
  margin: 20px;
}


:root{
  --os-platform: 'unknown';
  --browser-vendor: 'unknown';
  --rendering-engine: 'unknown';
  --primary-pointing-device: 'unknown';
}

@media( pointer: coarse ){
  :root{
    --primary-pointing-device: 'touch';
  }
}

@media( pointer: fine ){
  :root{
    --primary-pointing-device: 'mouse';
  }
}

@media( pointer: none ){
  :root{
    --primary-pointing-device: 'none';
  }
}

@supports ( -webkit-appearance: none ){
  :root{
    --rendering-engine: 'webkit';
    --browser-vendor: 'chromium';
  }
}

@supports ( -moz-appearance: none ){
  :root{
    --browser-vendor: 'mozilla';
    --rendering-engine: 'gecko';
  }
}

/* ios */
@supports ( -webkit-touch-callout: default ){
  :root{
    --os-platform: 'iOS';
    --browser-vendor: 'Safari';
  }
}

/* devices capable of hovering (not i-devices currently) */
@media ( hover: hover ){
  :root{
    --os-platform: 'desktop';
  }
}

header::after{
  display: block;
  font-family: monospace;
  white-space: pre;
  content:
    'Info Detected Via CSS' ':\000a'
    '  OS/platform              - ' var(--os-platform) '\000a'
    '  Browser Vendor           - ' var(--browser-vendor) '\000a'
    '  Rendering Engine         - ' var(--rendering-engine) '\000a'
    '  Primary Pointing Device  - ' var(--primary-pointing-device) '\000a'
  ;
}