@charset "UTF-8";
@import url("https://fonts.googleapis.com/css?family=Raleway:100,200,400,700|Open+Sans:100,300,400");
/* material colors */
/* dark mode */
/* light mode */
html, body {
  font-size: 8px;
  margin: 0; }

html {
  background-color: #0097A7; }

body {
  background-color: #FFFFFF;
  font-family: "Open Sans", Arial, sans-serif;
  color: #424242;
  min-height: 100vh;
  /* body should use 100% containing element height */
  display: flex;
  flex-direction: column; }
  body a {
    color: #616161; }
  body p a:hover {
    color: #10b1c6; }

h1.logo-type {
  font-family: "Raleway", sans-serif;
  font-weight: 200;
  align-self: baseline;
  margin-left: 16px; }
  h1.logo-type a {
    color: #424242;
    text-decoration: none; }
  @media (max-width: 600px) {
    h1.logo-type {
      font-size: 24px; } }
  @media (min-width: 601px) {
    h1.logo-type {
      font-size: 32px; } }

h2 {
  font-size: 24px; }

p {
  font-size: 16px; }

p.hero {
  margin-top: 24px;
  font-size: 48px; }

img#logo {
  width: 32px;
  display: inline-block;
  align-self: center; }
  @media (min-width: 601px) {
    img#logo {
      width: 48px; } }

#darkmode [data-prefix="fas"] {
  display: none; }

#darkmode [data-prefix="far"] {
  display: block; }

#header {
  width: 100%;
  align-items: center; }

ul.horizontal-list {
  list-style-type: none;
  /* Remove bullets */
  padding: 0;
  /* Remove padding */ }
  ul.horizontal-list li {
    display: inline-flex;
    margin-inline-end: 16px; }
  ul.horizontal-list li:first-child {
    margin-inline-start: 0; }

ul#header-buttons {
  /* relative to flex display of containing elem */
  margin-left: auto;
  /* align to right of box */
  /* also a flexbox! */
  display: flex;
  align-items: center; }
  ul#header-buttons button {
    all: unset;
    cursor: pointer;
    width: 24px;
    height: 24px;
    font-size: 24px;
    border: 4px solid transparent; }

#content {
  margin: 1em auto 0;
  max-width: 600px;
  flex: 1 0 auto; }

ul#links {
  margin-bottom: 2em; }
  ul#links li {
    font-size: 48px;
    line-height: 1.6em;
    font-family: "Raleway";
    align-self: baseline; }
    ul#links li a:hover {
      color: #10b1c6; }

footer {
  flex-shrink: 0; }

#footer-background {
  background-color: #0097A7; }
  #footer-background ul li {
    padding-top: 8px;
    padding-bottom: 16px;
    color: #FFFFFF;
    font-size: 16px;
    font-weight: 100; }
  #footer-background a {
    color: #FFFFFF; }
  #footer-background a:hover {
    color: #81D4FA; }

/* Classes */
.content-width {
  width: 100%;
  max-width: 600px;
  padding: 8px !important; }

.center {
  margin: 0 auto; }

.flex {
  /* https://www.smashingmagazine.com/2013/05/centering-elements-with-flexbox/ */
  display: -webkit-box;
  /* OLD: Safari, iOS, Android browser, older WebKit browsers.  */
  display: -moz-box;
  /* OLD: Firefox (buggy) */
  display: -ms-flexbox;
  /* MID: IE 10 */
  display: -webkit-flex;
  /* NEW, Chrome 21–28, Safari 6.1+ */
  display: flex; }

/* Dark theme */
html.dark {
  background-color: #3d525c; }
  html.dark body {
    background-color: #021027;
    color: #B0BEC5; }
  html.dark #darkmode {
    color: #FFFFFF; }
    html.dark #darkmode [data-prefix="fas"] {
      display: block; }
    html.dark #darkmode [data-prefix="far"] {
      display: none; }
  html.dark a {
    color: #90A4AE; }
  html.dark a:hover {
    color: #0097A7; }
  html.dark h1.logo-type a {
    color: #B0BEC5; }
  html.dark ul#links a {
    color: #90A4AE; }
  html.dark ul#links .svg-inline--fa:hover {
    color: #0097A7; }
  html.dark #footer-background {
    background-color: #3d525c; }
    html.dark #footer-background ul li {
      color: #CFD8DC; }
      html.dark #footer-background ul li a {
        color: #CFD8DC; }
      html.dark #footer-background ul li a:hover {
        color: #B0BEC5; }

@media (max-width: 600px) {
  /* Inserting this collapsed row between two flex items will make 
    * the flex item that comes after it break to a new row 
    * https://tobiasahlin.com/blog/flexbox-break-to-new-row/ */
  #nav-break {
    flex-basis: 100%;
    height: 0; } }