@import url("https://fonts.googleapis.com/css2?family=Dosis:wght@400;500;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;700&display=swap");
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* Document
   ========================================================================== */
/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
  line-height: 1.15;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
}

/* Sections
     ========================================================================== */
/**
   * Remove the margin in all browsers.
   */
body {
  margin: 0;
}

/**
   * Render the `main` element consistently in IE.
   */
main {
  display: block;
}

/**
   * Correct the font size and margin on `h1` elements within `section` and
   * `article` contexts in Chrome, Firefox, and Safari.
   */
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
     ========================================================================== */
/**
   * 1. Add the correct box sizing in Firefox.
   * 2. Show the overflow in Edge and IE.
   */
hr {
  box-sizing: content-box;
  /* 1 */
  height: 0;
  /* 1 */
  overflow: visible;
  /* 2 */
}

/**
   * 1. Correct the inheritance and scaling of font size in all browsers.
   * 2. Correct the odd `em` font sizing in all browsers.
   */
pre {
  font-family: monospace, monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */
}

/* Text-level semantics
     ========================================================================== */
/**
   * Remove the gray background on active links in IE 10.
   */
a {
  background-color: transparent;
}

/**
   * 1. Remove the bottom border in Chrome 57-
   * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
   */
abbr[title] {
  border-bottom: none;
  /* 1 */
  text-decoration: underline;
  /* 2 */
  text-decoration: underline dotted;
  /* 2 */
}

/**
   * Add the correct font weight in Chrome, Edge, and Safari.
   */
b,
strong {
  font-weight: bolder;
}

/**
   * 1. Correct the inheritance and scaling of font size in all browsers.
   * 2. Correct the odd `em` font sizing in all browsers.
   */
code,
kbd,
samp {
  font-family: monospace, monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */
}

/**
   * Add the correct font size in all browsers.
   */
small {
  font-size: 80%;
}

/**
   * Prevent `sub` and `sup` elements from affecting the line height in
   * all browsers.
   */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
     ========================================================================== */
/**
   * Remove the border on images inside links in IE 10.
   */
img {
  border-style: none;
}

/* Forms
     ========================================================================== */
/**
   * 1. Change the font styles in all browsers.
   * 2. Remove the margin in Firefox and Safari.
   */
button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  /* 1 */
  font-size: 100%;
  /* 1 */
  line-height: 1.15;
  /* 1 */
  margin: 0;
  /* 2 */
}

/**
   * Show the overflow in IE.
   * 1. Show the overflow in Edge.
   */
button,
input {
  /* 1 */
  overflow: visible;
}

/**
   * Remove the inheritance of text transform in Edge, Firefox, and IE.
   * 1. Remove the inheritance of text transform in Firefox.
   */
button,
select {
  /* 1 */
  text-transform: none;
}

/**
   * Correct the inability to style clickable types in iOS and Safari.
   */
button,
[type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button;
}

/**
   * Remove the inner border and padding in Firefox.
   */
button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
   * Restore the focus styles unset by the previous rule.
   */
button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
   * Correct the padding in Firefox.
   */
fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
   * 1. Correct the text wrapping in Edge and IE.
   * 2. Correct the color inheritance from `fieldset` elements in IE.
   * 3. Remove the padding so developers are not caught out when they zero out
   *    `fieldset` elements in all browsers.
   */
legend {
  box-sizing: border-box;
  /* 1 */
  color: inherit;
  /* 2 */
  display: table;
  /* 1 */
  max-width: 100%;
  /* 1 */
  padding: 0;
  /* 3 */
  white-space: normal;
  /* 1 */
}

/**
   * Add the correct vertical alignment in Chrome, Firefox, and Opera.
   */
progress {
  vertical-align: baseline;
}

/**
   * Remove the default vertical scrollbar in IE 10+.
   */
textarea {
  overflow: auto;
}

/**
   * 1. Add the correct box sizing in IE 10.
   * 2. Remove the padding in IE 10.
   */
[type=checkbox],
[type=radio] {
  box-sizing: border-box;
  /* 1 */
  padding: 0;
  /* 2 */
}

