/* Base styling: */
* {
  box-sizing: border-box;
}
html {
  background-color: #e1e3e8;
  height: 100%;
  color: #333;
  font-family: sans-serif;
  font-size: 20px;
  line-height: 1.4;
}
body {
  margin: 0;
  height: 100%;
  display: flex;
  flex-direction: column
}
/* Center the contents of the body with a defined width: */
.center-col {
  width: 900px;
  max-width: 100%;
  margin: auto;
  position: relative;
}
@media (max-width: 900px) {
  /* Shrink with the window if it gets narrow: */
  .center-col {
    width: 100%;
  }
}
main {
  flex-grow: 1;
  padding: 20px;
  background-color: hsla(240, 30%, 98%, 1);
  box-shadow: 0 0 20px 5px rgba(0, 0, 0, 0.3);
}
main > * {
  margin: 10px 0;
}
main > *:first-child {
  margin-top: 0;
}
main > *:last-child {
  margin-bottom: 0;
}
main h2 {
  color: black;
}

/* Header and footer styling: */
header, footer {
  position: relative; /* So that they are not overlayed by the main section */
  z-index: 2;
  width: 100%;
  color: #eeeef3;
  padding: 0.5em 0;
  background-color: hsla(153, 51%, 18%, 1);
}
header #header-content, footer #footer-content{
  padding: 0 20px;
}
header #header-content > *, footer #footer-content > * {
  margin-top: 0;
  margin-bottom: 0;
}
#app-info {
  font-size: 16px;
}

/* Header-specific styling: */
header {
  border-bottom: 3px solid rgba(255,255,255,0.25);
}
#header-content h1{
  color: white;
}
#header-content {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
}
#header-content > * {
  margin-right: 20px;
}
#header-content > *:last-child {
  margin-right: 0;
}
/* Footer-specific styling: */
footer {
  text-align: right;
  border-top: 3px solid rgba(255,255,255,0.25);
}

/* Link Styling: */
header a, footer a {
  color: #9e9eff; /* Light lavender color */
}
a:hover {
  color: inherit;
}

kbd {
  border: 1px solid darkGray;
  border-radius: 0.2em;
  padding: 0px 0.1em;
  margin: -1px 0;
  background-color: #ebebee;
}

code {
  background-color: #e4e4ec;
}

pre.code-block {
  display: flex;
}
pre.code-block code {
  border: 1px solid #999;
  box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.3);
  background-color: #dddde2;
  padding: 5px;
  overflow: auto;
  max-height: 500px;
  min-width: 200px;
  min-height: 2em;
  margin: 0;
  tab-size: 2;
}

/* Button Styling: */
.inline-button {
  font-size: 1em;
  border: 2px solid hsla(153, 51%, 18%, 1);
  color: hsla(153, 51%, 18%, 1);
  background-color: transparent;
  box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.3);
  transition: all .1s;
  cursor: pointer;
}
.inline-button:active {
  box-shadow: none;
}
.inline-button:hover, .inline-button:focus {
  background-color: hsla(153, 51%, 18%, 0.1);
}

/* Image Styling: */
img {
  max-width: 100%;
}
img.click-to-open {
  border: 1px solid blue;
}
a.img-wrapper {
  line-height: 0;
  display: table;
  margin-left: auto;
  margin-right: auto;
}

figure {
  border: 1px solid #999;
  padding: 10px;
  display: table;
  margin: 10px auto;
  text-align: center;
  background: rgba(0, 0, 0, 0.05);
  box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.3);
}
figure > * {
  margin-bottom: 0.5em;
}
figure > *:last-child {
  margin-bottom: 0;
}
figcaption {
  font-size: 0.9em;
}

/* Nested List Styling: */
li {
  margin: 10px 0;
}
li > p {
  margin: 10px 0;
}
ol ol li {
  list-style-type: lower-alpha;
  font-size: 0.9em;
}
ol ol ol li {
  list-style-type: disc;
}

/* Anchor and anchor-link styling: */

/* Headers need a little margin to fit the link icon: */
h2.anchor-point {
  margin-left: 0.5em;
}

/* Highlighting anchors: */
/* The target element's header should be highlighted somehow: */
h2.anchor-point:target {
  text-decoration: underline;
}
.anchor-point:target .item-header {
  text-decoration: underline;
}

/* These will be positioned relative to the center-col, because that is the
 * first positioned ancestor: */
.self-anchor-link {
  display: block;
  position: absolute;
  font-size: 0.7em;
  left: 4px;
  margin-top: 5px;
  text-decoration: none;
  user-select: none;
}
*:hover > .self-anchor-link, *:target > .self-anchor-link {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

/* For labels which are issues, give them clear markings: */
li.issue-label::before, li.warning-label::before {
  content: "!!";
  position: absolute;
  font-weight: bold;
  background-color: #f44;
  border-radius: 50%;
  padding: 3.5px;
  color: white;
  width: 1em;
  height: 1em;
  line-height: 1;
  font-size: 0.8em;
  display: inline-block;
  text-align: center;
  margin-left: -1.7em;
  margin-top: 0.2em;
}
li.warning-label::before {
  content: "!";
  background-color: #db1;
}

/* Multi-column list styling */
ul.multi-col-list {
  column-gap: 2em;
  column-width: 5em;
}
ul.multi-col-list > :first-child {
  margin-top: 0;
}