:root {
  --bg-color: white;
}

body {
  width: calc(100vw -1px);
  padding: 0 0 4em 2em;
  margin: 0;
  border: 0;

  font-family: 'Montserrat', 'montserrat', 'Source Sans', 'Helvetica Neue', Helvetica, 'Arial Black', Arial, sans-serif;
}

body>p {
  padding-top: 2em;
}

body>p img {
  float: left;
  padding-right: 1em;
  padding-bottom: 3em;
}

section {
  margin-top: 2em;
  padding: 2em;
  border: 2px solid #ccc;
  border-radius: .5em;
  max-width: 74em;
}

body>section {
  padding-left: 5rem;
}

body>section>section {
  padding-left: 5rem;
  margin-left: -2rem;
  margin-top: 2rem;
}

/* animate visibility change of child sections */
section>.btn-collapse {
  float: right;
}

/* room below each section's header */
section>h1+*,
section>h2+*,
section>h3+*,
section>h4+*,
section>h5+*,
section>h6+* {
  margin-top: 2em;
}

h1,
h2,
h3 {
  font-weight: bold;
}

h1 {
  font-size: 2.25rem;
}

img.big {
  padding: 1em;
  border: 1px solid lightgray;
  border-radius: .125em;
  z-index: 10 !important;
}

img.full-page {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: width 300ms ease-in-out, height 300ms ease-in-out;

  height: auto !important;
  width: auto !important;
  max-width: calc(100% - 2em - 8px);
  max-height: calc(100% - 2em - 8px);
  /* min-width: calc(min(auto, 100% - 2em - 8px)) !important; */
  /* min-height: calc(min(auto, 100% - 2em - 8px)) !important; */

  border: 4px solid black;
  border-radius: .5em;
  background: var(--bg-color);
  box-shadow: 0 0 15em #000;

  z-index: 10 !important;
}

p,
ul,
pre,
code {
  max-width: 54em;
}

ul {
  list-style-type: none;
  /* remove the last item markers from the list */
}

section p:last-child {
  margin-bottom: -2rem;
}

li>label {
  min-width: 54em;
  padding: 0 .5em 0 2em;
  margin-bottom: 2em;
  border-radius: .5em;
}

ul.short li label {
  margin-bottom: 0;
}

li>label:hover {
  background: lightgoldenrodyellow;
}

li>label>input[type=checkbox] {
  position: absolute;
  margin: .5em 0 0 -1.2em;
  vertical-align: center;
}

input[type=checkbox] {
  z-index: 1 !important;
}

/* position the button on the right of the pre element */
.copy-button {
  float: right;
}

.bj,
.bigmoji {
  vertical-align: center;
  float: left;
  margin-left: -1.5em;
}

section>ul {
  padding-left: 0;
  margin-left: -1rem;
}