/**
   * Correct the cursor style of increment and decrement buttons in Chrome.
   */
[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto;
}

/**
   * 1. Correct the odd appearance in Chrome and Safari.
   * 2. Correct the outline style in Safari.
   */
[type=search] {
  -webkit-appearance: textfield;
  /* 1 */
  outline-offset: -2px;
  /* 2 */
}

/**
   * Remove the inner padding in Chrome and Safari on macOS.
   */
[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
   * 1. Correct the inability to style clickable types in iOS and Safari.
   * 2. Change font properties to `inherit` in Safari.
   */
::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */
}

/* Interactive
     ========================================================================== */
/*
   * Add the correct display in Edge, IE 10+, and Firefox.
   */
details {
  display: block;
}

/*
   * Add the correct display in all browsers.
   */
summary {
  display: list-item;
}

/* Misc
     ========================================================================== */
/**
   * Add the correct display in IE 10+.
   */
template {
  display: none;
}

/**
   * Add the correct display in IE 10.
   */
[hidden] {
  display: none;
}

/*! HTML5 Boilerplate v8.0.0 | MIT License | https://html5boilerplate.com/ */
/* main.css 2.1.0 | MIT License | https://github.com/h5bp/main.css#readme */
/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */
/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */
html {
  color: #222;
  font-size: 1em;
  line-height: 1.4;
}

/*
   * Remove text-shadow in selection highlight:
   * https://twitter.com/miketaylr/status/12228805301
   *
   * Vendor-prefixed and regular ::selection selectors cannot be combined:
   * https://stackoverflow.com/a/16982510/7133471
   *
   * Customize the background color to match your design.
   */
::-moz-selection {
  background: #b3d4fc;
  text-shadow: none;
}

::selection {
  background: #b3d4fc;
  text-shadow: none;
}

/*
   * A better looking default horizontal rule
   */
hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}

/*
   * Remove the gap between audio, canvas, iframes,
   * images, videos and the bottom of their containers:
   * https://github.com/h5bp/html5-boilerplate/issues/440
   */
audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}

/*
   * Remove default fieldset styles.
   */
fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

/*
   * Allow only vertical resizing of textareas.
   */
textarea {
  resize: none;
}

/* ==========================================================================
     Author's custom styles
     ========================================================================== */
/* ==========================================================================
     Helper classes
     ========================================================================== */
/*
   * Hide visually and from screen readers
   */
.hidden,
[hidden] {
  display: none !important;
}

/*
   * Hide only visually, but have it available for screen readers:
   * https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
   *
   * 1. For long content, line feeds are not interpreted as spaces and small width
   *    causes content to wrap 1 word per line:
   *    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
   */
.sr-only {
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
  /* 1 */
}

/*
   * Extends the .sr-only class to allow the element
   * to be focusable when navigated to via the keyboard:
   * https://www.drupal.org/node/897638
   */
.sr-only.focusable:active,
.sr-only.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  white-space: inherit;
  width: auto;
}

/*
   * Hide visually and from screen readers, but maintain layout
   */
.invisible {
  visibility: hidden;
}

/*
   * Clearfix: contain floats
   *
   * For modern browsers
   * 1. The space content is one way to avoid an Opera bug when the
   *    `contenteditable` attribute is included anywhere else in the document.
   *    Otherwise it causes space to appear at the top and bottom of elements
   *    that receive the `clearfix` class.
   * 2. The use of `table` rather than `block` is only necessary if using
   *    `:before` to contain the top-margins of child elements.
   */
.clearfix::before,
.clearfix::after {
  content: " ";
  display: table;
}

.clearfix::after {
  clear: both;
}

/* ==========================================================================
     EXAMPLE Media Queries for Responsive Design.
     These examples override the primary ('mobile first') styles.
     Modify as content requires.
     ========================================================================== */
@media only screen and (min-width: 35em) {
  /* Style adjustments for viewports that meet the condition */
}
@media print, (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 1.25dppx), (min-resolution: 120dpi) {
  /* Style adjustments for high resolution devices */
}
/* ==========================================================================
     Print styles.
     Inlined to avoid the additional HTTP request:
     https://www.phpied.com/delay-loading-your-print-css/
     ========================================================================== */
