@import url("./components/style.css");
@import url("./fonts/style.css");

:root {
  --background: #fff;
  --red: #f00;
  --grey: #ccc;
  --foreground: #000;

  --tiles-diag-black: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAGUlEQVQImWNgYGBwYEAAB0ZkDgMaxwErBwA4twHCVgI5sAAAAABJRU5ErkJggg==");
  --tiles-diag-white: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAIElEQVQImWP4//+/AwMU/P//34ERmcOAzIELoHAYGBgAAxcWrY397t4AAAAASUVORK5CYII=");
  --tiles-last-black: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAADElEQVQImWNgQAP/AQERAQD1y6SYAAAAAElFTkSuQmCC");
  --tiles-last-white: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAEElEQVQImWNgQAb/////DwAKCAP9R4CJSwAAAABJRU5ErkJggg==");
}

html {
  height: 100%;
  width: 100%;
}

body {
  margin: 0;
  padding: 8px;
  box-sizing: border-box;
  min-height: 100%;
  width: 100%;
  background: var(--background) var(--tiles-diag-black);
  text-align: center;
  font-family: var(--font-text-legible);
}

main {
  text-align: start;
  display: inline-block;
  max-width: 768px;
  box-sizing: border-box;
  background-color: var(--background);
  border: 1px solid currentColor;
  color: var(--foreground);
  min-height: 100%;
  padding: 8px;
}

section {
  margin: 1em;
}

a {
  color: black;
}