.colour-box {
  width: 80px;
  height: 80px;
  display: inline-block;
}

.primary {
  background-color: rgb(214.2, 40.8, 55.25);
}

.primary-neutral {
  background-color: rgb(169.116, 85.884, 92.82);
}

.primary-neutral-light {
  background-color: rgb(225.79944, 197.50056, 199.8588);
}

.primary-neutral-dark {
  background-color: rgb(57.49944, 29.20056, 31.5588);
}

.primary-light {
  background-color: rgb(219.419748, 111.315252, 120.32396);
}

.primary-dark {
  background-color: rgb(143.684748, 35.580252, 44.58896);
}

.complementary {
  background-color: rgb(33.15, 221.85, 206.125);
}

.complementary-neutral {
  background-color: rgb(76.551, 178.449, 169.9575);
}

.complementary-neutral-light {
  background-color: rgb(194.32734, 228.97266, 226.08555);
}

.complementary-neutral-dark {
  background-color: rgb(26.02734, 60.67266, 57.78555);
}

.complementary-light {
  background-color: rgb(105.679803, 225.055197, 215.1072475);
}

.complementary-dark {
  background-color: rgb(29.944803, 149.320197, 139.3722475);
}

.white {
  background-color: rgb(251.56464, 248.23536, 248.5128);
}

.neutral-grey {
  background-color: rgb(127.5, 127.5, 127.5);
}

.primary-grey {
  background-color: rgb(87.465, 167.535, 160.8625);
}

.complementary-grey {
  background-color: rgb(100.1385, 154.8615, 150.30125);
}

.black {
  background-color: rgb(43.35, 43.35, 43.35);
}

.analogous {
  background-color: rgb(33.15, 221.85, 80.325);
}

.complementary-analogous {
  background-color: rgb(33.15, 221.85, 123.097);
}

.pull-left {
  float: left;
}

.pull-right {
  float: right;
}

.laff-sidebar {
  float: left;
  width: 20%;
  height: 100%;
  background-color: rgb(127.5, 127.5, 127.5);
}

nav ul {
  margin: 0em;
  padding: 0em;
  list-style: none;
}
nav ul li {
  display: inline-block;
  border: 1px solid rgb(143.684748, 35.580252, 44.58896);
  background-color: rgb(219.419748, 111.315252, 120.32396);
  border-radius: 8px;
  line-height: 2em;
}
nav ul li a {
  color: rgb(251.56464, 248.23536, 248.5128);
  display: block;
  padding: 0 20px;
  text-decoration: none;
}

.laff-site-header {
  border-bottom: 3px solid rgb(127.5, 127.5, 127.5);
  background-color: rgb(26.02734, 60.67266, 57.78555);
  color: rgb(251.56464, 248.23536, 248.5128);
  justify-content: space-between;
}

.laff-logo {
  margin: 0.5rem 0.5rem 0.5rem 0rem;
}

.laff-site-footer {
  border-top: 3px solid rgb(127.5, 127.5, 127.5);
  background-color: rgb(26.02734, 60.67266, 57.78555);
}
.laff-site-footer .laff-footer-content {
  color: rgb(251.56464, 248.23536, 248.5128);
}

button:hover {
  cursor: pointer;
}

.laff-btn-primary {
  background-color: rgb(214.2, 40.8, 55.25);
  border-color: rgb(143.684748, 35.580252, 44.58896);
}

.laff-btn {
  appearance: button;
  -moz-appearance: button;
  -webkit-appearance: button;
  text-decoration: none;
  font: menu;
  display: inline-block;
  padding: 2px 8px;
  margin: 5px 0;
  border-radius: 5px;
}

.laff-wb-region {
  margin: 10px 0px;
}
.laff-wb-region p span {
  margin: 0 20px;
}

label {
  margin-right: 0.5em;
}

form p {
  font-size: 0.8em;
  margin: 0em;
}

fieldset {
  margin: 1em 0;
}
fieldset legend {
  font-weight: bold;
}

input {
  font-size: 100%;
  padding: 0.3em;
  margin: 0.5em 0;
}

@media (max-width: 600px) {
  input:not([type=checkbox]):not([type=radio]) {
    width: 100%;
  }
}

form ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.form-condensed {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  grid-column-gap: 1em;
}

output {
  border: 1px solid rgb(169.116, 85.884, 92.82);
  background-color: rgb(225.79944, 197.50056, 199.8588);
  padding: 1.5em;
  display: block;
}

dl {
  display: grid;
  grid-template-columns: minmax(100px, max-content) minmax(100px, max-content);
  line-height: 1.6;
}

dt {
  grid-column-start: 1;
  font-weight: bold;
}

dd {
  grid-column-start: 2;
}

.laff-column {
  column-width: 350px;
}
.laff-column dl {
  margin: 0px;
}

table {
  display: inline-block;
  max-width: 100%;
  overflow-x: auto;
  border-spacing: 0px;
  border-collapse: collapse;
}

td {
  padding: 0.5em;
  border: 1px solid rgb(169.116, 85.884, 92.82);
}

thead {
  background-color: rgb(225.79944, 197.50056, 199.8588);
}
thead td {
  font-weight: bold;
}

.laff-video {
  width: 320px;
  height: 200px;
}

html {
  line-height: 1.3em;
  font-family: Arial, Helvetica, sans-serif;
  box-sizing: border-box;
}

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

html, body {
  height: 100%;
}

div {
  color: rgb(43.35, 43.35, 43.35);
}

body {
  display: grid;
  grid-template-rows: max-content 1fr max-content;
  grid-row-gap: 1rem;
  margin: 0em;
  background-color: rgb(76.551, 178.449, 169.9575);
}

main {
  width: 100vw;
  margin-left: auto;
  margin-right: auto;
  max-width: 1024px;
  min-width: 360px;
}

header, footer {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  padding: 1.5rem;
}
@media (max-width: 600px) {
  header, footer {
    padding: 1rem;
  }
}

section {
  background-color: rgb(251.56464, 248.23536, 248.5128);
  margin-bottom: 2rem;
  box-shadow: 1px 2px 3px 0 rgba(0, 0, 0, 0.3);
}
section > header {
  background-color: rgb(194.32734, 228.97266, 226.08555);
  font-size: 1.5em;
  line-height: 1.5em;
}
section .laff-section-copy {
  padding: 1.5em;
}
@media (max-width: 600px) {
  section .laff-section-copy {
    padding: 1rem;
  }
}

a {
  text-decoration: none;
}

code {
  background-color: rgb(194.32734, 228.97266, 226.08555);
  padding: 1px 5px;
  display: inline-block;
  margin: 2px;
}

img {
  overflow: scroll;
}

.img-responsive {
  height: 100%;
  width: 100%;
  min-width: 360px;
}