/* hiq */
input[type='color']::-webkit-color-swatch {
    border: none;
    border-radius: 0;
}
input[type='file'] + label:disabled {
    color: hsl(0, 0%, 75%);
    color: var(--disabled-color);
    background-color: hsl(0, 0%, 95%);
    background-color: var(--gray-lightest);
    cursor: not-allowed;
}
input[type='file'] + label:visited:not(:disabled) {
    color: hsl(0, 0%, 25%);
    color: var(--text-color);
}
input[type='file'] + label:focus:not(:disabled) {
    background-color: hsl(0, 0%, 75%);
    background-color: var(--gray-light);
}
progress::-moz-progress-bar {
    background-color: #0032a0;
    background-color: var(--color-primary);
}
progress::-webkit-progress-value {
    background-color: #0032a0;
    background-color: var(--color-primary);
}
progress::-webkit-progress-bar {
    background-color: hsl(0, 0%, 90%);
    background-color: var(--gray-lighter);
}
meter:-moz-meter-optimum::-moz-meter-bar {
    background: #0032a0;
    background: var(--color-primary);
}
meter::-webkit-meter-optimum-value {
    background: #0032a0;
    background: var(--color-primary);
}
meter::-moz-meter-bar {
    background: hsl(0, 0%, 90%);
    background: var(--gray-lighter);
}
.radio input[type='radio']:disabled + label::before {
    background-color: hsl(0, 0%, 95%);
    background-color: var(--gray-lightest);
}
.radio input[type='radio']:disabled + label {
    color: hsl(0, 0%, 75%);
    color: var(--disabled-color);
    cursor: not-allowed;
}
.radio input[type='radio']:checked + label::after {
    display: block;
    position: absolute;
    top: 6px;
    left: 6px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: white;
    content: '';
}
.radio input[type='radio']:checked + label::before {
    background-color: #0032a0 !important;
    background-color: var(--color-primary) !important;
}
.radio label::before {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: hsl(0, 0%, 90%);
    background-color: var(--gray-lighter);
    transition: background-color 0.1s ease-out;
    transition: background-color var(--speed) var(--easing);
    content: '';
}
.checkbox input[type='checkbox']:disabled + label::before {
    background-color: hsl(0, 0%, 95%);
    background-color: var(--gray-lightest);
}
.checkbox input[type='checkbox']:disabled + label {
    color: hsl(0, 0%, 75%);
    color: var(--disabled-color);
    cursor: not-allowed;
}
.checkbox input[type='checkbox']:checked + label::after {
    display: block;
    position: absolute;
    top: 3px;
    left: 8px;
    width: 8px;
    height: 14px;
    border: solid white;
    border-width: 0 2px 2px 0;
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
    content: '';
}
.checkbox input[type='checkbox']:checked + label::before {
    background-color: #0032a0 !important;
    background-color: var(--color-primary) !important;
}
.checkbox label::before {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 24px;
    height: 24px;
    background-color: hsl(0, 0%, 90%);
    background-color: var(--gray-lighter);
    transition: background-color 0.1s ease-out;
    transition: background-color var(--speed) var(--easing);
    content: '';
}
select:disabled {
    color: hsl(0, 0%, 75%);
    color: var(--disabled-color);
    cursor: not-allowed;
}
textarea:disabled::-webkit-input-placeholder {
    color: hsl(0, 0%, 75%);
    color: var(--disabled-color);
}
textarea:disabled:-ms-input-placeholder {
    color: hsl(0, 0%, 75%);
    color: var(--disabled-color);
}
textarea:disabled::placeholder {
    color: hsl(0, 0%, 75%);
    color: var(--disabled-color);
}
textarea:disabled {
    border-color: hsl(0, 0%, 90%);
    border-color: var(--gray-lighter);
    cursor: not-allowed;
}
textarea:focus {
    border: 1px solid #0032a0;
    border: 1px solid var(--color-primary);
}
input[type='text']:disabled::-webkit-input-placeholder, input[type='password']:disabled::-webkit-input-placeholder, input[type='url']:disabled::-webkit-input-placeholder, input[type='email']:disabled::-webkit-input-placeholder, input[type='tel']:disabled::-webkit-input-placeholder, input[type='search']:disabled::-webkit-input-placeholder, input[type='number']:disabled::-webkit-input-placeholder, input[type='date']:disabled::-webkit-input-placeholder, input[type='month']:disabled::-webkit-input-placeholder, input[type='week']:disabled::-webkit-input-placeholder, input[type='datetime-local']:disabled::-webkit-input-placeholder, input[type='color']:disabled::-webkit-input-placeholder {
    color: hsl(0, 0%, 75%);
    color: var(--disabled-color);
}
input[type='text']:disabled:-ms-input-placeholder, input[type='password']:disabled:-ms-input-placeholder, input[type='url']:disabled:-ms-input-placeholder, input[type='email']:disabled:-ms-input-placeholder, input[type='tel']:disabled:-ms-input-placeholder, input[type='search']:disabled:-ms-input-placeholder, input[type='number']:disabled:-ms-input-placeholder, input[type='date']:disabled:-ms-input-placeholder, input[type='month']:disabled:-ms-input-placeholder, input[type='week']:disabled:-ms-input-placeholder, input[type='datetime-local']:disabled:-ms-input-placeholder, input[type='color']:disabled:-ms-input-placeholder {
    color: hsl(0, 0%, 75%);
    color: var(--disabled-color);
}
input[type='text']:disabled::placeholder, input[type='password']:disabled::placeholder, input[type='url']:disabled::placeholder, input[type='email']:disabled::placeholder, input[type='tel']:disabled::placeholder, input[type='search']:disabled::placeholder, input[type='number']:disabled::placeholder, input[type='date']:disabled::placeholder, input[type='month']:disabled::placeholder, input[type='week']:disabled::placeholder, input[type='datetime-local']:disabled::placeholder, input[type='color']:disabled::placeholder {
    color: hsl(0, 0%, 75%);
    color: var(--disabled-color);
}
input[type='text']:disabled, input[type='password']:disabled, input[type='url']:disabled, input[type='email']:disabled, input[type='tel']:disabled, input[type='search']:disabled, input[type='number']:disabled, input[type='date']:disabled, input[type='month']:disabled, input[type='week']:disabled, input[type='datetime-local']:disabled, input[type='color']:disabled {
    border-color: hsl(0, 0%, 90%);
    border-color: var(--gray-lighter);
    cursor: not-allowed;
}
input[type='text']:focus, input[type='password']:focus, input[type='url']:focus, input[type='email']:focus, input[type='tel']:focus, input[type='search']:focus, input[type='number']:focus, input[type='date']:focus, input[type='month']:focus, input[type='week']:focus, input[type='datetime-local']:focus, input[type='color']:focus {
    border: 1px solid #0032a0;
    border: 1px solid var(--color-primary);
}
fieldset legend {
    margin-bottom: 1rem;
    font-weight: 700;
    font-weight: var(--font-weight-bold);
}
button:disabled, [role='button']:disabled, input[type='submit']:disabled, input[type='button']:disabled, input[type='reset']:disabled {
    color: hsl(0, 0%, 75%);
    color: var(--disabled-color);
    background-color: hsl(0, 0%, 95%);
    background-color: var(--gray-lightest);
    cursor: not-allowed;
}
button:visited:not(:disabled), [role='button']:visited:not(:disabled), input[type='submit']:visited:not(:disabled), input[type='button']:visited:not(:disabled), input[type='reset']:visited:not(:disabled) {
    color: hsl(0, 0%, 25%);
    color: var(--text-color);
}
button:focus:not(:disabled), [role='button']:focus:not(:disabled), input[type='submit']:focus:not(:disabled), input[type='button']:focus:not(:disabled), input[type='reset']:focus:not(:disabled) {
    background-color: hsl(0, 0%, 75%);
    background-color: var(--gray-light);
}
th:last-child, td:last-child {
    padding-right: 0;
}
a:active {
    color: rgb(0, 25, 80);
    color: var(--link-active-color);
}
blockquote p::after {
    content: '\201d';
}/* reset */
/* Set border-box box sizing so borders and padding don't affect set dimensions */
html {
  box-sizing: border-box;
}
* {
  box-sizing: inherit;
}
*::before {
  box-sizing: inherit;
}
*::after {
  box-sizing: inherit;
}
/* Reset block margins so spacing is only applied when needed */
html,
body,
p,
ol,
ul,
li,
dl,
dt,
dd,
blockquote,
figure,
fieldset,
legend,
textarea,
pre,
iframe,
hr,
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0;
}
/*
Set html font size to match browser size
Prevent adjustments of font size after orientation changes on some mobile devices
Reset line height
*/
html {
  font-size: 100%;
  line-height: 1;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}
