/* Eric Meyer's CSS Reset */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

html[data-theme=light] {
  --theme-primary:   #3EB5E5;
  --theme-secondary: #F99E20;
  --theme-light1:    #ffffff;
  --theme-light2:    #f6f6f6;
  --theme-gray1:     #e9e9e9;
  --theme-gray2:     #e0e0e0;
  --theme-gray3:     #c3c3c3;
  --theme-gray4:     #bababa;
  --theme-gray5:     #8f8f8f;
  --theme-gray6:     #353535;
  --theme-dark:      #000;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

html, body {
  position: relative;
  width: 100%;
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
}

html, body, select, button, input {
  font-family: 'Roboto', 'Verdana', 'Arial', 'Helvetica', sans-serif;
  font-size: 16px;
}

h1 {
  font-size: 30px;
  font-weight: bold;
  white-space: nowrap;
}

h2 {
  font-size: 23px;
  font-weight: bold;
}

h3 {
  font-size: 20px;
  font-weight: bold;
}

small {
  font-size: 12px;
}

.left {
  float: left;
}

.right {
  float: right;
}

.leftAlign {
  text-align: left;
}

.marginLeft {
  margin-left: .75em;
}

.marginTop {
  margin-top: .75em;
}

a {
  text-decoration: none;
  color: var(--theme-primary);
}

p {
  line-height: 1.5em;
}

select {
  border-color: var(--theme-primary);
  border-radius: 6px;
  border-style: solid;
  border-width: 1px;
  color: var(--theme-primary);
  font-weight: bold;
}

select:focus {
  outline: none;
}

select, button:enabled {
  cursor: pointer;
}

div.overlay {
  display: block;
  position: fixed;
  height: 100vh;
  width: 100vw;
  background-color: rgba(0, 0, 0, 0.45);
  left: 0;
  top: 0;
  z-index: 100;
}

div.overlay > div {
  position: absolute;
  background-color: rgba(255, 255, 255, 1);
  padding: 1em;
}