html {
  background-image: url('/backgrounds/background-design-code-01.jpg');
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-clip: padding-box;
  padding: 0;
  padding-top: 24vh;
  padding-top: max(98pt, 24vh);
}

img#profile {
  max-width: 128pt;
  position: absolute;
  top: 2pt;
  top: max(2pt, calc(24vh - 96pt));
  left: 24pt;
  border-radius: 3pt;
}

body {
  min-height: 60vh;
  margin: 40px auto;
  max-width: 680px;
  line-height: 1.6;
  font-size: 18px;
  font-family: sans-serif;
  padding: 2pt 9pt;
  padding-bottom: 300pt;
  padding-bottom: 80vh;
  text-align: left;
  margin: 0 8pt;
  border-radius: 3pt;
}

h1, h2, h3, p {
  margin: 2pt 0;
  line-height: 1.2;
}

p {
  margin: 16pt 0; /* text-indent: 1em; TODO */
}

a:link {
  color: #268bd2;
}

a:visited {
  color: #2aa198;
}

a:hover {
  color: #209090;
}

a:active {
  color: #209090;
}

img {
  max-width: 680px;
}

/** Not theme-specific, but corrections for browser defaults I dislike */
html::-webkit-scrollbar, body::-webkit-scrollbar {
  display: none; /* Chrome, Safari and Opera */
}

html, body {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}

/** Theme-specific stuff, we repeat the light style for old devices which error on @media queries */
html, body {
  background-color: #fefefe;
  color: #1f1f1f;
}

@media (prefers-color-scheme:light) {
  html, body {
    background-color: #fdf6e3;
    color: #586e75;
  }

}

@media (prefers-color-scheme:dark) {
  html, body {
    background-color: #002b36;
    color: #586e75;
  }

}

/** 3rd party style/integration stuff (not relevant for all pages) */
#ace_editor {
  min-width: 620px;
  min-height: 380px;
}

.ace_scrollbar {
  display: none !important;
}