styles.css

@import url(https://fonts.googleapis.com/css?family=Libre+Baskerville);
html {
  -webkit-box-sizing: border-box;
          box-sizing: border-box; }

*, *:before, *:after {
  -webkit-box-sizing: inherit;
          box-sizing: inherit; }

body {
  margin: 0;
  font: 16px/1 sans-serif;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-family: "Libre Baskerville", Times, serif; }

header {
  text-align: center;
  padding: 1rem; }
  @media screen and (min-width: 480px) {
    header {
      padding: 2rem; } }
  @media screen and (min-width: 800px) {
    header {
      padding: 3rem; } }

footer {
  text-align: center;
  padding: 2rem 1rem 1rem; }

h1 {
  margin-bottom: 0.5em;
  line-height: 1.3; }

p {
  margin: 0;
  margin-bottom: 0.5em;
  line-height: 1.5; }

.o-svgicon {
  height: 1rem;
  width: 1rem; }

.c-wrapper {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center; }

.c-colour {
  height: 16ch;
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 16ch;
      -ms-flex: 0 0 16ch;
          flex: 0 0 16ch;
  text-align: center;
  padding-top: 4ch;
  border: 1px solid rgba(0, 0, 0, 0.1); }

.c-footer-left > * {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1rem; }
  @media screen and (min-width: 540px) {
    .c-footer-left > * {
      float: left;
      display: inline-block;
      vertical-align: middle;
      margin-right: 1rem; } }

@media screen and (min-width: 540px) {
  .c-footer-right {
    float: right; } }

.black {
  background: #000;
  color: #ffffff; }

.navy {
  background: #000080;
  color: #ffffff; }

.darkblue {
  background: #00008b;
  color: #ffffff; }

.mediumblue {
  background: #0000cd;
  color: #ffffff; }

.blue {
  background: #00f;
  color: #000000; }

.darkgreen {
  background: #006400;
  color: #ffffff; }

.green {
  background: #008000;
  color: #ffffff; }

.teal {
  background: #008080;
  color: #ffffff; }

.darkcyan {
  background: #008b8b;
  color: #ffffff; }

.deepskyblue {
  background: #00bfff;
  color: #000000; }

.darkturquoise {
  background: #00ced1;
  color: #ffffff; }

.mediumspringgreen {
  background: #00fa9a;
  color: #ffffff; }

.lime {
  background: #0f0;
  color: #000000; }

.springgreen {
  background: #00ff7f;
  color: #000000; }

.aqua {
  background: #0ff;
  color: #000000; }

.cyan {
  background: #0ff;
  color: #000000; }

.midnightblue {
  background: #191970;
  color: #ffffff; }

.dodgerblue {
  background: #1e90ff;
  color: #000000; }

.lightseagreen {
  background: #20b2aa;
  color: #ffffff; }

.forestgreen {
  background: #228b22;
  color: #ffffff; }

.seagreen {
  background: #2e8b57;
  color: #ffffff; }

.darkslategray {
  background: #2f4f4f;
  color: #ffffff; }

.darkslategrey {
  background: #2f4f4f;
  color: #ffffff; }

.limegreen {
  background: #32cd32;
  color: #000000; }

.mediumseagreen {
  background: #3cb371;
  color: #ffffff; }

.turquoise {
  background: #40e0d0;
  color: #000000; }

.royalblue {
  background: #4169e1;
  color: #000000; }

.steelblue {
  background: #4682b4;
  color: #ffffff; }

.darkslateblue {
  background: #483d8b;
  color: #ffffff; }

.mediumturquoise {
  background: #48d1cc;
  color: #000000; }

.indigo {
  background: #4b0082;
  color: #ffffff; }

.darkolivegreen {
  background: #556b2f;
  color: #ffffff; }

.cadetblue {
  background: #5f9ea0;
  color: #000000; }

.cornflowerblue {
  background: #6495ed;
  color: #000000; }

.mediumaquamarine {
  background: #66cdaa;
  color: #000000; }

.dimgray {
  background: #696969;
  color: #ffffff; }

.dimgrey {
  background: #696969;
  color: #ffffff; }

.slateblue {
  background: #6a5acd;
  color: #000000; }

.olivedrab {
  background: #6b8e23;
  color: #ffffff; }

.slategray {
  background: #708090;
  color: #000000; }

.slategrey {
  background: #708090;
  color: #000000; }

.lightslategray {
  background: #789;
  color: #000000; }

.lightslategrey {
  background: #789;
  color: #000000; }

.mediumslateblue {
  background: #7b68ee;
  color: #000000; }

.lawngreen {
  background: #7cfc00;
  color: #ffffff; }

.chartreuse {
  background: #7fff00;
  color: #000000; }

.aquamarine {
  background: #7fffd4;
  color: #000000; }

.maroon {
  background: #800000;
  color: #ffffff; }

.purple {
  background: #800080;
  color: #ffffff; }

.olive {
  background: #808000;
  color: #ffffff; }

.gray {
  background: #808080;
  color: #000000; }

.grey {
  background: #808080;
  color: #000000; }

.skyblue {
  background: #87ceeb;
  color: #000000; }

.lightskyblue {
  background: #87cefa;
  color: #000000; }

.blueviolet {
  background: #8a2be2;
  color: #000000; }

.darkred {
  background: #8b0000;
  color: #ffffff; }

.darkmagenta {
  background: #8b008b;
  color: #ffffff; }

.saddlebrown {
  background: #8b4513;
  color: #ffffff; }

.darkseagreen {
  background: #8fbc8f;
  color: #000000; }

.lightgreen {
  background: #90ee90;
  color: #000000; }

.mediumpurple {
  background: #9370db;
  color: #000000; }

.rebeccapurple {
  background: #663399;
  color: #ffffff; }

.darkviolet {
  background: #9400d3;
  color: #ffffff; }

.palegreen {
  background: #98fb98;
  color: #000000; }

.darkorchid {
  background: #9932cc;
  color: #ffffff; }

.yellowgreen {
  background: #9acd32;
  color: #000000; }

.sienna {
  background: #a0522d;
  color: #ffffff; }

.brown {
  background: #a52a2a;
  color: #ffffff; }

.darkgray {
  background: #a9a9a9;
  color: #000000; }

.darkgrey {
  background: #a9a9a9;
  color: #000000; }

.lightblue {
  background: #add8e6;
  color: #000000; }

.greenyellow {
  background: #adff2f;
  color: #000000; }

.paleturquoise {
  background: #afeeee;
  color: #000000; }

.lightsteelblue {
  background: #b0c4de;
  color: #000000; }

.powderblue {
  background: #b0e0e6;
  color: #000000; }

.firebrick {
  background: #b22222;
  color: #ffffff; }

.darkgoldenrod {
  background: #b8860b;
  color: #ffffff; }

.mediumorchid {
  background: #ba55d3;
  color: #000000; }

.rosybrown {
  background: #bc8f8f;
  color: #000000; }

.darkkhaki {
  background: #bdb76b;
  color: #000000; }

.silver {
  background: #c0c0c0;
  color: #000000; }

.mediumvioletred {
  background: #c71585;
  color: #ffffff; }

.indianred {
  background: #cd5c5c;
  color: #000000; }

.peru {
  background: #cd853f;
  color: #000000; }

.chocolate {
  background: #d2691e;
  color: #ffffff; }

.tan {
  background: #d2b48c;
  color: #000000; }

.lightgray {
  background: #d3d3d3;
  color: #000000; }

.lightgrey {
  background: #d3d3d3;
  color: #000000; }

.thistle {
  background: #d8bfd8;
  color: #000000; }

.orchid {
  background: #da70d6;
  color: #000000; }

.goldenrod {
  background: #daa520;
  color: #ffffff; }

.palevioletred {
  background: #db7093;
  color: #000000; }

.crimson {
  background: #dc143c;
  color: #ffffff; }

.gainsboro {
  background: #dcdcdc;
  color: #000000; }

.plum {
  background: #dda0dd;
  color: #000000; }

.burlywood {
  background: #deb887;
  color: #000000; }

.lightcyan {
  background: #e0ffff;
  color: #000000; }

.lavender {
  background: #e6e6fa;
  color: #000000; }

.darksalmon {
  background: #e9967a;
  color: #000000; }

.violet {
  background: #ee82ee;
  color: #000000; }

.palegoldenrod {
  background: #eee8aa;
  color: #000000; }

.lightcoral {
  background: #f08080;
  color: #000000; }

.khaki {
  background: #f0e68c;
  color: #000000; }

.aliceblue {
  background: #f0f8ff;
  color: #000000; }

.honeydew {
  background: #f0fff0;
  color: #000000; }

.azure {
  background: #f0ffff;
  color: #000000; }

.sandybrown {
  background: #f4a460;
  color: #000000; }

.wheat {
  background: #f5deb3;
  color: #000000; }

.beige {
  background: #f5f5dc;
  color: #000000; }

.whitesmoke {
  background: #f5f5f5;
  color: #000000; }

.mintcream {
  background: #f5fffa;
  color: #000000; }

.ghostwhite {
  background: #f8f8ff;
  color: #000000; }

.salmon {
  background: #fa8072;
  color: #000000; }

.antiquewhite {
  background: #faebd7;
  color: #000000; }

.linen {
  background: #faf0e6;
  color: #000000; }

.lightgoldenrodyellow {
  background: #fafad2;
  color: #000000; }

.oldlace {
  background: #fdf5e6;
  color: #000000; }

.red {
  background: #f00;
  color: #000000; }

.fuchsia {
  background: #f0f;
  color: #000000; }

.magenta {
  background: #f0f;
  color: #000000; }

.deeppink {
  background: #ff1493;
  color: #000000; }

.orangered {
  background: #ff4500;
  color: #000000; }

.tomato {
  background: #ff6347;
  color: #000000; }

.hotpink {
  background: #ff69b4;
  color: #000000; }

.coral {
  background: #ff7f50;
  color: #000000; }

.darkorange {
  background: #ff8c00;
  color: #000000; }

.lightsalmon {
  background: #ffa07a;
  color: #000000; }

.orange {
  background: #ffa500;
  color: #000000; }

.lightpink {
  background: #ffb6c1;
  color: #000000; }

.pink {
  background: #ffc0cb;
  color: #000000; }

.gold {
  background: #ffd700;
  color: #000000; }

.peachpuff {
  background: #ffdab9;
  color: #000000; }

.navajowhite {
  background: #ffdead;
  color: #000000; }

.moccasin {
  background: #ffe4b5;
  color: #000000; }

.bisque {
  background: #ffe4c4;
  color: #000000; }

.mistyrose {
  background: #ffe4e1;
  color: #000000; }

.blanchedalmond {
  background: #ffebcd;
  color: #000000; }

.papayawhip {
  background: #ffefd5;
  color: #000000; }

.lavenderblush {
  background: #fff0f5;
  color: #000000; }

.seashell {
  background: #fff5ee;
  color: #000000; }

.cornsilk {
  background: #fff8dc;
  color: #000000; }

.lemonchiffon {
  background: #fffacd;
  color: #000000; }

.floralwhite {
  background: #fffaf0;
  color: #000000; }

.snow {
  background: #fffafa;
  color: #000000; }

.yellow {
  background: #ff0;
  color: #000000; }

.lightyellow {
  background: #ffffe0;
  color: #000000; }

.ivory {
  background: #fffff0;
  color: #000000; }

.white {
  background: #fff;
  color: #000000; }