/*
This causes a flash of unformatted TXT...
@font-face {
  font-family: 'Roboto';
  font-display: swap;
}
*/

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

body {
  font-family: 'Roboto', sans-serif;
  font-size: 14pt;

  --hue-red: 360;
  --hue-blue: 210;
  --hue-green: 150;
  --hue-purple: 270;

  --hue: var(--hue-green);
}

h1,
p {
  color: hsla( var(--hue), 20%, 30%, 1 );
}

h1 {
  font-weight: 300;
}

p,
.top-panel {
  padding: 6px 16px;
  margin-bottom: 8px;
}

.top-panel {
  background-color: hsla( var(--hue), 70%, 50%, 0.2 );
}