/* Reset font sizes so semantic markup doesn't affect styling */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: 100%;
  font-weight: normal;
}
/* Remove bullets from unordered lists */
ul {
  list-style: none;
}
/* Remove border from iframes */
iframe {
  border: 0;
}
/* Set responsive media elements so images and embeds scale with browser width */

embed,
object,
audio,
video {
  max-width: 40%;
  height: auto;
}
/* Reset tables so tabular data only takes the space it needs */
table {
  border-collapse: collapse;
  border-spacing: 0;
}
td,
th {
  padding: 0;
  text-align: left;
}
th {
  font-weight: normal;
}
/* Remove default styling of buttons and inputs */
button,
input,
textarea,
select {
  -webkit-appearance: none;
  -moz-appearance: none;
  width: auto;
  height: auto;
  padding: 0;
  border: none;
  border-radius: 0;
  box-shadow: none;
  font-family: inherit;
  font-size: inherit;
  text-align: inherit;
  resize: none;
  background-color: transparent;
  background-image: none;
}
/* Remove clear and reveal buttons from inputs in IE */
input::-ms-clear,
input::-ms-reveal {
  display: none;
  width: 0;
  height: 0;
}
/* Remove scrollbars from textarea in IE to match other browsers */
textarea {
  overflow: auto;
}
/* Remove dropdown arrow from selects in IE */
select::-ms-expand {
  display: none;
}
/* Remove default styling for spinners in various inputs */
input[type=number] {
  -moz-appearance: textfield;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button,
input[type=date]::-webkit-inner-spin-button,
input[type=date]::-webkit-outer-spin-button,
input[type=date]::-webkit-clear-button,
input[type=month]::-webkit-inner-spin-button,
input[type=month]::-webkit-outer-spin-button,
input[type=month]::-webkit-clear-button,
input[type=week]::-webkit-inner-spin-button,
input[type=week]::-webkit-outer-spin-button,
input[type=week]::-webkit-clear-button,
input[type=datetime-local]::-webkit-inner-spin-button,
input[type=datetime-local]::-webkit-outer-spin-button,
input[type=datetime-local]::-webkit-clear-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type=date]::-webkit-calendar-picker-indicator,
input[type=month]::-webkit-calendar-picker-indicator,
input[type=week]::-webkit-calendar-picker-indicator,
input[type=datetime-local]::-webkit-calendar-picker-indicator {
  -webkit-appearance: none;
  display: none;
}
input[type='search']::-webkit-search-decoration,
input[type='search']::-webkit-search-cancel-button,
input[type='search']::-webkit-search-results-button,
input[type='search']::-webkit-search-results-decoration {
  display: none;
}
/* Remove default styling for meter elements */
meter {
  -webkit-appearance: none;
  -moz-appearance: none;
}
/* Remove default styling for progress elements */
progress {
  -webkit-appearance: none;
  -moz-appearance: none;
  border: none;
}
/* Remove default styling for range inputs */
input[type=range] {
  -webkit-appearance: none;
  background: transparent;
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
}
input[type=range]::-ms-track {
  border-color: transparent;
  color: transparent;
  background: transparent;
}
::-moz-progress-bar {
  -moz-appearance: none;
}
/* custom properties */
:root {
  /* structural variables */

  /* container variables */
  --max-container-width: 80rem;
  --container-horizontal-padding: 5vw;

  /* font variables */

  /* font family variables */
  --font-family-sans-serif: -apple-system, 'Roboto', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
  --font-family-serif: 'Roboto Slab', serif;
  --font-family-monospace: 'Roboto Mono', monospace;
  --base-font-family: -apple-system, 'Roboto', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
  --base-font-family: var(--font-family-sans-serif);

  /* unitless base font size variables in px */
  --unitless-min-font-size: 16;
  --unitless-max-font-size: 20;

  /* unitless viewport widths in px when min/max font sizes will apply */
  --unitless-lower-font-range: 460;
  --unitless-upper-font-range: 1200;

  /* base unitless line heights */
  --base-line-height: 1.4;
  --heading-line-height: 1.2;

  /* font sizes */
  --font-size-1: 2.75rem;
  --font-size-2: 2.25rem;
  --font-size-3: 1.75rem;
  --font-size-4: 1.5rem;
  --font-size-5: 1rem;
  --font-size-6: 0.875rem;
  --font-size-base: 1rem;
  --font-size-base: var(--font-size-5);
  --font-size-large: 1.5rem;
  --font-size-large: var(--font-size-4);
  --font-size-small: 0.875rem;
  --font-size-small: var(--font-size-6);

  /* font weights */
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* color variables */

  /*
  NOTE:
  currently, color() function requires actual color values, not custom properties
  eventually, this should use custom properties in color function to create additional values
   */

  /* gray palette */
  --gray-darkest: hsl(0, 0%, 5%);
  --gray-darker: hsl(0, 0%, 10%);
  --gray-dark: hsl(0, 0%, 25%);
  --gray: hsl(0, 0%, 50%);
  --gray-light: hsl(0, 0%, 75%);
  --gray-lighter: hsl(0, 0%, 90%);
  --gray-lightest: hsl(0, 0%, 95%);

  /* semantic palette */
  --color-primary: #0032a0;
  --color-success: #4caf50;
  --color-warning: #ff5722;
  --color-error: #f44336;

  /* applied colors */
  --text-color: hsl(0, 0%, 25%);
  --text-color: var(--gray-dark);
  --link-color: #0032a0;
  --link-color: var(--color-primary);
  --link-hover-color: rgb(0, 25, 80); /* eventually use custom property here */
  --link-active-color: rgb(0, 25, 80); /* eventually use custom property here */
  --page-background-color: white;
  --background-color: hsl(0, 0%, 95%);
  --background-color: var(--gray-lightest);
  --border-color: hsl(0, 0%, 75%);
  --border-color: var(--gray-light);
  --mark-color: #ffeb3b;
  --selection-color: #0ff;
  --disabled-color: hsl(0, 0%, 75%);
  --disabled-color: var(--gray-light);

  /* border-radius */
  --border-radius: 4px;

  /* transition variables */
  --speed: 0.1s;
  --easing: ease-out;
}
/* custom media queries */
/* eventually use custom property here */
/* utility classes */
/*
visually hides elements but keeps them accessible to screen readers
 */
