body,
button,
input,
select,
textarea,
.sans {
  font-family: "Libre Franklin", sans-serif;
}

:root {
  --bulma-radius: 1.25em;
}

html, body {
  .one {
    --color-one: #fff;
    --color-two: #a556b1;
    --color-three: #fad435;
    --color-links: #304faa;
    --color-linkshover: #FF7A02;
    --color-font: #283576;
    --color-four: #0000FF;
    --color-five: #f25929;
    --color-six: #79d1b4;
    --color-six-alpha: rgba(201, 201, 201, .7);
    --color-border: #a556b1;
    --color-footer: #12ADB356;
  }
  .two {
    --color-one: #020873;
    --color-font: #fff;
    --color-two: #ddd;
    --color-three: #D7F205;
    --color-links: #D7F205;
    --color-linkshover: #eaff4e;
    --color-four: #12ADB3;
    --color-five: #F2E205;
    --color-six: #FFA400;
    --color-border: #FFF;
    --color-footer: #12ADB356;
  }
  .three {
    --color-one: #020873;
    --color-font: #fff;
    --color-two: #ddd;
    --color-three: #D7F205;
    --color-links: #D7F205;
    --color-linkshover: #eaff4e;
    --color-four: #07F25A;
    --color-five: #F2E205;
    --color-six: #0511F2;
    --color-border: #0511F2;
    --color-footer: #12ADB356;
  }
  .four {
    --color-one: #0511F2;
    --color-font: #fff;
    --color-two: #020873;
    --color-three: #07F25A;
    --color-links: #07F25A;
    --color-linkshover: #56f58e;
    --color-four: #D7F205;
    --color-five: #F2E205;
    --color-six: #FFA400;
    --color-border: #020873;
    --color-footer: #12ADB356;
   }
  .five {
    --color-one: #fff;
    --color-two: #a556b1;
    --color-three: #fad435;
    --color-links: #304faa;
    --color-linkshover: #FF7A02;
    --color-font: #283576;
    --color-four: #0000FF;
    --color-five: #f25929;
    --color-six: #79d1b4;
    --color-border: #a556b1;
    --color-footer: #12ADB356;
  }
  .six {
    --color-one: #fff;
    --color-two: #a556b1;
    --color-three: #fad435;
    --color-links: #304faa;
    --color-linkshover: #FF7A02;
    --color-font: #283576;
    --color-four: #0000FF;
    --color-five: #f25929;
    --color-six: #79d1b4;
    --color-border: #a556b1;
    --color-footer: #12ADB356;
  }
  .seven {
    --color-one: #fff;
    --color-two: #FFA400;
    --color-three: #fad435;
    --color-links: #304faa;
    --color-linkshover: #FFA400;
    --color-font: #283576;
    --color-four: #2012B3;
    --color-five: #FFA400;
    --color-six: #12ADB3;
    --color-border: #FF6300;
    --color-footer: #12ADB356;
  }
  .eight {
    --color-one: #fff;
    --color-two: #FF6300;
    --color-three: #fad435;
    --color-links: #0070FF;
    --color-linkshover: #FFA400;
    --color-font: #283576;
    --color-four: #2012B3;
    --color-five: #FFA400;
    --color-six: #12ADB3;
    --color-border: #FF6300;
    --color-footer: #12ADB356;
  }
  .nine {
    --color-one: #22254C;
    --color-two: #1269A1;
    --color-three: #fad435;
    --color-links: #A19F12;
    --color-linkshover: #FFA400;
    --color-font: #d1ccdd;
    --color-four: #ffd074;
    --color-five: #FFA400;
    --color-six: #6312A1;
    --color-border: hsl(42, 83%, 65%);
    --color-footer: #22254cde;
  }
}

.one, .two, .three, .four, .five, .six, .seven, .eight, .nine {
  .vlfb { display: inline-block; }
  .vlfs { display: none; }
}

/* .six {
  .vlfb { display: inline-block; }
  .vlfs { display: none; }
} */

.cp1 { color: var(--color-one); }
.cp2 { color: var(--color-two); }
.cp3 { color: var(--color-three); }
.cp4 { color: var(--color-four); }
.cp5 { color: var(--color-five); }

.cp1b { color: var(--color-font); background-color: var(--color-one); }
.cp2b { color: var(--color-one); background-color: var(--color-two); }
.cp3b { color: var(--color-font); background-color: var(--color-three); }
.cp4b { color: var(--color-one); background-color: var(--color-four); }
.cp5b { color: var(--color-one); background-color: var(--color-five); }
.cp6b { color: var(--color-font); background-color: var(--color-six); }
.cplb { color: var(--color-one); background-color: var(--color-links); }
.cpfb { color: var(--color-one); background-color: var(--color-font); }