@media print {
  *,
*::before,
*::after {
    background: #fff !important;
    color: #000 !important;
    /* Black prints faster */
    box-shadow: none !important;
    text-shadow: none !important;
  }

  a,
a:visited {
    text-decoration: underline;
  }

  a[href]::after {
    content: " (" attr(href) ")";
  }

  abbr[title]::after {
    content: " (" attr(title) ")";
  }

  /*
     * Don't show links that are fragment identifiers,
     * or use the `javascript:` pseudo protocol
     */
  a[href^="#"]::after,
a[href^="javascript:"]::after {
    content: "";
  }

  pre {
    white-space: pre-wrap !important;
  }

  pre,
blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
  }

  /*
     * Printing Tables:
     * https://web.archive.org/web/20180815150934/http://css-discuss.incutio.com/wiki/Printing_Tables
     */
  thead {
    display: table-header-group;
  }

  tr,
img {
    page-break-inside: avoid;
  }

  p,
h2,
h3 {
    orphans: 3;
    widows: 3;
  }

  h2,
h3 {
    page-break-after: avoid;
  }
}
:root {
  /* Shades */
  --pureBlack: #000;
  --black: #333;
  --darkerGray: #383838;
  --darkGray: #777777;
  --gray: #bfbfbf;
  --default: #d4d4d4;
  --lightGray: #eeeeee;
  --white: #f6f6f6;
  --pureWhite: #ffffff;
  /* Colors */
  --darkGreen: #335533;
  --green: #32a65a;
  --lightGreen: #5acca6;
  --teal: #60bbbf;
  --orange: #dab820;
  --yellow: #ecec75;
  --lightYellow: #f6f6b8;
  --lightRed: #df5e36;
  --red: #e84201;
  --darkRed: #992b2b;
  --lightBlue: #87ceeb;
  --blue: #909fcc;
  --darkBlue: #323b55;
  --darkerBlue: #23293a;
  --primary: var(--teal);
  --danger: var(--red);
  --cancel: var(--lightRed);
  --attention: var(--orange);
  --success: var(--green);
  --info: var(--blue);
  --background: var(--lightGray);
  --textColor: var(--black);
  --linkColor: var(--primary);
  --headingFont: "Dosis", sans-serif;
  --bodyFont: "Open Sans", sans-serif;
  --baseFontSize: 100%;
  --h1: 3.052em;
  --h2: 2.441em;
  --h3: 1.953em;
  --h4: 1.563em;
  --h5: 1.173em;
  --smallText: 0.8em;
  --btnBackground: var(--default);
  --btnTextColor: var(--black);
  --btnPadding: 6px 25px;
  --borderColor: var(--gray);
  --border: solid 2px var(--lineColor);
  --cardBackground: var(--white);
  --containerPadding: 2.25%;
  --radius: 5px;
  --headerBackground: var(--darkerGray);
  --headerTextColor: var(--white);
  --headerHeight: 3rem;
  --inputHighlight: 0 0 3px var(--info), 0 0 10px 0 var(--lightBlue);
  --inputRadius: clamp(0px, var(--radius), 8px);
  --lineColor: var(--default);
  --shadow-1: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-2: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
  --shadow-3: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  --shadow-4: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-5: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --tableHeadBackground: var(--gray);
  --tableFootBackground: var(--default);
  --tableBackground: var(--white);
  --tableBackgroundAlt: var(--lightGray);
  --tableRadius: clamp(0px, var(--radius), 20px);
}

p a,
blockquote a {
  color: var(--linkColor);
  text-decoration: none;
  border-bottom: 2px dashed var(--linkColor);
}
p a:visited,
blockquote a:visited {
  --linkColor: var(--red);
}

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

blockquote {
  --quoteColor: var(--info);
  margin: 2em 0;
  padding: 2em;
  border-radius: var(--radius);
  background: var(--cardBackground);
  position: relative;
  max-width: 700px;
  box-shadow: var(--shadow-3);
  font-style: italic;
}
blockquote::before {
  content: "";
  position: absolute;
  height: 100%;
  width: 1.2%;
  background: var(--quoteColor);
  top: 0;
  left: 0;
}