/*
clears to reset space after floated elements
 */
/*
removes default styling from list
 */
.visually-hidden {
  clip: rect(0 0 0 0);
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  margin: -1px;
  padding: 0;
  border: 0;
  white-space: nowrap;
}
.list-unstyled {
  margin: 0;
  list-style: none;
}
/*
class to add carets to selects and dropdowns
 */
.caret {
  display: block;
  width: 0;
  height: 0;
  border-top: 0.45rem solid hsl(0, 0%, 25%);
  border-top: 0.45rem solid var(--text-color);
  border-right: 0.4rem solid transparent;
  border-left: 0.4rem solid transparent;
}
/* base styles */
/* container mixins */
/* wrapper div */
.container {
  max-width: 80rem;
  max-width: var(--max-container-width);
  margin: 0 auto;
  padding: 0 5vw;
  padding: 0 var(--container-horizontal-padding)
}
.container.is-fluid {
    max-width: none;
}
/* semantic elements */
article,
section,
nav {
  margin: 1rem 0;
}
/* horizontal rule */
hr {
  display: block;
  height: 1px;
  margin: 1rem 0;
  border: none;
  background-color: hsl(0, 0%, 75%);
  background-color: var(--border-color);
}
/* media/embeds */
figure,
figcaption,
audio,
video,
canvas,
meter,
progress,
iframe {
  display: block;
  width: 100%;
  max-width: 100%;
  margin-bottom: 1rem;
}
/* responsive typography utility variables */
:root {
  --font-size-difference: 4;
  --font-size-difference: calc(var(--unitless-max-font-size) - var(--unitless-min-font-size));
  --font-range-difference: 740;
  --font-range-difference: calc(var(--unitless-upper-font-range) - var(--unitless-lower-font-range));
  --viewport-difference: calc(100vw - 460px);
  --viewport-difference: calc(100vw - (var(--unitless-lower-font-range) * 1px));
}
html {
  /* font smoothing */
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;

  /* base font family */
  font-family: -apple-system, 'Roboto', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
  font-family: var(--base-font-family);

  /* responsive base font size */
  font-size: calc(16px + 4 * (100vw - 460px) / 740);
  font-size: calc((var(--unitless-min-font-size) * 1px) + var(--font-size-difference) * var(--viewport-difference) / var(--font-range-difference));

  /* base line height */
  line-height: 1.4;
  line-height: var(--base-line-height)

  /* set upper font range limit */
}
@media (min-width: 1200px) {
    html {
    font-size: 20px;
    font-size: calc(var(--unitless-max-font-size) * 1px);
    }
  }
