:root {
  --outline: 0;

  color-scheme: light dark;
  background-color: #333333;
  color: #CCCCCC;

  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

* { box-sizing: border-box; outline: calc(var(--outline) * 1px) dotted gold; } 

body {
  margin: 0; 
  padding: 0; 
  font-family: monospace;
  font-size:   1.51911em; /* Exactly 30px */
  line-height: 1.51911em;
  display: flex;
  place-items: center;
}

section {
  width: 100%;
  display: flex;
  align-items: center;
  justify-items: center;
  justify-self: center;
}

svg { width: 100%; }

#ppgsvg { 
  width: 100%;
  display: inline-block;
  line-height: 0;  /* Removes unwanted padding */
  color: black;  /* used by SVG bounding box */
  overflow: hidden;
}

#ppgui {
  display: block;
  margin: 0 auto;
  text-align: center;
}

@media (prefers-color-scheme: light) {
  :root { background-color: #999;  color: #333; }
}