body {
  font-family: var(--bodyFont);
  background: var(--background);
  color: var(--textColor);
  font-weight: 400;
  line-height: 1.65;
  transition: background 300ms ease-in-out;
}

pre code {
  border-radius: var(--radius);
}

footer {
  --footerTextColor: var(--lightGray);
  text-align: center;
  color: var(--footerTextColor);
  background: var(--headerBackground);
  padding: 3rem var(--containerPadding);
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.1), 0 -6px 26px rgba(0, 0, 0, 0.3);
}
footer a {
  color: var(--primary);
  margin: 0 10px;
  text-decoration: none;
  border-bottom: 1px solid var(--primary);
}
footer p {
  margin-bottom: 0;
  max-width: none;
}

form {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  padding: 0.4em;
}

fieldset {
  margin-bottom: 0.5em;
  margin-right: 1.2em;
}

h1,
h2,
h3,
h4,
h5 {
  margin: 2.75rem 0 1.05rem;
  font-family: var(--headingFont);
  font-weight: 400;
  line-height: 1.15;
  margin-top: 0;
}

h1 {
  font-size: var(--h1);
}

h2 {
  font-size: var(--h2);
}

h3 {
  font-size: var(--h3);
}

h4 {
  font-size: var(--h4);
}

h5 {
  font-size: var(--h5);
}

header {
  background: var(--headerBackground);
  display: block;
  box-shadow: var(--shadow-3);
  color: var(--lightGray);
  text-align: center;
  padding: 5px var(--containerPadding);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1;
}
header h1 {
  color: var(--white);
  font-family: var(--bodyFont);
  font-size: var(--baseFontSize);
  margin: 0;
  text-align: center;
  padding: 10px;
}
header nav a {
  color: var(--white);
  text-decoration: none;
}
header nav a + a {
  margin-left: 15px;
}

@media only screen and (min-width: 500px) {
  :root {
    --baseFontSize: 112.5%;
  }

  header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: var(--headerHeight);
  }
}
hr {
  border-top: var(--border);
  margin: 80px 0;
}

img {
  border-radius: var(--radius);
}

input,
textarea,
select {
  padding: 0.3em 0.5em;
  width: 100%;
  border: var(--border);
  border-radius: var(--inputRadius);
  transition: box-shadow 200ms ease;
}

textarea {
  min-height: 150px;
}

input:focus,
textarea:focus,
select:focus,
button:focus {
  box-shadow: var(--inputHighlight);
}

::placeholder {
  color: var(--darkGray);
}

input[type=submit],
button {
  width: auto;
  appearance: none;
  color: var(--btnTextColor);
  text-transform: uppercase;
  background-color: var(--btnBackground);
  border: none;
  padding: var(--btnPadding);
  border-radius: 3px;
  box-shadow: var(--shadow-2);
  transition: box-shadow 200ms ease, transform 200ms ease;
  margin: 3px;
}
input[type=submit]:hover:not(:disabled),
button:hover:not(:disabled) {
  box-shadow: var(--shadow-4);
}
input[type=submit]:active,
button:active {
  transform: translateY(0px);
  box-shadow: var(--shadow-1);
}
input[type=submit][data-primary],
button[data-primary] {
  --btnBackground: var(--primary);
  --btnTextColor: var(--lightGray);
}
input[type=submit][data-cancel],
button[data-cancel] {
  --btnBackground: var(--cancel);
  --btnTextColor: var(--lightGray);
}
input[type=submit][data-info],
button[data-info] {
  --btnBackground: var(--info);
  --btnTextColor: var(--lightGray);
}
input[type=submit][data-success],
button[data-success] {
  --btnBackground: var(--success);
  --btnTextColor: var(--lightGray);
}
input[type=submit][data-danger],
button[data-danger] {
  --btnBackground: var(--danger);
  --btnTextColor: var(--lightGray);
}
input[type=submit][data-attention],
button[data-attention] {
  --btnBackground: var(--attention);
  --btnTextColor: var(--lightGray);
}
input[type=submit]:disabled,
button:disabled {
  --btnBackground: var(--gray);
  opacity: 0.6;
  box-shadow: var(--shadow-1);
}
input[type=submit][data-small],
button[data-small] {
  font-size: var(--smallText);
  --btnPadding: 5px 2px;
}