/* heading line height */
h1,
h2,
h3,
h4,
h5,
h6 {
  margin-bottom: 1rem;
  line-height: 1.2;
  line-height: var(--heading-line-height);
}
/* heading sizes and spacing */
h1 {
  font-size: 2.75rem;
  font-size: var(--font-size-1);
}
h2 {
  font-size: 2.25rem;
  font-size: var(--font-size-2);
}
h3 {
  font-size: 1.75rem;
  font-size: var(--font-size-3);
}
h4 {
  font-size: 1.5rem;
  font-size: var(--font-size-4);
}
h5 {
  font-size: 1rem;
  font-size: var(--font-size-5);
}
h6 {
  font-size: 0.875rem;
  font-size: var(--font-size-6);
}
/* small font size */
small {
  font-size: 0.875rem;
  font-size: var(--font-size-small);
}
/* block spacing */
p,
dl,
ol,
ul,
blockquote,
pre,
table {
  margin-bottom: 1rem;
}
/* definition list styling */
dt {
  font-weight: 700;
  font-weight: var(--font-weight-bold);
}
/* abbreviation */
abbr[title] {
  border-bottom: dashed 1px currentcolor;
  text-decoration: none;
}
/* list spacing */
ol,
ul {
  margin-left: 1em;
}
/* unordered list bullets */
ul {
  list-style: disc;
}
/* blockquote */
blockquote p {
}
blockquote p::before {
    content: '\201c';
}
/* code formatting */
code,
kbd,
samp,
pre {
  font-family: 'Roboto Mono', monospace, monospace;
  font-family: var(--font-family-monospace), monospace;
  background-color: hsl(0, 0%, 95%);
  background-color: var(--background-color);
}
code,
kbd,
samp {
  padding: 0.25rem 0.5rem;
}
pre {
  overflow: auto;
  padding: 1rem;
}
/* applying color variables */
body {
  color: hsl(0, 0%, 25%);
  color: var(--text-color);
  background-color: white;
  background-color: var(--page-background-color);
}
a {
  text-decoration: none;
  color: #0032a0;
  color: var(--link-color);
  transition: color 0.1s ease-out;
  transition: color var(--speed) var(--easing);
  cursor: pointer
}
a:hover {
    color: rgb(0, 25, 80);
    color: var(--link-hover-color);
}
mark {
  background-color: #ffeb3b;
  background-color: var(--mark-color);
}
del {
  background-color: #f44336;
  background-color: var(--color-error);
}
ins {
  background-color: #4caf50;
  background-color: var(--color-success);
}
/* selections */
::-moz-selection {
  text-shadow: none !important;
  background-color: #0ff;
  background-color: var(--selection-color);
}
::selection {
  text-shadow: none !important;
  background-color: #0ff;
  background-color: var(--selection-color);
}
/* element styles */
/* table styling */
table {
  width: 100%
}
table caption {
    margin-bottom: 1rem;
    text-align: left;
    font-weight: 700;
    font-weight: var(--font-weight-bold);
}
th,
td {
  padding: 0.5em 0.75em;
  border: 0 solid hsl(0, 0%, 75%);
  border: 0 solid var(--border-color);
  border-bottom-width: 1px;
  text-align: left;
  vertical-align: top
}
th:first-child, td:first-child {
    padding-left: 0;
}
th {
  font-weight: 700;
  font-weight: var(--font-weight-bold);
}
thead {
}
thead td,
  thead th {
    border-bottom-width: 2px;
}
tfoot {
}
tfoot td,
  tfoot th {
    border-bottom-width: 2px;
}
tbody {
}
tbody tr:last-child {
}
tbody tr:last-child td,
    tbody tr:last-child th {
      border-bottom-width: 0;
}
/* button styling */
:root {
  --button-hover-color: rgb(162, 162, 162); /* eventually use custom property here */
}
button,
[role='button'],
input[type='submit'],
input[type='button'],
input[type='reset'] {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: auto;
  height: 2.5rem;
  padding: 0 0.75rem;
  border-radius: 4px;
  border-radius: var(--border-radius);
  outline: 0;
  text-decoration: none;
  white-space: nowrap;
  color: hsl(0, 0%, 25%);
  color: var(--text-color);
  background-color: hsl(0, 0%, 90%);
  background-color: var(--gray-lighter);
  transition: background-color 0.1s ease-out;
  transition: background-color var(--speed) var(--easing);
  cursor: pointer;
}
button:hover:not(:disabled), [role='button']:hover:not(:disabled), input[type='submit']:hover:not(:disabled), input[type='button']:hover:not(:disabled), input[type='reset']:hover:not(:disabled) {
    color: hsl(0, 0%, 25%);
    color: var(--text-color);
    background-color: rgb(162, 162, 162);
    background-color: var(--button-hover-color);
}
/* general form styling */
fieldset {
  margin-bottom: 1rem;
  padding: 0;
  border: 0
}
fieldset:not(:last-child) {
    margin-bottom: 1rem;
}
label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 700;
  font-weight: var(--font-weight-bold);
}
input,
select,
textarea {
  outline: 0;
}
/* text input styling */
input[type='text'],
input[type='password'],
input[type='url'],
input[type='email'],
input[type='tel'],
input[type='search'],
input[type='number'],
input[type='date'],
input[type='month'],
input[type='week'],
input[type='datetime-local'],
input[type='color'] {
  display: block;
  width: 100%;
  height: 2.5rem;
  padding: 0 0.75rem;
  border: 1px solid hsl(0, 0%, 75%);
  border: 1px solid var(--border-color);
  color: hsl(0, 0%, 25%);
  color: var(--text-color)
}
input[type='text']::-webkit-input-placeholder, input[type='password']::-webkit-input-placeholder, input[type='url']::-webkit-input-placeholder, input[type='email']::-webkit-input-placeholder, input[type='tel']::-webkit-input-placeholder, input[type='search']::-webkit-input-placeholder, input[type='number']::-webkit-input-placeholder, input[type='date']::-webkit-input-placeholder, input[type='month']::-webkit-input-placeholder, input[type='week']::-webkit-input-placeholder, input[type='datetime-local']::-webkit-input-placeholder, input[type='color']::-webkit-input-placeholder {
    color: hsl(0, 0%, 50%);
    color: var(--gray);
}
input[type='text']:-ms-input-placeholder, input[type='password']:-ms-input-placeholder, input[type='url']:-ms-input-placeholder, input[type='email']:-ms-input-placeholder, input[type='tel']:-ms-input-placeholder, input[type='search']:-ms-input-placeholder, input[type='number']:-ms-input-placeholder, input[type='date']:-ms-input-placeholder, input[type='month']:-ms-input-placeholder, input[type='week']:-ms-input-placeholder, input[type='datetime-local']:-ms-input-placeholder, input[type='color']:-ms-input-placeholder {
    color: hsl(0, 0%, 50%);
    color: var(--gray);
}
input[type='text']::placeholder, input[type='password']::placeholder, input[type='url']::placeholder, input[type='email']::placeholder, input[type='tel']::placeholder, input[type='search']::placeholder, input[type='number']::placeholder, input[type='date']::placeholder, input[type='month']::placeholder, input[type='week']::placeholder, input[type='datetime-local']::placeholder, input[type='color']::placeholder {
    color: hsl(0, 0%, 50%);
    color: var(--gray);
}
textarea {
  display: block;
  width: 100%;
  height: auto;
  padding: 0.5rem 0.75rem;
  border: 1px solid hsl(0, 0%, 75%);
  border: 1px solid var(--border-color);
  color: hsl(0, 0%, 25%);
  color: var(--text-color)
}
textarea::-webkit-input-placeholder {
    color: hsl(0, 0%, 50%);
    color: var(--gray);
}
textarea:-ms-input-placeholder {
    color: hsl(0, 0%, 50%);
    color: var(--gray);
}
textarea::placeholder {
    color: hsl(0, 0%, 50%);
    color: var(--gray);
}
/* select element styling */
select {
  display: block;
  position: relative;
  width: 100%;
  height: 2.5rem;
  padding: 0 0.75rem;
  border: 1px solid hsl(0, 0%, 75%);
  border: 1px solid var(--border-color);
  color: hsl(0, 0%, 25%);
  color: var(--text-color);
  background-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20width%3D%2230px%22%20height%3D%2216px%22%20viewBox%3D%220%200%2030%2016%22%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%3E%0A%20%20%20%20%3Cg%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%20%20%20%20%3Cg%20transform%3D%22translate%28-137.000000%2C%20-145.000000%29%22%20fill%3D%22%23000000%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20points%3D%22152%20161%20137%20145%20167%20145%22%3E%3C/polygon%3E%0A%20%20%20%20%20%20%20%20%3C/g%3E%0A%20%20%20%20%3C/g%3E%0A%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 0.75rem
}
select:focus {
    border: 1px solid #0032a0;
    border: 1px solid var(--color-primary);
}
/* checkbox styling */
.checkbox {
  position: relative
}
.checkbox label {
    position: relative;
    padding: 0 2rem;
    font-weight: 400;
    font-weight: var(--font-weight-normal);
    cursor: pointer;
}
.checkbox input[type='checkbox'] {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  opacity: 0;
  pointer-events: none
}
.checkbox input[type='checkbox']:focus + label::before {
    background-color: hsl(0, 0%, 75%);
    background-color: var(--gray-light);
}
/* radio button styling */
.radio {
  position: relative
}
.radio label {
    position: relative;
    padding: 0 2rem;
    font-weight: 400;
    font-weight: var(--font-weight-normal);
    cursor: pointer;
}
.radio input[type='radio'] {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  opacity: 0
}
.radio input[type='radio']:focus + label::before {
    background-color: hsl(0, 0%, 75%);
    background-color: var(--gray-light);
}
/* meter element styling – currently only works in Webkit browsers and Firefox */
meter {
  -webkit-appearance: meter;
  width: 100%;
  background: hsl(0, 0%, 90%);
  background: var(--gray-lighter)
}
meter::-webkit-meter-bar {
    background: hsl(0, 0%, 90%);
    background: var(--gray-lighter);
}
/* progress element styling */
progress {
}
progress[value] {
    width: 100%;
    height: 1rem;
}
/* range input styling */
/* range input utility variables */
:root {
  --range-input-thumb-width: 24px;
  --range-input-thumb-height: 24px;
  --range-input-thumb-border-radius: 50%;
  --range-input-thumb-background: hsl(0, 0%, 50%);
  --range-input-thumb-background: var(--gray);
  --range-input-track-width: 100%;
  --range-input-track-height: 10px;
  --range-input-track-background: hsl(0, 0%, 90%);
  --range-input-track-background: var(--gray-lighter);
  --range-input-track-focus-background: hsl(0, 0%, 75%);
  --range-input-track-focus-background: var(--gray-light);
}
input[type=range] {
  width: 100%;
}
input[type=range]::-webkit-slider-thumb {
  width: 24px;
  width: var(--range-input-thumb-width);
  height: 24px;
  height: var(--range-input-thumb-height);
  margin-top: -7px;
  border-color: transparent;
  border-radius: 50%;
  border-radius: var(--range-input-thumb-border-radius);
  background-color: hsl(0, 0%, 50%);
  background-color: var(--range-input-thumb-background);
  cursor: pointer;
}
input[type=range]:focus::-webkit-slider-runnable-track {
  background-color: hsl(0, 0%, 75%);
  background-color: var(--range-input-track-focus-background);
}
input[type=range]::-moz-range-thumb {
  width: 24px;
  width: var(--range-input-thumb-width);
  height: 24px;
  height: var(--range-input-thumb-height);
  border-color: transparent;
  border-radius: 50%;
  border-radius: var(--range-input-thumb-border-radius);
  background-color: hsl(0, 0%, 50%);
  background-color: var(--range-input-thumb-background);
  cursor: pointer;
}
input[type=range]::-ms-thumb {
  width: 24px;
  width: var(--range-input-thumb-width);
  height: 24px;
  height: var(--range-input-thumb-height);
  border-color: transparent;
  border-radius: 50%;
  border-radius: var(--range-input-thumb-border-radius);
  background-color: hsl(0, 0%, 50%);
  background-color: var(--range-input-thumb-background);
  cursor: pointer;
}
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  width: var(--range-input-track-width);
  height: 10px;
  height: var(--range-input-track-height);
  background-color: hsl(0, 0%, 90%);
  background-color: var(--range-input-track-background);
  transition: background-color 0.1s ease-out;
  transition: background-color var(--speed) var(--easing);
  cursor: pointer;
}
input[type=range]::-moz-range-track {
  width: 100%;
  width: var(--range-input-track-width);
  height: 10px;
  height: var(--range-input-track-height);
  background-color: hsl(0, 0%, 90%);
  background-color: var(--range-input-track-background);
  transition: background-color 0.1s ease-out;
  transition: background-color var(--speed) var(--easing);
  cursor: pointer;
}
input[type=range]:focus::-moz-range-track {
  background-color: hsl(0, 0%, 75%);
  background-color: var(--range-input-track-focus-background);
}
input[type=range]::-ms-track {
  width: 100%;
  width: var(--range-input-track-width);
  height: 10px;
  height: var(--range-input-track-height);
  border-width: 24px;
  border-width: var(--range-input-thumb-height);
  border-color: transparent;
  color: transparent;
  background-color: transparent;
  transition: background-color 0.1s ease-out;
  transition: background-color var(--speed) var(--easing);
  cursor: pointer;
}
input[type=range]::-ms-fill-lower {
  background-color: hsl(0, 0%, 90%);
  background-color: var(--range-input-track-background);
}
input[type=range]:focus::-ms-fill-lower {
  background-color: hsl(0, 0%, 75%);
  background-color: var(--range-input-track-focus-background);
}
input[type=range]::-ms-fill-upper {
  background-color: hsl(0, 0%, 90%);
  background-color: var(--range-input-track-background);
}
input[type=range]:focus::-ms-fill-upper {
  background-color: hsl(0, 0%, 75%);
  background-color: var(--range-input-track-focus-background);
}
/* file input styling */
input[type='file'] {
  clip: rect(0 0 0 0);
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  margin: -1px;
  padding: 0;
  border: 0;
  white-space: nowrap;
}
input[type='file'] + label {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: auto;
  height: 2.5rem;
  padding: 0 0.75rem;
  border-radius: 4px;
  border-radius: var(--border-radius);
  outline: 0;
  text-decoration: none;
  white-space: nowrap;
  color: hsl(0, 0%, 25%);
  color: var(--text-color);
  background-color: hsl(0, 0%, 90%);
  background-color: var(--gray-lighter);
  transition: background-color 0.1s ease-out;
  transition: background-color var(--speed) var(--easing);
  cursor: pointer;
  font-weight: normal;
}
input[type='file'] + label:hover:not(:disabled) {
    color: hsl(0, 0%, 25%);
    color: var(--text-color);
    background-color: rgb(162, 162, 162);
    background-color: var(--button-hover-color);
}
/* color input styling */
input[type='color'] {
  width: 2.5rem;
  padding: 0
}
input[type='color']::-webkit-color-swatch-wrapper {
    padding: 0;
}

