/* $dark-background: #444; */
p {
  line-height: 1.5em; }

input, select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none; }

input[type=submit],
input[type=reset],
button[tpye=button] {
  background: transparent;
  border-radius: 0;
  background: #f1592a;
  color: black; }

html {
  font-size: 1.25em;
  font-family: sans-serif;
  line-height: 1.5em; }

fieldset {
  border: 1px solid; }

label {
  padding: .5em; }

input, textarea {
  padding: .5em;
  font-family: monospace;
  font-size: inherit; }

textarea {
  line-height: 1.5em;
  min-height: 8em;
  max-width: 100%; }

dt {
  font-weight: bold; }

hr {
  display: none; }

@media print {
  html {
    font-size: 11pt; } }

/* $dark-background: #444; */
.passed {
  color: green; }

.failed {
  color: red; }

li.failed, li.passed {
  position: relative;
  list-style: none; }
  li.failed::before, li.passed::before {
    position: absolute;
    left: -1em;
    top: 0; }

li.failed::before {
  content: "\2718"; }

li.passed::before {
  content: "\2714"; }

/* This is the colors */
html {
  color: black;
  background: #E6E6E6;
  transition: background-color 0.5s ease; }

body > *#main-nav {
  background: #DDD; }

fieldset {
  border-color: black; }