.two .tag { background-color: var(--color-six); color: #fff; }
.three .tag { background-color: var(--color-six); color: #fff; }
.four .tag { background-color: var(--color-six); color: #fff; }
.one .tag { background-color: var(--color-six); color: var(--color-font); }
.five .tag { background-color: var(--color-six); color: var(--color-font); }
.six .tag { background-color: var(--color-six); color: var(--color-font); }
.seven .tag { background-color: var(--color-six); color: var(--color-font); }
.eight .tag { background-color: var(--color-six); color: var(--color-font); }
.nine .tag { background-color: var(--color-six); color: var(--color-font); }

.two .tag2 { background-color: var(--color-five); color: var(--color-one); }
.three .tag2 { background-color: var(--color-five); color: var(--color-one); }
.four .tag2 { background-color: var(--color-five); color: var(--color-one); }
.one .tag2 { background-color: var(--color-five); color: var(--color-one); }
.five .tag2 { background-color: var(--color-five); color: var(--color-one); }
.six .tag2 { background-color: var(--color-five); color: var(--color-one); }
.seven .tag2 { background-color: var(--color-five); color: var(--color-font); }
.eight .tag2 { background-color: var(--color-five); color: var(--color-font); }
.nine .tag2 { background-color: var(--color-five); color: var(--color-one); }

.theme-switch a:hover {
  background-color: var(--color-two);
  color: var(--color-one);
}

.hal {
  font-family: "hal", serif;
}

body {
  padding-top: 0;
  padding-bottom: 0;
  font-size: 22px;
  color: var(--color-font);
  height: 100%;
  width: 100%;
  background-color: var(--color-one);
}

.gradient {
  overflow: hidden;
  width: calc(100vw);
  height: calc(100vh);
  position: fixed;
  top: 0;
  left: 0;
  padding: 0;
  margin: 0;
}

body.one .gradient, body.one.gradient {
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#abcdd7+0,e4e5e2+100 */
  background: linear-gradient(to bottom,  #abcdd7 0%,#e4e5e2 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

body.four .gradient, body.four.gradient {
  background: rgb(5,17,242);
  background: linear-gradient(180deg, rgba(5,17,242,1) 0%, rgba(178,182,255,1) 100%);
}

body.two .gradient, body.two.gradient {
  background: rgb(5,17,242);
  background: linear-gradient(180deg, rgba(5,17,242,1) 0%, rgba(178,182,255,1) 100%);
}

body.three .gradient, body.three.gradient {
  background: rgb(5,17,242);
  background: linear-gradient(180deg, rgba(5,17,242,1) 0%, rgba(178,182,255,1) 100%);
}

body.five .gradient, body.five.gradient {
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#69c2db+0,d5e5b3+100 */
  background: linear-gradient(to bottom,  #69c2db 0%,#d5e5b3 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#6dbfd6+0,d4e2b5+100 */
  /*background: linear-gradient(to bottom,  #6dbfd6 0%,#d4e2b5 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

body.six .gradient, body.six.gradient {
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#6ed69f+0,e2cfb6+100 */
  /* background: linear-gradient(to bottom,  #6ed69f 0%,#e2cfb6 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#8abaa0+0,d6cdc2+100 */
  /* background: linear-gradient(to bottom,  #8abaa0 0%,#d6cdc2 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#c3edd7+0,f3ebe1+100 */
  background: linear-gradient(to bottom,  #c3edd7 0%,#f3ebe1 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

body.seven .gradient, body.seven.gradient {
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#c3edd7+0,f3ebe1+100 */
  /* background: linear-gradient(to bottom,  #c3edd7 0%,#f3ebe1 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#fef7f0+0,fef4ea+47,fdefe1+100 */
  /* background: linear-gradient(to bottom,  #fef7f0 0%,#fef4ea 47%,#fdefe1 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#12adb3+0,fdefe1+100 */
  background: linear-gradient(to bottom,  #12adb3 0%,#fdefe1 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

body.eight .gradient, body.eight.gradient {
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#c3edd7+0,f3ebe1+100 */
  /* background: linear-gradient(to bottom,  #c3edd7 0%,#f3ebe1 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ff850f+0,f3ebe1+100 */
  /* background: linear-gradient(to bottom,  #ff850f 0%,#f3ebe1 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffeab9+0,fffff5+100 */
  /* background: linear-gradient(to bottom,  #ffeab9 0%,#fffff5 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#dbf3dc+0,fbf2ff+69,f8ebce+99 */
  /* background: linear-gradient(to bottom,  #dbf3dc 0%,#fbf2ff 69%,#f8ebce 99%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f9fbf9+0,fcddbe+100 */
  /* background: linear-gradient(to bottom,  #f9fbf9 0%,#fcddbe 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f9fbf9+0,e9ddd1+100 */
  /* background: linear-gradient(to bottom,  #f9fbf9 0%,#e9ddd1 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#e5f3f2+0,eee3d8+100 */
  /* background: linear-gradient(to bottom,  #e5f3f2 0%,#eee3d8 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#6bb0b2+0,fdefe1+100 */
  background: linear-gradient(to bottom,  #6bb0b2 0%,#fdefe1 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

body.nine .gradient, body.nine.gradient {
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#111ea1+0,fdefe1+100 */
  /* background: linear-gradient(to bottom,  #111ea1 0%,#fdefe1 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  /* background-color: #111ea1;*/
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#fdefe1+0,111ea1+100 */
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#111ea1+0,7579a0+100 */
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#111ea1+0,3f489e+100 */
  /* background: linear-gradient(to bottom,  #111ea1 0%,#3f489e 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#111ea1+0,4a3e9b+100 */
  /* background: linear-gradient(to bottom,  #111ea1 0%,#4a3e9b 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#111ea1+0,0e1684+100 */
  /* background: linear-gradient(to bottom,  #111ea1 0%,#0e1684 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#111ea1+0,280e84+100 */
  background: linear-gradient(to bottom,  #111ea1 0%,#280e84 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

.overall {
  min-height: calc(100vh - 120px - 40px - 40px);
}

footer.logo {
  min-height: 280px;
  position: fixed;
  bottom: 0px;
  left: 40px;
  background-color: transparent;
  display: none;
  /* background-color: var(--color-two); */
}

footer.end {
  min-height: 300px;
  position: relative;
  background-color: var(--color-footer);
  /* background-color: var(--color-two); */
}

footer.end .animal {
  width: 180px;
  height: auto;
  margin-top: -60px;
  margin-bottom: 2px;
  position: absolute;
  right: 20px;
}

footer.end .ice {
  width: 460px;
  height: auto;
  margin-top: -176px;
  margin-bottom: 2px;
  position: absolute;
  right: 0px;
}

footer.end .birds {
  width: 320px;
  height: auto;
  margin-top: -106px;
  margin-bottom: 2px;
  position: absolute;
  right: 80px;
}

footer.end .sunset {
  width: calc(100vw);
  height: auto;
  margin-top: -408px;
  margin-bottom: 2px;
  position: absolute;
  left: 0px;
  opacity: .2;
}

footer.end .logo {
  position: absolute;
  left: 20px;
  top: 12px;
}


footer .vlf {
  width: 120px;
  height: auto;
  margin-top: 6px;
  margin-bottom: 2px;
}

h1, h2, h3, h4, h5 {
  font-family: "hal", serif;
}
h1 {
  margin-top: 1em;
  font-size: 2em;
  color: var(--color-four);
}

h2, h3, h4, h5 {
  margin-top: .5em;
  font-family: "hal", serif;
  color: var(--color-four);
}

h2 {
  font-size: 1.5em;
}

a {
  color: var(--color-links);
  border-bottom: 1px dotted var(--color-links);
}

a:focus, a:hover {
  color: var(--color-links);
  text-decoration: none;
  border-bottom: none;
  border-bottom: 1px solid var(--color-links);
}

.theme-switch {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 100000;
}

.theme-switch a {
  font-size: .75em;
  font-weight: 600;
  padding: 2px;
  width: 24px;
  text-align: center;
  border: 1px dotted var(--color-two);
  display: inline-block;
  color: var(--color-two);
}

.theme-switch a.active {
  background-color: var(--color-two);
  color: var(--color-one) !important;
}
/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
}

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) {
}

@media only screen and (max-width: 1023px) {
  wagtail-userbar {
      display: none;
  }
  body {
    font-size: 16px;
  }
  .overall {
    padding: 20px;
  }
  footer.end .ice {
    width: 300px;
    height: auto;
    margin-top: -120px;
    margin-bottom: 2px;
    position: absolute;
    right: -60px;
  }

}
/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
}

wagtail-userbar::part(userbar) {
  bottom: 140px;
}

.legend {
  display: none;
}

.palette .column {
  font-size: 1em;
  padding: 12px;
  padding-bottom: 2px;
  border-bottom: 1px dotted #333;
}

/* * { 
  -webkit-box-sizing: border-box; 
  -moz-box-sizing: border-box; 
  -o-box-sizing: border-box; 
  box-sizing: border-box; 
  -webkit-transition: .25s ease-in-out; 
  -moz-transition: .25s ease-in-out; 
  -o-transition: .25s ease-in-out; 
  transition: .25s ease-in-out; 
  margin: 0; 
  padding: 0; 
  -webkit-text-size-adjust: none; 
}  */