:root {
  --color-1: #FCE9D9;
  --color-2: #F2B06B;
  --color-3: #B05F20;
  --color-4: #594F4C;
  --color-5: #2F333B;
  --radiance-1: rgb(52,102,255);
  --radiance-2: rgb(255,0,102);

  --space-largest: 40px;
  --space-larger: 20px;
  --space-large: 10px;
  --space-small: 5px;
  --space-tiny: 2px;
}

body { font-family: Calibri, Helvetica, sans-serif;
       background-color: var(--color-2); margin: 0; }
canvas { padding: 0; max-height: 100vh; max-width: 100vw; }
.hidden { display: none; }

header { background-color: var(--color-5); color: whitesmoke; padding: var(--space-large) var(--space-larger); }
header > h1 { margin-top: 0; }
header p { margin: 0; }

section { margin: var(--space-large) var(--space-larger); }
section > h2 { margin-top: 0; }
section > p { max-width: 30em; }

a { text-decoration: none; transition: 0.2s; color: inherit; border-bottom: 2px solid var(--color-3);}
a:hover { color: var(--color-3);  border-bottom-style: dotted; }

ul, li { list-style: none; }

button { background-color: var(--color-3); border: none;
         min-width: 30px; padding: var(--space-large); margin: var(--space-small) 0px;
         color: whitesmoke; 
         transition: 0.2s; }
button:hover { background-color: var(--color-4); }

#flex-container { display: flex; flex-flow: row wrap; }
canvas.flex { flex: 1 0 55vw; }
div.flex { flex: 1 1 30vw; max-width: 100%; }
#control>div { margin-right: 2rem; }

@media only screen and (max-width: 700px),(max-height: 400px) {
  body { font-size: 0.9rem; }
  .math { font-size: 0.8rem; }
  button { font-size: 0.8rem; padding: var(--space-small); margin: var(--space-tiny) 0px; }
  h1 { font-size: 1.7rem; }
  h2 { font-size: 1.3rem; }
}
@media only screen and (orientation: portrait) and (max-width: 1000px) {
  canvas { height: 45vh; }
}
@media only screen and (min-width: 600px) {
  #control>div { display: inline-block; }
}
@media only screen and (min-width: 1000px) and (min-height: 700px) {
  body section { margin: var(--space-larger) var(--space-largest); }
  header { padding: var(--space-larger) var(--space-largest); }
  body { font-size: 1.1rem; }
  h1 { font-size: 2.4rem; }
  h2 { font-size: 2rem; }
}