html {
  --color-background: #fff;
  --color-text: #405060; 
  --color-footer-text: #bbb;
  --social-link-color: #bbb;
  --social-link-color-hover: #fff;
  --color-link: #2f3fe8;
  --color-link-hover: #161f87;
  --social-link-color-hover: #fff;
  --color-cta-background: #ecf3ff;
  --color-cta-link-hover: #161f87;
  --color-cta-link-color: #fff;

  --button-border-radius: 4px;

  --button-skill-color: var(--color-text);
  --color-button-skill-background: #eee;
  --color-button-skill-border: #ccc;

  --color-hint-border: #2f3fe8;
}

@media (prefers-color-scheme: dark) {
  html {
    --color-background: #232323;
    --color-text: rgb(170,170,170)  ;
    --color-footer-text: #bbb;
    --social-link-color: #bbb;
    --social-link-color-hover: #fff;
    --color-link: #53a7f6;
    --color-link-hover: #72ceef;
    --color-cta-background: #141414;
    --color-cta-link-hover: #9dcfff;
    --color-cta-link-color: #fff;
  
    --button-skill-color: #ccc;
    --color-button-skill-background: #333;
    --color-button-skill-border: #999;
    
    --color-hint-border: #53a7f6;
  }
}
.hidden {
  display: none !important;
}
* {
  padding: 0;
  margin: 0;
}
address {
  font-style: normal;
}
.marginBottom {
  margin-bottom: 30px;
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 100;
  src: url(/fonts/roboto-100.woff2) format('woff2');
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: url(/fonts/roboto-300.woff2) format('woff2');
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url(/fonts/roboto-400.woff2) format('woff2');
}

.page-title,
h1,
h2,
h3,
h4 {
  font-weight: 100;
  font-family: "Roboto", Open Sans;
}

h1 {
  margin: 70px 0 0px;
  font-size: 275%;
}

h3 {
  font-weight: 200;
  font-size: 150%;
  padding-top: 0px;
  padding-bottom: 10px;
}
h3.sub {
  font-size: 175%;
}

p {
  margin-top: 13px;
  line-height: 1.7em;
}
label {
  margin-right: 5px;
}

a {
  color: var(--color-link);
  text-decoration: none;
  transition: all linear 200ms;
}
a:hover,
a:focus {
  color: var(--color-link-hover);
}

body {
  background: var(--color-background);
}
body,
input,
textarea,
td {
  color: var(--color-text);
  font-family: "Roboto", Open Sans, sans-serif;
  font-weight: 300;
  font-size: 1em;
  line-height: 1.5;
}
ul {
  padding: 5px 0 5px 20px;
}
section {
  min-width: 320px;
  width: 100%;
  margin: 0 auto;
  max-width: 800px;
}

.node {
  padding: 10px 0 40px;
  background: var(--color-background);
}
.node-inner {
  padding: 10px;
}