body, html {
  height: 100%;
  margin: 0;
}

.bg {
  /* The image used */
  background-image: url("circle.png");

  /* Full height */
  height: 100%; 

  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

:root {
            --color-primary: #2eec96;
            --selection-color: #abffd9;
            --unitless-max-font-size: 18;
        }

        body {
            padding: 2rem 1rem;
            background-color: #FFFFFF;
        }

        form {
            max-width: 30rem;
            margin: 0 auto;
            padding: 1.5rem 2rem;
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
        }

        form h1 {
            margin-bottom: 1.5rem;
            padding-bottom: 1rem;
            border-bottom: 1px solid var(--gray-lighter);
            font-size: var(--font-size-3);
            text-align: center;
        }

        input {
            background-repeat: no-repeat;
            background-position: right 1rem center;
            background-size: 0.75rem;
        }

        .help-text {
            display: block;
            margin-top: 0.5rem;
            font-size: var(--font-size-small);
        }

        input:placeholder-shown + label {
            opacity: 0;
            transform: translateY(1rem);
        }

        .has-dynamic-label {
            position: relative;
            padding-top: 1.5rem;
        }

        .has-dynamic-label label {
            position: absolute;
            top: 0;
            font-size: var(--font-size-small);
            opacity: 1;
            transform: translateY(0);
            transition: all 0.2s ease-out;
        }

        input:required + .help-text::before {
            content: '*Required';
        }

        input:optional + .help-text::before {
            content: '*Optional';
        }

        input:read-only {
            border-color: var(--gray-lighter) !important;
            color: var(--gray);
            cursor: not-allowed;
        }

        input:valid {
            border-color: var(--color-primary);
            background-image: url("data:image/svg+xml,%3Csvg width='45px' height='34px' viewBox='0 0 45 34' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate%28-56.000000, -59.000000%29' fill='%232EEC96'%3E%3Cpolygon points='70.1468531 85.8671329 97.013986 59 100.58042 62.5664336 70.1468531 93 56 78.8531469 59.5664336 75.2867133'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A");
        }

        input:invalid {
            border-color: var(--color-error);
            background-image: url("data:image/svg+xml,%3Csvg width='30px' height='30px' viewBox='0 0 30 30' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate%28-128.000000, -59.000000%29' fill='%23F44336'%3E%3Cpolygon points='157.848404 61.9920213 145.980053 73.8603723 157.848404 85.7287234 154.856383 88.7207447 142.988032 76.8523936 131.119681 88.7207447 128.12766 85.7287234 139.996011 73.8603723 128.12766 61.9920213 131.119681 59 142.988032 70.8683511 154.856383 59'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A");
        }

        input:invalid:focus {
            border-color: var(--color-error);
        }

        input:invalid + .help-text {
            color: var(--color-error);
        }

        input[type='email']:invalid + .help-text::before {
            content: 'You must enter a valid email.'
        }

        input:out-of-range + .help-text::before {
            content: 'Out of range';
        }

        input[type='checkbox'] + label {
            user-select: none;
        }