#index #content {
  background-image: url(images/sudoku-title.jpg) !important;
  background-size: cover;
  height: 43vw !important;
  margin-top: -21.5vw !important;
}

#index #nav {
  top: 0.5em;
}

#title-header,
#title-author {
  text-shadow: 0 0 12px #ffffff, 0 0 12px #ffffff, 0 0 12px #ffffff, 0 0 12px #ffffff;
}

#index #title-header {
  margin: 4% 15% 0 12.2% !important;
  font-size: 125% !important;
}

#index #title-author {
  color: #c88686 !important;
  top: 20.5vw !important;
  font-size: 80% !important;
}

body #content {
  padding-bottom: 0px
}

body.section #content > h1 {
  width: 95%;
}

.no-bullets #content ul {
  padding-left: 0;
}

.no-bullets #content ul li {
  list-style: none;
}

img {
  display: inline-block;
}

div.included {
  border: none;
}

.code.middling {
  font-size: 52%;
}

#svg-vs-png {
  margin: 0 10vw;
  display: grid;
  grid-template-columns: 30vw 30vw;
  grid-template-rows: 58vh 6vh;
  column-gap: 1em;
  row-gap: 0.4em;
}

#svg-vs-png > .image {
  place-self: center;
}

#svg-vs-png > .caption {
  place-self: center;
  font-family: "ubuntu mono", monospace;
  font-size: 4.2vh;
}

.stretched #svg-vs-png img {
  height: 55vh;
}

#flower-bullets #content ul {
  list-style: none;
  line-height: 1.4;
  margin-left: 0.45em;
}

#flower-bullets #content ul li::before {
  content:"";
  height:1em;
  width:1em;
  display:block;
  float:left;
  margin-left:-1.5em;
  margin-top: 0.29em;
  background-position:center;
  background-repeat:no-repeat;
  background-size:90%;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="90%" height="90%" viewBox="-0.5 -0.7 11 12" preserveAspectRatio="xMidYMid meet"><path d="M5,5 C5,7 4,8 6.5,11" stroke="green" fill="none" stroke-width="1"/><ellipse id="petal" cx="5" cy="2" ry="2.5" rx="1.5" fill="white" stroke="slateblue" stroke-width="0.5" /><use xlink:href="%23petal" transform="rotate(72 5 5)"/><use xlink:href="%23petal" transform="rotate(144 5 5)"/><use xlink:href="%23petal" transform="rotate(216 5 5)"/><use xlink:href="%23petal" transform="rotate(-72 5 5)"/><circle r="1" cx="5" cy="5" fill="goldenrod" stroke="yellow"/></svg>');
}

.svg-shapes .code {
  height: 8em;
  overflow-y: hidden;
}

.svg-shapes svg {
  box-shadow: 1px 1px 3px #8886;
  max-height: 32vh;
}

#qrcode #content img {
  width: 100vw;
}

.css-boxes .code {
  height: 9.6em;
  overflow: hidden;
}

.css-boxes svg {
  box-shadow: 1px 1px 3px #8886;
  height: 30vh;
  max-width: 90vw;
}

.css-boxes.css-black-boxes rect {
  fill: black;
}

.css-boxes rect {
  fill: red;
}

.css-boxes rect:hover {
  fill: blue;
}

.css-boxes rect.selected {
  fill: green;
}

.inc-diagram div.included {
  min-height: 20vh
}