/* Fonts (only for latin and latin-ext characters) */
@font-face {
  font-family: 'Ubuntu Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Ubuntu Mono'), local('UbuntuMono-Regular'), url(https://fonts.gstatic.com/s/ubuntumono/v9/KFOjCneDtsqEr0keqCMhbCc0CsTYl4BOQ3o.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Ubuntu Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Ubuntu Mono'), local('UbuntuMono-Regular'), url(https://fonts.gstatic.com/s/ubuntumono/v9/KFOjCneDtsqEr0keqCMhbCc6CsTYl4BO.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Nunito Regular'), local('Nunito-Regular'), url(https://fonts.gstatic.com/s/nunito/v12/XRXV3I6Li01BKofIO-aBTMnFcQIG.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Nunito Regular'), local('Nunito-Regular'), url(https://fonts.gstatic.com/s/nunito/v12/XRXV3I6Li01BKofINeaBTMnFcQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Miscellaneous */
@media screen and (prefers-reduced-motion: reduce) { html { scroll-behavior:auto } }
/* Vague stylings */
html {
scroll-behavior:smooth;
text-rendering:geometricPrecision
}

* {
padding:0;
margin:0
}

/* Variables */
:root {
font-size: 16px;
--p-blue:#2a7bde;
--p-blue-hover:#1957a2;
--p-red:#c4181d;
--p-red-hover:#801013;
--p-green:#4BB543;
--p-green-hover:#347d2e;
--p-purple:#7851a9;
--p-purple-hover:#533875;
--p-yellow:#ffd500;
--p-yellow-hover:#b39500;
--p-orange:#ff7b00;
--p-orange-hover:#b35600;
--p-pink:#ff748c;
--p-pink-hover:#ff284d;
--p-dark:#333;
--p-dark-hover:#595959;
--p-white: #fff;
--p-white-hover: #d3d3d3;
--p-grey: #808080;
--p-grey-hover: #000;
--p-black: #000;
--p-black-hover: #808080;
--p-light-grey: #d3d3d3;
--p-light-grey-hover: #808080;

--p-anchor-indent: 100px;
--p-font-landing-title: Nunito, sans-serif;
--p-font-body: Arial,sans-serif;
--p-font-code: "Ubuntu Mono",Consolas,"Courier New",monospace;

--p-h1-size: 4.5rem;
--p-h2-size: 3.5rem;
--p-h3-size: 2rem;
--p-h4-size: 1rem;
--p-h5-size: 1rem;
--p-h6-size: 1rem;
/* Following variables only affect h1-h3 */
--p-pad: 0.5rem;
--p-margin: 0.5rem;
}
@media (prefers-color-scheme: dark) {
  body {
  background-color: var(--p-dark);
  color: var(--p-light-grey)
  }
  h1, h2 {
    color: var(--p-white);
    border-color: var(--p-white)
  }
  h3 {
    color: var(--p-light-grey);
    border-color: var(--p-light-grey)
  }
  h4, h5, h6 {
    color: var(--p-grey)
  }
  p {
    color: var(--p-light-grey)
  }
  .row.landing {
    background-color:var(--p-black)
  }
  .nav {
  background-color:var(--p-dark);
  border-bottom:none
  }
  .nav>div>.link,.nav>div>div>.link {
  color:var(--p-white)
  }

  .nav>div>.link:hover,.nav>div>div>.link:hover {
  color:var(--p-pink)
  }
}

/* Page components */
body {
font-family: var(--p-font-body);
background-color: var(--p-white)
}

/* Component alterations */
.right {
float:right
}

.left {
float:left
}

.center {
text-align:center
}

.round-sm {
border-radius:5px
}

.round-md {
border-radius:10px
}

.round-xl {
border-radius:25px
}

button.blue:hover {
background-color:var(--p-blue-hover)
}

button.blue:active {
border:3px inset var(--p-blue-hover)
}

button.green:hover {
background-color:var(--p-green-hover)
}

button.green:active {
border:3px inset var(--p-green-hover)
}

button.red:hover {
background-color:var(--p-red-hover)
}

button.red:active {
border:3px inset var(--p-red-hover)
}

button.yellow:hover {
background-color:var(--p-yellow-hover)
}

button.yellow:active {
border:3px inset var(--p-yellow-hover)
}

button.orange:hover {
background-color:var(--p-orange-hover)
}

button.orange:active {
border:3px inset var(--p-orange-hover)
}

button.pink:hover {
background-color:var(--p-pink-hover)
}

button.pink:active {
border:3px inset var(--p-pink-hover)
}

button.purple:hover {
background-color:var(--p-purple-hover)
}

button.purple:active {
border:3px inset var(--p-purple-hover)
}

button.dark:hover {
background-color:var(--p-dark-hover)
}

button.dark:active {
border:3px inset var(--p-dark-hover)
}

button.white:hover {
background-color:var(--p-white-hover)
}

button.white:active {
border:3px inset var(--p-white-hover)
}

button.light-grey:hover {
background-color:var(--p-light-grey-hover)
}

button.light-grey:active {
border:3px inset var(--p-light-grey-hover)
}

button.grey:hover {
background-color:var(--p-grey-hover)
}

button.grey:active {
border:3px inset var(--p-grey-hover)
}

button.black:hover {
background-color:var(--p-black-hover)
}

button.black:active {
border:3px inset var(--p-black-hover)
}

.red {
background-color:var(--p-red)
}

.pink {
background-color:var(--p-pink)
}

.yellow {
background-color:var(--p-yellow)
}

.orange {
background-color:var(--p-orange)
}

.green {
background-color:var(--p-green)
}

.blue {
background-color:var(--p-blue)
}

.purple {
background-color:var(--p-purple)
}

.dark {
background-color:var(--p-dark)
}

.white {
background-color:var(--p-white)
}

.grey {
background-color:var(--p-grey)
}

.black {
background-color:var(--p-black)
}

.light-grey {
  background-color: var(--p-light-grey)
}

.text-red, a.text-red {
color:var(--p-red)
}

.text-pink, a.text-pink {
color:var(--p-pink)
}

.text-yellow, a.text-yellow {
color:var(--p-yellow)
}

.text-orange, a.text-orange {
color:var(--p-orange)
}

.text-green, a.text-green {
color:var(--p-green)
}

.text-blue, a.text-blue {
color:var(--p-blue)
}

.text-purple, a.text-purple {
color:var(--p-purple)
}

.text-dark, a.text-dark {
color:var(--p-dark)
}

.text-white, a.text-white {
color:var(--p-white)
}

.text-grey, a.text-grey {
color:var(--p-grey)
}

.text-black, a.text-black {
color:var(--p-black)
}

.text-light-grey, a.text-light-grey {
  color: var(--p-light-grey)
}

a.text-red:hover {
  color: var(--p-red-hover)
}
a.text-pink:hover {
  color: var(--p-pink-hover)
}
a.text-yellow:hover {
  color: var(--p-yellow-hover)
}
a.text-orange:hover {
  color: var(--p-orange-hover)
}
a.text-green:hover {
  color: var(--p-green-hover)
}
a.text-blue:hover {
  color: var(--p-blue-hover)
}
a.text-purple:hover {
  color: var(--p-purple-hover)
}
a.text-dark:hover {
  color: var(--p-dark-hover)
}
a.text-white:hover {
  color: var(--p-white-hover)
}
a.text-grey:hover {
  color: var(--p-grey-hover)
}
a.text-black:hover {
  color: var(--p-black-hover)
}
a.text-light-grey:hover {
  color: var(--p-light-grey-hover)
}

.row.landing {
  background-color:var(--p-light-grey)
}
.row.landing>div>h1 {
  font-family: var(--p-font-landing-title)
}
.pad-sm {
padding:10px
}

.pad-md {
padding:20px
}

.pad-lg {
padding:35px
}

.absTop {
position:absolute;
top:0
}

.absBtm {
position:absolute;
bottom:0
}

.container.modal {
position:fixed;
top:0;
left:0;
display:none;
z-index:3;
max-height: 100%;
overflow-y: auto;
}
.container.modal > .row {
  width: 80%;
  margin: auto;
}

.modal-cover {
z-index:2;
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background-color:rgba(0,0,0,0.4);
display:none
}

.modal>div {
background-color:#fff;
border:#d3d3d3 1px solid
}

/* Grid system */
.container {
  width: 100%;
}
.row {
display:-ms-grid;
display:grid;
-ms-grid-columns: 1fr 10px 1fr 10px 1fr 10px 1fr 10px 1fr 10px 1fr 10px 1fr 10px 1fr 10px 1fr 10px 1fr 10px 1fr 10px 1fr;
grid-template-columns: repeat(12, 1fr);
grid-row-gap:15px;
grid-column-gap:10px;
}

.row>div>img {
  max-height: 100%;
  max-width: 100%
}

.row.justify-even { -webkit-box-pack: space-evenly; -ms-flex-pack: space-evenly; justify-content: space-evenly; }
.row.justify-around { -ms-flex-pack: distribute; justify-content: space-around; }
.row.justify-between { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }
.row.justify-center { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
.row.justify-start { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: start; }
.row.justify-end { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: end; }
.row.align-even { -ms-flex-line-pack: space-evenly; align-content: space-evenly; }
.row.align-around { -ms-flex-line-pack: distribute; align-content: space-around; }
.row.align-between { -ms-flex-line-pack: justify; align-content: space-between; }
.row.align-center { -ms-flex-line-pack: center; align-content: center; }
.row.align-start { -ms-flex-line-pack: start; align-content: start; }
.row.align-end { -ms-flex-line-pack: end; align-content: end; }

[class^="col-"] { padding: 15px }

.col-1 {
  -ms-grid-column-span: 1;
  grid-column: span 1;
}

.col-2 {
  -ms-grid-column-span: 2;
  grid-column: span 2;
}

.col-3 {
  -ms-grid-column-span: 3;
  grid-column: span 3;
}

.col-4 {
  -ms-grid-column-span: 4;
  grid-column: span 4;
}

.col-5 {
  -ms-grid-column-span: 5;
  grid-column: span 5;
}

.col-6 {
  -ms-grid-column-span: 6;
  grid-column: span 6;
}

.col-7 {
  -ms-grid-column-span: 7;
  grid-column: span 7;
}

.col-8 {
  -ms-grid-column-span: 8;
  grid-column: span 8;
}

.col-9 {
  -ms-grid-column-span: 9;
  grid-column: span 9;
}

.col-10 {
  -ms-grid-column-span: 10;
  grid-column: span 10;
}

.col-11 {
  -ms-grid-column-span: 11;
  grid-column: span 11;
}

.col-12 {
  -ms-grid-column-span: 12;
  grid-column: span 12;
}

.col-sm-1 {
  -ms-grid-column-span: 1;
  grid-column: span 1;
}

.col-sm-2 {
  -ms-grid-column-span: 2;
  grid-column: span 2;
}

.col-sm-3 {
  -ms-grid-column-span: 3;
  grid-column: span 3;
}

.col-sm-4 {
  -ms-grid-column-span: 4;
  grid-column: span 4;
}

.col-sm-5 {
  -ms-grid-column-span: 5;
  grid-column: span 5;
}

.col-sm-6 {
  -ms-grid-column-span: 6;
  grid-column: span 6;
}

.col-sm-7 {
  -ms-grid-column-span: 7;
  grid-column: span 7;
}

.col-sm-8 {
  -ms-grid-column-span: 8;
  grid-column: span 8;
}

.col-sm-9 {
  -ms-grid-column-span: 9;
  grid-column: span 9;
}

.col-sm-10 {
  -ms-grid-column-span: 10;
  grid-column: span 10;
}

.col-sm-11 {
  -ms-grid-column-span: 11;
  grid-column: span 11;
}

.col-sm-12 {
  -ms-grid-column-span: 12;
  grid-column: span 12;
}

@media only screen and (min-width: 700px) {
  .col-md-1 {
    -ms-grid-column-span: 1;
    grid-column: span 1;
  }

  .col-md-2 {
    -ms-grid-column-span: 2;
    grid-column: span 2;
  }

  .col-md-3 {
    -ms-grid-column-span: 3;
    grid-column: span 3;
  }

  .col-md-4 {
    -ms-grid-column-span: 4;
    grid-column: span 4;
  }

  .col-md-5 {
    -ms-grid-column-span: 5;
    grid-column: span 5;
  }

  .col-md-6 {
    -ms-grid-column-span: 6;
    grid-column: span 6;
  }

  .col-md-7 {
    -ms-grid-column-span: 7;
    grid-column: span 7;
  }

  .col-md-8 {
    -ms-grid-column-span: 8;
    grid-column: span 8;
  }

  .col-md-9 {
    -ms-grid-column-span: 9;
    grid-column: span 9;
  }

  .col-md-10 {
    -ms-grid-column-span: 10;
    grid-column: span 10;
  }

  .col-md-11 {
    -ms-grid-column-span: 11;
    grid-column: span 11;
  }

  .col-md-12 {
    -ms-grid-column-span: 12;
    grid-column: span 12;
  }
}

@media only screen and (min-width: 1200px) {
  .col-lg-1 {
    -ms-grid-column-span: 1;
    grid-column: span 1;
  }

  .col-lg-2 {
    -ms-grid-column-span: 2;
    grid-column: span 2;
  }

  .col-lg-3 {
    -ms-grid-column-span: 3;
    grid-column: span 3;
  }

  .col-lg-4 {
    -ms-grid-column-span: 4;
    grid-column: span 4;
  }

  .col-lg-5 {
    -ms-grid-column-span: 5;
    grid-column: span 5;
  }

  .col-lg-6 {
    -ms-grid-column-span: 6;
    grid-column: span 6;
  }

  .col-lg-7 {
    -ms-grid-column-span: 7;
    grid-column: span 7;
  }

  .col-lg-8 {
    -ms-grid-column-span: 8;
    grid-column: span 8;
  }

  .col-lg-9 {
    -ms-grid-column-span: 9;
    grid-column: span 9;
  }

  .col-lg-10 {
    -ms-grid-column-span: 10;
    grid-column: span 10;
  }

  .col-lg-11 {
    -ms-grid-column-span: 11;
    grid-column: span 11;
  }

  .col-lg-12 {
    -ms-grid-column-span: 12;
    grid-column: span 12;
  }
}

/* Grid extras */

.flex {
  display: flex
}

/* Navbar */
.nav-content {
display:none;
-webkit-box-align:center;
-ms-flex-align:center;
align-items:center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
    -ms-flex-direction: column;
        flex-direction: column;
}
.nav-content.center {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.nav-content>a {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
}

.nav.small>.nav-content {
padding:10px 0
}

.nav.medium>.nav-content {
padding:20px 0
}

.nav.large>.nav-content {
padding:40px 0
}

.nav-content.show {
display:-webkit-box;
display:-ms-flexbox;
display:flex
}

.nav {
width:100%;
border-bottom:1px solid var(--p-light-grey);
background-color:var(--p-white);
}

.nav.fixed {
position:fixed;
-webkit-animation:dropIn .5s ease;
animation:dropIn .5s ease
}

@-webkit-keyframes dropIn {
from {
-webkit-transform:translateY(-100%);
transform:translateY(-100%)
}

to {
-webkit-transform:translateY(0%);
transform:translateY(0%)
}
}

@keyframes dropIn {
from {
-webkit-transform:translateY(-100%);
transform:translateY(-100%)
}

to {
-webkit-transform:translateY(0%);
transform:translateY(0%)
}
}

.nav>div>.link>img {
width:50px;
height:auto
}

.nav.small>div>.link,.nav.small>div>div>.link {
font-size:0.75rem
}
.nav.small>div>div>.link>.dropdown_caret {
  font-size: 0.55rem
}

.nav.medium>div>.link,.nav.medium>div>div>.link {
font-size:1rem
}
.nav.medium>div>div>.link>.dropdown_caret {
  font-size: 0.8rem
}

.nav.large>div>.link,.nav.large>div>div>.link {
font-size:1.5rem
}
.nav.large>div>div>.link>.dropdown_caret {
  font-size: 1.1rem
}

.nav>div>.link,.nav>div>div>.link {
text-decoration:none;
width:100%;
color:var(--p-black);
position:relative;
display:inline-block
}

.nav>div>.link:hover,.nav>div>div>.link:hover {
color:var(--p-blue)
}

.nav>.dropdown {
position:relative;
display:inline-block
}

.dropdown:hover > .dropdown-content {
display:none
}
.dropdown_caret {
  display: none
}

.dropdown-content {
display:none;
position:absolute;
text-align:left;
left: 25%;
background-color:var(--p-blue);
border:var(--p-dark) 1px solid;
min-width:160px;
border-radius:5px;
text-align: center;
width:50%;
z-index:5
}

.dropdown-content>.link {
text-decoration:none;
padding:8px 12px;
display:block;
border-radius:5px;
color:var(--p-white)
}

.dropdown-content>.link:hover {
color:var(--p-light-grey)
}

@media only screen and (min-width: 700px) {
.nav-content {
display:-webkit-box!important;
display:-ms-flexbox!important;
display:flex!important;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
    -ms-flex-direction: row;
        flex-direction: row;
}

.dropdown:hover > .dropdown-content {
display:block
}
.dropdown_caret {
  display: inline-block
}

.nav.small>.nav-content {
padding:10px
}

.nav.medium>.nav-content {
padding:20px
}

.nav.large>.nav-content {
padding:40px
}

.nav>div>.link,.nav>div>div>.link {
width:auto
}

.menuButton {
display:none
}

.nav>div>.link:not(:last-child),.nav>div>div>.link:not(:last-child) {
padding-bottom:0!important;
padding-right:15px
}

.dropdown-content {
width:auto;
left: auto;
text-align: left;
}
}

.nav>div>.link:not(:last-child),.nav>div>div>.link:not(:last-child) {
padding-bottom:10px
}

.nav>div>.active,.nav>div>div>.active {
font-weight:700;
text-decoration:underline
}

/* TEXT */
/* links & buttons */
a {
text-decoration:none;
color:var(--p-blue)
}

a:hover {
text-decoration:underline;
color:var(--p-blue-hover)
}
a[anchor="true"] {
  scroll-margin-top: var(--p-anchor-indent);
}

/*
[href^="http"]::after {
  content: url("assets/external.svg");
}
*/
button {
cursor:pointer;
background-color:transparent;
border:none;
border:3px solid transparent;
border-radius:5px;
-webkit-transition:background-color .25s ease;
-o-transition:background-color .25s ease;
transition:background-color .25s ease;
font-size: 1rem
}

button:not(.menuButton) {
margin:8px;
padding:8px 16px
}

.disabled {
color:var(--p-grey)!important
}

.disabled:hover {
cursor:not-allowed!important
}

/* paragraphs */
p {
line-height:150%;
color: var(--p-dark);
font-size: 1rem
}

.small {
font-size:0.75rem
}

.large {
font-size:1.25rem
}

/* other */
code {
padding:4px 8px;
background-color:var(--p-light-grey);
display:inline-block;
line-height:150%;
word-break: keep-all;
font-family: var(--p-font-code)
}

inline {
padding:4px 8px;
background-color:var(--p-light-grey);
display:inline-block;
font-family: var(--p-font-code)
}

/* Headings */
h1 {
font-size: var(--p-h1-size);
color: var(--p-black);
border-bottom: 2px solid var(--p-black);
padding-bottom: var(--p-h-pad);
margin-bottom: var(--p-h-margin)
}

h2 {
font-size: var(--p-h2-size);
color: var(--p-black);
border-bottom: 1px solid var(--p-black);
padding-bottom: var(--p-h-pad);
margin-bottom: var(--p-h-margin)
}

h3 {
font-size: var(--p-h3-size);
color: var(--p-dark);
padding-bottom: var(--p-h-pad)
}

h4,h5,h6 {
color: var(--p-grey)
}

h4 {
  font-size: var(--p-h4-size)
}
h5 {
  font-size: var(--p-h5-size)
}
h6 {
  font-size: var(--p-h6-size)
}