input, textarea {
  font-size: inherit;
  border-color: black;
  background: rgba(0, 0, 0, 0.03);
  color: inherit;
  transition: opacity 0.25s ease; }
  input:disabled, textarea:disabled {
    opacity: 0.5; }
  input::placeholder, textarea::placeholder {
    color: #888; }

.error input, .error textarea {
  border-color: red; }

footer {
  background: transparent; }
  footer a, footer a:visited {
    color: inherit;
    text-decoration: none; }
    footer a:hover, footer a:visited:hover {
      text-decoration: underline; }

.what {
  color: #888; }

form input:focus, form select:focus, form textarea:focus {
  outline: none;
  background-image: radial-gradient(ellipse at bottom left, rgba(0, 0, 0, 0.075), transparent 50%), radial-gradient(ellipse at bottom right, rgba(0, 0, 0, 0.05), transparent 25%); }

form textarea:focus {
  background-image: radial-gradient(ellipse at bottom left, rgba(0, 0, 0, 0.075), transparent 50%), radial-gradient(ellipse at bottom right, rgba(0, 0, 0, 0.05), transparent 25%), radial-gradient(ellipse at top left, rgba(0, 0, 0, 0.05), transparent 25%), radial-gradient(ellipse at top right, rgba(0, 0, 0, 0.05), transparent 25%); }

@media (prefers-color-scheme: dark) {
  html > * {
    color: #CCC; }
  body > * {
    background: #333; }
    body > *#main-nav {
      background: #262626; }
  body > footer {
    background: transparent; }
  main {
    background: #333; }
  #main-nav {
    background: rgba(0, 0, 0, 0.25); }
  .what {
    color: #888; } }

@media (prefers-color-scheme: dark) {
  html {
    background: #333; }
  input, textarea {
    background: rgba(255, 255, 255, 0.03); }
  input, textarea, fieldset {
    border-color: #FFF; } }

ul.nav-menu {
  --breakpoint: 600px;
  box-sizing: border-box;
  list-style-type: none;
  margin: 0;
  padding: 0; }
  ul.nav-menu li {
    box-sizing: border-box;
    display: block;
    margin: 0;
    padding: 0;
    border-top: 1px solid; }
    ul.nav-menu li:first-child {
      border-top: none; }
    ul.nav-menu li a {
      box-sizing: border-box;
      text-decoration: none;
      display: block;
      margin: 0;
      vertical-align: center;
      padding: 0.5em 1em; }
      ul.nav-menu li a > * {
        max-height: 100%; }
  @media (min-width: 600px) {
    ul.nav-menu {
      display: flex; }
      ul.nav-menu .disclose-button {
        display: none; }
      ul.nav-menu > li {
        border-top: none; } }

/*
.nav-home {
  pointer-events: none;
}
*/
@font-face {
  font-family: lexendExa;
  src: url("/fonts/Lexend_Exa/LexendExa-Regular.ttf"); }

/*
input[type=tel]{
  width: 9em;
}
*/
/*
.info {
  background: #ECC;
  padding: 1em;
  border: 1px solid black;
  box-shadow: 0 3px 3px rgba(0,0,0,.25);
}
*/
h1 {
  font-family: lexendExa; }

a {
  color: #f1592a; }
  a:visited {
    color: #f1592a; }

fieldset {
  border: none;
  border-top: 1px solid;
  padding: 0 0 1em 0;
  margin: 1em 0 0 0; }
  fieldset legend {
    text-align: center; }

input[type=submit],
input[type=reset],
input[type=button],
button[type=button],
button[type=submit] {
  border-radius: .5em;
  padding: .5em 1em;
  border: 1px solid;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.25); }

html {
  font-family: sans-serif;
  margin: 0;
  padding: 0; }

object {
  max-height: 100%;
  max-width: 100%; }

body {
  margin: 0;
  padding: 0;
  min-height: 100vh; }

main {
  padding: 1em;
  padding-top: 3em;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto; }

footer {
  padding: 1em; }

.error label {
  color: red; }

#hobbies {
  border: 1px solid #CCC;
  background: #EEE;
  padding: 1em; }

.portrait {
  border: 1px solid black;
  width: 100px;
  border-radius: 50px;
  float: left;
  margin: 0 .5em .5em 0; }

#technologies {
  color: #FFF;
  padding: 1em;
  margin: 0 -1em; }

.skip-nav {
  display: none; }

.page-title {
  font-weight: normal;
  line-height: 1em;
  /* font-size: 10vw; */
  font-size: 7vw; }

#main-nav {
  width: 100%;
  font-size: 1.5em;
  border-bottom: 1px solid #f1592a; }

ul.nav-menu > li a {
  height: 2em;
  color: inherit; }

#covid-19-note {
  background: #f1592a;
  font-size: larger;
  color: white;
  padding: 1em;
  margin: 1em 0;
  border-radius: 1em;
  box-shadow: 0 0.5em 1em rgba(0, 0, 0, 0.5); }
  #covid-19-note a {
    color: #EEE; }
    #covid-19-note a:visited {
      color: white; }

form > div, form div.form-field, form fieldset > div {
  position: relative;
  margin: 1em 0;
  display: grid;
  grid-template-columns: 1em 1fr 1em;
  grid-template-areas: ". label . " ". field . " ". description . " ". errors . ";
  border-left: .25em solid transparent; }
  form > div label, form div.form-field label, form fieldset > div label {
    grid-area: label;
    margin-bottom: -.25em; }
  form > div input, form > div textarea, form div.form-field input, form div.form-field textarea, form fieldset > div input, form fieldset > div textarea {
    margin: 0;
    border-radius: 0;
    grid-area: field;
    border-width: 0;
    border-left: .25rem solid gray; }
  form > div .errors, form div.form-field .errors, form fieldset > div .errors {
    background: red;
    grid-area: errors; }
  form > div .description, form div.form-field .description, form fieldset > div .description {
    grid-area: description;
    margin-top: .5em; }
  form > div summary, form div.form-field summary, form fieldset > div summary {
    color: gray; }
  @media (min-width: 600px) {
    form > div, form div.form-field, form fieldset > div {
      grid-template-columns: 1em 1fr 1em 3fr 1em;
      grid-template-areas: ". errors errors errors . " ". label . field . " ". . description description description"; }
      form > div label, form div.form-field label, form fieldset > div label {
        text-align: right; } }

@media (prefers-color-schehe: dark) {
  a {
    color: #f1592a; }
    a:visited {
      color: #f1592a; } }

@media (min-width: 1024px) {
  .page-title {
    font-size: 71px; } }