label {
  display: block;
  font-size: var(--smallText);
}

ul,
ol,
dl {
  margin-top: 0;
  margin-bottom: 1em;
}

small,
.text_small {
  font-size: var(--smallText);
}

strong {
  font-weight: 700;
}

table,
thead,
tfoot th,
tr,
td {
  border-collapse: collapse;
}

table {
  width: 100%;
  text-align: center;
  border-radius: var(--tableRadius);
  color: var(--black);
  overflow: hidden;
}
table tfoot {
  background: var(--tableFootBackground);
}
table tfoot td {
  padding: 10px;
}
table tbody tr:nth-child(even) {
  background: var(--tableBackgroundAlt);
}
table tbody tr:nth-child(odd) {
  background: var(--tableBackground);
}
table td {
  padding: 10px;
}
table thead {
  background: var(--tableHeadBackground);
}
table thead th {
  padding: 10px;
  text-transform: uppercase;
}

.card {
  --cardShadow: var(--shadow-4);
  margin: 5px;
  padding: 2em;
  border-radius: var(--radius);
  background: var(--cardBackground);
  box-shadow: var(--cardShadow);
  overflow-x: auto;
}

.card > *:first-child {
  margin-top: 0;
}

.card > *:last-child {
  margin-bottom: 0;
}

.card > img {
  width: 100%;
  max-height: 400px;
  object-fit: cover;
  margin: 1em 0;
}

.card.grid > * {
  margin: 0;
}

.flex {
  --justifyContent: space-between;
  flex-wrap: wrap;
  display: flex;
  justify-content: var(--justifyContent);
  gap: 10px;
}

.flex-column {
  flex-direction: column;
}

.flex-around {
  --justifyContent: space-around;
}

.flex-even {
  --justifyContent: space-evenly;
}

.flex-center {
  --justifyContent: center;
}

.flex-start {
  --justifyContent: flex-start;
}

.flex-end {
  --justifyContent: flex-end;
}

.flex-col {
  flex-direction: column;
}

.auto-grid {
  --auto-grid-min-size: 18em;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--auto-grid-min-size), 1fr));
  grid-gap: 1rem;
}

.grid {
  --gridCols: 2;
  display: grid;
  grid-template-columns: repeat(var(--gridCols), 1fr);
  grid-gap: 1rem;
}

.stretch {
  grid-column: 1/-1;
  align-self: stretch;
  justify-self: stretch;
}

.col-1 {
  --gridCols: 1;
}

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

.start-1 {
  grid-column-start: 1;
}

.col-2 {
  --gridCols: 2;
}

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

.start-2 {
  grid-column-start: 2;
}

.col-3 {
  --gridCols: 3;
}

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

.start-3 {
  grid-column-start: 3;
}

.col-4 {
  --gridCols: 4;
}

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

.start-4 {
  grid-column-start: 4;
}

.col-5 {
  --gridCols: 5;
}

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

.start-5 {
  grid-column-start: 5;
}

.col-6 {
  --gridCols: 6;
}

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

.start-6 {
  grid-column-start: 6;
}

.col-7 {
  --gridCols: 7;
}

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

.start-7 {
  grid-column-start: 7;
}

.col-8 {
  --gridCols: 8;
}

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

.start-8 {
  grid-column-start: 8;
}

.col-9 {
  --gridCols: 9;
}

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

.start-9 {
  grid-column-start: 9;
}

.col-10 {
  --gridCols: 10;
}

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

.start-10 {
  grid-column-start: 10;
}

.col-11 {
  --gridCols: 11;
}

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

.start-11 {
  grid-column-start: 11;
}

.col-12 {
  --gridCols: 12;
}

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

.start-12 {
  grid-column-start: 12;
}

.layout {
  padding: calc(2rem + var(--headerHeight)) var(--containerPadding);
}

.container {
  padding: 2em;
}