@import url('https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.2/styles/vs.min.css') (prefers-color-scheme: light);
@import url('https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.2/styles/ir-black.min.css') (prefers-color-scheme: dark);
@import url('https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.2/theme/idea.min.css') (prefers-color-scheme: light);
@import url('https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.2/theme/ayu-dark.min.css') (prefers-color-scheme: dark);
body {
  background: white;
  max-width: 100%;
  line-height: 1.6;
  font-family: Lato, OpenSans, Arial, sans-serif;
  cursor: default;
  overflow-y: scroll;
}
@media screen and (min-width: 1440px) {
  .solution-table a.short {
    display: none;
  }
  .solution-table a.long {
    display: block;
  }
}
code {
  font-family: Consolas, "Roboto Mono", monospace;
}
.token.operator {
  background: none;
}
nav button {
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15) inset, 0 0 6px rgba(0, 0, 0, 0.2) inset;
  font-family: inherit;
  font-size: 100%;
  padding: 0.5em 1em;
  color: #444;
  border: 1px solid #999;
  border: 0 transparent;
  background-color: #4b6d86;
  text-decoration: none;
  border-radius: 2px;
}
.token.operator {
  background: none !important;
}
pre {
  font-size: 0.9em;
}
#motivation {
  margin-top: -0.3em;
  font-style: italic;
}
#motivation p {
  font-size: 1.2em;
}
#motivation ul {
  margin: 0;
  padding: 0;
  margin-left: 1em;
}
#motivation ul li {
  display: inline-block;
  list-style-type: none;
  margin-right: 1.8em;
  margin-left: 1.1em;
  position: relative;
  padding: 0;
  padding-left: 0.3em;
  text-transform: lowercase;
  font-size: 0.9em;
}
#motivation ul li:before {
  background-image: url(/green-tick-circle.svg);
  background-size: 100%;
  transform: scale(1.1);
  content: " ";
  width: 1em;
  display: inline-block;
  height: 1em;
  position: absolute;
  font-size: 1.5em;
  left: -1.1em;
  background-repeat: no-repeat;
}
@media print {
  body {
    color: black;
  }
}
@media (min-width: 1000px) {
  footer {
    height: 2em;
    padding-left: 1em;
    display: grid;
    grid-template-columns: 10em auto;
    font-size: 0.8em;
    margin-top: 1em;
    border-top: thin dotted #4b6d86;
  }
  footer nav {
    text-align: right;
    padding: 1em;
    display: block;
  }
  footer nav a {
    margin-right: 1em;
  }
  article > header {
    position: absolute;
    left: 16em;
    right: 22em;
    margin-left: auto;
    margin-right: auto;
    top: 0em;
  }
  article > header h1 {
    text-decoration: underline;
  }
  body.formed #header,
  body.formed #header,
  body.infod #header {
    width: 10em;
    text-align: center;
  }
  body.formed #header img,
  body.formed #header img,
  body.infod #header img {
    height: 8em;
  }
  body.formed #header p,
  body.formed #header p,
  body.infod #header p {
    margin-top: -0.8em;
    font-style: italic;
    font-size: 0.8em;
  }
  article.scala-solution {
    column-count: 2;
    column-gap: 2em;
  }
  article.scala-solution header h1 {
    line-height: 1;
    text-align: justify;
  }
  article.scala-solution #scala-concepts {
    margin-bottom: 2em;
  }
  article.scala-solution #scala-concepts,
  article.scala-solution #solution {
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid;
  }
  article.scala-solution #test-cases {
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid;
  }
  article.scala-solution #explanation {
    break-after: avoid-column;
    break-inside: avoid-column;
    margin-bottom: 0.5em;
  }
  article.scala-solution #scala-concepts {
    break-before: avoid-column;
    break-inside: avoid-column;
  }
  article.scala-solution #solution {
    break-before: avoid-column;
  }
  article.scala-solution .read-more a {
    font-weight: bold;
    border: thin solid #238723;
    background: white;
    color: #4b6d86;
    border-radius: 0.5em;
    text-decoration: underline;
    font-size: 1.1em;
    padding: 0.35em 0.7em;
  }
  article.scala-solution .read-more a:hover {
    background: #4b6d86;
    color: white;
  }
  article.scala-solution .read-more a:after {
    content: " »";
  }
  body:not(.formed):not(.formed):not(.infod) #header {
    font-size: 0.8em;
    display: block;
    top: 0;
    left: 0;
    right: 0;
    height: 3em;
  }
  body:not(.formed):not(.formed):not(.infod) #header section {
    z-index: 2;
    display: block;
    height: 14em;
    top: 0;
    background: #ffffff;
    border-radius: 1em;
    margin-top: -0.5em;
    padding: 0.5em;
    margin-left: -1.5em;
    width: 11em;
    padding-left: 2.2em;
    position: absolute;
  }
  body:not(.formed):not(.formed):not(.infod) #header section:hover {
    filter: brightness(120%);
    transition: filter 0.4s;
  }
  body:not(.formed):not(.formed):not(.infod) #header section #image-container {
    margin: 0;
    font-size: 2em;
    color: #4b6d86;
    padding: 0;
  }
  body:not(.formed):not(.formed):not(.infod) #header section #image-container a img {
    height: 5.5em;
  }
  body:not(.formed):not(.formed):not(.infod) #header section p {
    text-align: center;
    font-style: italic;
    margin: 0;
    margin-top: -0.5em;
    padding: 0;
    font-size: 0.8em;
  }
  body:not(.formed):not(.formed):not(.infod) #header nav {
    position: fixed;
    top: 0;
    right: 0;
    background: #ffffff;
    text-align: center;
    padding-top: 1.9em;
    border-radius: 1em;
    height: 3.5em;
    margin-right: 0.5em;
    margin-top: -1em;
    z-index: 2;
  }
  body:not(.formed):not(.formed):not(.infod) #header nav a {
    font-size: 1.4em;
    padding: 0.3em 0.7em;
    margin: 0.5em 0;
    text-decoration: underline;
  }
  body {
    padding-top: calc(6em + 3.5em);
  }
  footer {
    height: 2em;
    padding-left: 1em;
    display: grid;
    grid-template-columns: 15em auto;
    font-size: 0.8em;
    margin-top: 1em;
    border-top: thin dotted #4b6d86;
  }
  footer nav {
    text-align: right;
    padding: 1em;
  }
  footer nav a {
    margin-right: 1em;
  }
}
a {
  color: #4b6d86;
}
.coll-cta a {
  -webkit-appearance: button;
  -moz-appearance: button;
  font-family: inherit;
  appearance: button;
  text-align: center;
  width: 66%;
  max-width: 30em;
  display: inline-block;
  border: none;
  cursor: pointer;
  font-size: 0.9em;
  margin-left: auto;
  right: 0;
  left: 0;
  margin-right: auto;
  border-radius: 0.3em;
  text-decoration: none;
  padding: 0.3em 0.2em;
  background-color: #0d63ce;
  color: white !important;
  transition: transform 0.2s ease-in;
  text-transform: uppercase;
  box-shadow: 0 0px 3px #718156;
}
.coll-cta a:hover {
  background: blue;
}
#homepage.new h2 {
  text-align: center;
  font-size: 1.8em;
}
.home-article {
  margin-top: -7em;
  margin-left: auto;
  margin-right: auto;
  max-width: 60em;
  display: grid;
  grid-template: "a b" "a c";
  grid-template-columns: auto 20em;
}
.home-article .coll-cta {
  text-align: center;
}
.home-article .sample-algo {
  grid-area: a;
}
.home-article .sample-algo figure {
  border: thick double #312924;
  padding: 1.6em;
  max-width: 30em;
}
.home-article .sample-algo figure figcaption {
  margin-top: 1em;
}
.home-article .maybe-new {
  grid-area: b;
}
.home-article .short-tutorial {
  grid-area: c;
}
.home-article .short-tutorial iframe {
  max-height: 160px;
}
.normal-section a:visited {
  color: purple;
}
a:hover,
.normal-section a:hover {
  color: goldenrod;
  transition: color 0.3s;
}
#header > nav a {
  font-weight: bold;
}
#header > section {
  color: #141414;
  background: white;
}
@media (min-width: 1000px) {
  #homepage #header > nav .home-link {
    display: none;
  }
}
body.formed,
body.infod {
  margin-left: auto;
  margin-right: auto;
  max-width: 40em;
  padding-top: 0;
  margin-top: 7em;
}
body.formed form,
body.infod form {
  margin: 0.2em;
  border: thin dotted #4b6d86;
  padding: 0.3em;
}
body.formed form.reset,
body.infod form.reset {
  border: none;
  display: inline-block;
}
body.formed form h1,
body.infod form h1 {
  font-size: 1.2em;
  margin: 0;
  border-bottom: thin dotted #4b6d86;
}
body.formed form ul,
body.infod form ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  margin-left: 0.3em;
  font-size: 1.2em;
}
body.formed form ul li,
body.infod form ul li {
  margin: 0;
  padding: 0;
}
body.formed form ul li label,
body.infod form ul li label {
  position: relative;
}
body.formed form ul li label input,
body.infod form ul li label input {
  display: block;
  border: thin solid #4b6d86;
  font-size: inherit;
  min-width: 15em;
}
body.formed form ul li label textarea,
body.infod form ul li label textarea {
  display: block;
  border: thin solid #4b6d86;
  font-size: inherit;
  min-width: 20em;
  min-height: 6em;
}
body.formed form ul li button,
body.infod form ul li button {
  margin-top: 1em;
  background: #4b6d86;
  color: white;
  font-size: inherit;
  border: thin solid #4b6d86;
  padding: 0.3em 1.2em;
  min-width: 8em;
}
body.formed #header,
body.infod #header {
  border-bottom: 0;
  position: static;
  left: auto;
  right: auto;
}
figure.obfuscated {
  background-image: url("/obfuscated-solution.png");
}
figure.obfuscated-explanation {
  background: #312924;
}
figure.obfuscated,
figure.obfuscated-explanation {
  border-radius: 0.7em;
  max-width: calc(min(775px, 100%));
  display: block;
  max-height: 1000px;
  height: 40em;
  padding-top: 1em;
}
figure.obfuscated figcaption,
figure.obfuscated-explanation figcaption {
  border-radius: 0.7em;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 5em;
  width: 22em;
  max-width: calc(100% - 2em);
  background: white;
  padding: 1em;
  border: medium solid white;
}
figure.obfuscated figcaption .reg-note,
figure.obfuscated-explanation figcaption .reg-note {
  font-size: 0.8em;
  font-style: italic;
}
figure.obfuscated figcaption p,
figure.obfuscated-explanation figcaption p {
  margin-top: 0;
  margin-bottom: 0;
}
form.subscribe h3 {
  margin-top: 0;
  margin-bottom: 0;
}
form.subscribe p {
  margin-top: 0;
  font-size: 0.8em;
  font-style: italic;
}
form.subscribe input {
  background: white;
  color: #4b6d86;
  border: thin solid #4b6d86;
  padding: 0.6em 0.6em 0.6em 1em;
  border-top-left-radius: 0.7em;
  border-bottom-left-radius: 0.7em;
  font-size: 1em;
  margin-right: -1em;
}
form.subscribe button {
  font-size: 1em;
  border-top-right-radius: 0.7em;
  border-bottom-right-radius: 0.7em;
  background: #0d63ce;
  color: white;
  border: thin solid #4b6d86;
  border-left-width: 0;
  padding: 0.6em 1.6em;
  cursor: pointer;
  min-width: 9em;
}
form.subscribe button:hover {
  background: white;
  color: #4b6d86;
  border-color: #4b6d86;
}
form.subscribe .sub-row {
  display: flex;
  width: 24em;
  max-width: 100%;
}
form.subscribe .sub-row input {
  flex: 1;
}
fieldset p {
  margin: 0;
  padding: 0;
}
fieldset input {
  display: inline-block !important;
  min-width: auto !important;
}
fieldset button {
  background: #4b6d86;
  color: white;
  border: thin solid #4b6d86;
  border-left-width: 0;
  padding: 0.4em 1.6em;
  min-width: 12em;
  cursor: pointer;
}
fieldset button:hover {
  background: white;
  color: #4b6d86;
  border-color: #4b6d86;
}
p.note {
  font-size: 0.7em;
  font-style: italic;
}
main {
  min-height: calc(100vh - 2em - 10em - 21em - 1.4em);
}
main.nohighsub {
  min-height: calc(100vh - 2em - 13em - 1.4em);
}
#other-solutions {
  font-size: 0.6em;
}
p.thank-you {
  margin-top: -0.5em;
}
a[href="/tutorial"] {
  font-weight: bold;
}
a.me {
  text-decoration: none;
}
img {
  max-width: 100%;
}
#scala-concepts {
  background-color: #f7f9af;
  padding: 1em;
  box-shadow: 0px 5px 7px rgba(33, 33, 33, 0.7);
  transition: transform 0.15s linear;
  border-radius: 0.7em;
}
#scala-concepts:hover {
  transform: unset;
}
#scala-concepts h2 {
  font-size: 1.8em;
  padding-left: 2em;
  position: relative;
}
#scala-concepts h2:before {
  position: absolute;
  top: -0.5em;
  left: 0.1em;
  content: " ";
  display: inline-block;
  background-image: url("/lightbulb.svg");
  width: 2em;
  background-size: 100%;
  background-position: bottom;
  height: 2em;
  background-repeat: no-repeat;
}
#scala-concepts dl dt {
  font-weight: bold;
  font-size: 1.2em;
}
#scala-concepts pre {
  font-size: 0.9em;
}
#test-cases {
  padding-left: 0.2em;
}
#test-cases h2:before {
  content: " ✓ ";
  margin-left: 0.4em;
  margin-right: 0.2em;
  color: #a6e22e;
}
#other-concepts,
#in-solutions,
.other-concepts {
  max-width: 40em;
}
#other-concepts ol,
#in-solutions ol,
.other-concepts ol {
  font-size: 0.8em;
  display: flex;
  margin: 0;
  padding: 0;
  list-style-type: none;
  justify-content: space-between;
  flex-flow: row wrap;
}
#other-concepts ol li,
#in-solutions ol li,
.other-concepts ol li {
  margin: 0;
  display: inline-block;
}
#other-concepts ol li a,
#in-solutions ol li a,
.other-concepts ol li a {
  padding: 0.4em 1em;
  text-decoration: none;
  font-weight: bold;
  display: inline-block;
}
.code-block pre code {
  padding-left: 0.75em;
}
@media (max-width: 999px) {
  #ide #motivation {
    margin-top: 1em;
    margin-bottom: -2em;
  }
  #scala-concepts {
    transform: none;
  }
  main {
    min-height: calc(100vh - 8em);
  }
  article.scala-solution header h1 {
    margin-bottom: 0;
  }
  article.scala-solution header #motivation {
    margin-top: -1em;
    font-size: 0.65em;
    font-style: italic;
  }
  article.scala-solution form {
    margin-top: 0.3em;
  }
  article.scala-solution form h3 {
    font-size: 0.8em;
    text-align: justify;
  }
  #header > section {
    position: absolute;
    top: -0.3em;
    background: none;
    z-index: 6;
    width: 5.5em;
    height: 5.5em;
    padding: 0.5em;
    margin-bottom: -1em;
    left: 0.3em;
  }
  #header > section #image-container {
    margin: 0;
    padding: 0;
  }
  #header > section #image-container img {
    border-radius: 0.5em;
    width: 3.5em;
  }
  #header > section #image-container + p {
    display: none;
  }
  #header > section p {
    margin-top: 0;
    padding-top: 0;
    font-style: italic;
    font-size: 0.6em;
    text-align: center;
    padding-bottom: 0.5em;
  }
  #header > nav {
    text-align: right;
    height: 3.4em;
    border-bottom: thin dotted #4b6d86;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 5em;
    padding-bottom: 0.6em;
  }
  #header > nav a:first-child {
    display: none;
    position: absolute;
    left: 0;
    font-weight: bold;
  }
  #header > nav a {
    display: block;
  }
  #header > nav a:last-child {
    margin-right: 1.4em;
  }
  footer {
    display: block;
    padding-right: 0.7em;
    margin-bottom: 1em;
  }
  footer p {
    margin-bottom: 0;
  }
  footer nav {
    font-size: 0.7em;
  }
  footer nav a {
    display: inline-block;
    font-style: italic;
    margin-left: 1em;
    margin-top: 0.2em;
  }
  footer nav a:last-child {
    margin-right: 1em;
  }
  article.scala-solution {
    display: flex;
    flex-direction: column;
  }
  article.scala-solution #problem {
    order: 2;
  }
  article.scala-solution #test-cases {
    order: 3;
  }
  article.scala-solution #explanation {
    order: 4;
  }
  article.scala-solution #solution {
    order: 5;
  }
  article.scala-solution #scala-concepts {
    order: 6;
  }
  article.scala-solution #other-solutions {
    order: 7;
  }
}
footer nav a {
  font-size: 1.1em;
}
footer nav a i {
  transform: scale(1.2);
}
@media (max-width: 419px) {
  nav#header nav .twitter {
    display: none;
  }
}
.subscribe-checkout-button {
  background-color: #238723;
  color: white;
  font-size: 1em;
  border: thin solid white;
  padding: 0.4em 0.6em;
  min-width: 8em;
  text-align: center;
}
.checkout-button,
.purchase-button-stripe,
.subscribe-checkout-button {
  margin: 1em auto;
  background-color: #238723;
  color: white;
  font-size: 1.4em;
  border: none;
  padding: 0.4em 0.6em;
  min-width: 8em;
  display: block;
  cursor: pointer;
  border-radius: 0.7em;
  transition: background-color 0.1s ease-in;
}
.checkout-button:hover,
.purchase-button-stripe:hover,
.subscribe-checkout-button:hover {
  background-color: limegreen;
}
.watermark {
  display: inline-block;
  width: 1px;
  overflow: hidden;
  height: 1px;
  opacity: 0;
}
#calendar-subscribe {
  border: #4b6d86;
  padding: 0.2em;
}
aside#subscribe > ul {
  display: flex;
  list-style-type: none;
  margin: 0;
  flex-wrap: wrap;
  padding: 0;
}
aside#subscribe > ul > li {
  flex: 1;
  min-width: 12em;
  margin: 1em;
}
aside#subscribe > ul > li h3 {
  margin-bottom: 0;
  margin-top: 0;
  display: inline-block;
}
aside#subscribe > ul > li p {
  margin: 0;
}
@media (max-width: 1000px) {
  #explanation p,
  #tutorial p {
    text-align: justify;
  }
  #tutorial figure {
    margin: 0;
  }
  #homepage article {
    display: flex;
    flex-direction: column;
  }
  #homepage article > header {
    order: 2;
  }
  #homepage article > aside#subscribe {
    order: 3;
  }
  #homepage article > aside#subscribe li {
    margin: 0;
  }
  #homepage article > aside#subscribe li:not(:hover) h3 {
    text-decoration: underline;
    color: #4b6d86;
  }
  #homepage article > section.concepts-list {
    order: 5;
  }
}
#intro-video {
  order: 1;
}
#intro-video iframe {
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  max-height: 60vw;
}
.note-extra-sub {
  font-style: italic;
  margin-top: -0.9em;
}
@media (prefers-color-scheme: light) {
  #light-mode-note {
    display: none;
  }
}
@media (prefers-color-scheme: dark) {
  body {
    background: #1d2227;
    color: white;
    scrollbar-color: #718156 #1d2227;
  }
  #header nav a {
    color: #1d2227;
  }
  a {
    color: white;
  }
  #scala-concepts {
    background-color: #718156;
  }
  #dark-mode-note {
    display: none;
  }
}
@media (prefers-color-scheme: dark) and (max-width: 999px) {
  #header > nav {
    color: white;
  }
  #header > nav a {
    color: white;
  }
}
#dark-mode-note,
#light-mode-note,
.gcal,
.ical {
  position: relative;
}
#dark-mode-note:hover,
#light-mode-note:hover,
.gcal:hover,
.ical:hover {
  text-decoration: underline;
}
#dark-mode-note[title]:hover:after,
#light-mode-note[title]:hover:after,
.gcal[title]:hover:after,
.ical[title]:hover:after {
  background: #4b6d86;
  border-radius: 0.7em;
  box-shadow: 0 0 5px 0 #4b6d86;
  border: thin solid white;
  bottom: 1em;
  left: -10em;
  color: whitesmoke;
  content: attr(title);
  white-space: pre-wrap;
  text-align: justify;
  padding: 0.7em;
  overflow: hidden;
  position: absolute;
  z-index: 98;
  width: 20em;
}
.note-future-publish {
  font-size: 1.2em;
}
.note-future-publish .date {
  font-weight: bold;
}
@media (max-width: 450px) {
  #header {
    font-size: 0.9em;
    letter-spacing: -1px;
  }
}
@media screen and (max-height: 340px) {
  #header > section {
    width: 4.5em;
  }
  #header > section #image-container img {
    width: 4em;
  }
}
.sub-caption {
  font-size: 0.8em;
  font-style: italic;
  margin: 0;
  padding: 0;
  text-align: center;
  margin-top: -3em;
  margin-bottom: 1em;
}
.scala-version-note {
  font-style: italic;
  font-size: 0.8em;
  margin-top: -0.5em;
  margin-bottom: -0.5em;
}
.mermaid svg {
  background: white;
  padding: 0.5em;
  border-radius: 0.5em;
}
pre code {
  cursor: auto;
  border: thin dotted #4b6d86;
}
div.illustration {
  max-width: 100%;
}
table.illustration {
  margin-left: auto;
  margin-right: auto;
  font-size: 0.9em;
  border-collapse: collapse;
}
table.illustration td,
table.illustration th {
  padding: 2pt;
  border: thick double #141414;
}
table.illustration td.yes {
  background-color: rgba(200, 250, 200, 0.4);
  color: #28fa28;
}
table.illustration td.no {
  background-color: rgba(250, 200, 200, 0.4);
  color: #fa2828;
}
table.illustration td.pick {
  background-color: rgba(200, 250, 200, 0.4);
}
table.illustration td.igonre {
  background-color: rgba(200, 200, 200, 0.4);
}
.extra-note {
  column-span: 2;
  border-bottom: thin solid dimgray;
}
#problem > h2 {
  margin-top: 0;
}
.solution-table {
  width: 100%;
  border-collapse: collapse;
}
.solution-table tr,
.solution-table td {
  padding-left: 4pt;
  padding-top: 2pt;
  padding-bottom: 2pt;
  padding-right: 4pt;
  vertical-align: top;
}
.solution-table td:last-child {
  width: 18em;
}
.solution-table tr:nth-child(2n) {
  background: rgba(241, 236, 220, 0.2);
}
.solution-table tr:nth-child(2n + 1) {
  background: rgba(241, 236, 220, 0.05);
}
.solution-table tr:hover {
  background: rgba(241, 236, 220, 0.25);
}
.solution-table td:nth-child(1) {
  text-align: right;
  padding-left: 12pt;
}
.solution-table td:last-child {
  text-align: right;
}
.solution-table th:nth-child(1) {
  text-align: left;
}
.solution-table h4 {
  border-radius: 0.5em;
  display: inline-block;
  padding: 0.3em 0.8em;
  font-size: 0.7em;
  color: black;
  bottom: 0.3em;
  margin-right: 1em;
  margin-bottom: 1pt;
  margin-top: 1pt;
  white-space: nowrap;
}
.solution-table h4.free,
.solution-table h4.free-testcases {
  background: #fcde56;
}
.solution-table h4.paid {
  background: #56defc;
}
.solution-table h4.coming-soon {
  background: #56fc61;
}
.solution-table a:visited {
  color: purple;
}
@media screen and (min-width: 1440px) {
  .solution-table a.short {
    display: none;
  }
  .solution-table a.long {
    display: block;
  }
}
#homepage .solution-table {
  display: none;
}
@media screen and (max-width: 1399px) {
  .solution-table a.long {
    display: none;
  }
  .solution-table a.short {
    display: block;
  }
}
#grid-table-select {
  display: none;
}
@media screen and (min-width: 780px) {
  #grid-table-select {
    display: block;
    order: 4;
    margin-top: 4em;
    margin-right: 1em;
    margin-bottom: -5em;
    text-align: right;
    z-index: 5;
  }
  #grid-table-select button {
    margin-left: 0.6em;
    font-size: 1.2em;
    padding: 3pt 6pt;
    border: medium solid white;
    background: white;
    color: #141414;
  }
  #select-grid {
    box-shadow: inset 0px 0px 5px #c1c1c1;
    outline: none;
  }
  .table-view #select-table {
    box-shadow: inset 0px 0px 5px #c1c1c1;
    outline: none;
  }
  .table-view #select-grid {
    box-shadow: none;
  }
  .table-view .solution-table {
    order: 4;
    display: table;
  }
  .table-view .solution-table a {
    text-decoration: none;
  }
  .table-view .solution-table caption {
    text-align: left;
    padding: 0.6em;
    font-size: 1.3em;
  }
}
.rotate-array-right table {
  min-width: 20em;
}
.rotate-array-right table caption {
  white-space: pre-line;
}
.rotate-array-right td {
  text-align: center;
}
.arrows-table {
  margin-left: auto;
  margin-right: auto;
  border-collapse: collapse;
  margin-bottom: 0.4em;
}
.arrows-table td {
  padding: 0.2em;
  border: thin double black;
  text-align: center;
  width: 2em;
}
.arrows-table td.arrows {
  text-align: left;
}
@media (prefers-color-scheme: dark) {
  #problem table tbody,
  #explanation table tbody {
    background: white;
    color: #141414;
  }
  #problem table tbody td,
  #explanation table tbody td,
  #problem table tbody th,
  #explanation table tbody th {
    border-color: #1d2227;
  }
}
.illustration-w {
  background: white;
}
.ide-me {
  position: absolute;
  background: lightgray;
}
a.ide:before {
  content: ">_";
  border: thin solid blue;
  background: #312924;
  padding: 2pt;
  text-decoration: none;
  color: white;
}
#ide body {
  padding-top: 3em;
}
#ide article > header {
  right: 26em;
}
#ide #motivation ul {
  margin-left: 1.5em;
  padding-left: 0;
}
#ide #motivation ul li {
  margin-left: 0;
  margin-right: 2.1em;
}
#ide .ide-div {
  display: grid;
  grid-template-areas: "i t t3 t3" "i m t2 t2";
  grid-template-rows: 3em calc(100vh - 18em);
  grid-gap: 2em;
  grid-template-columns: 15em calc((100% - 18em) / 2) 21.5em calc((100% / 2) - 24em - 13.5em + 3.5em);
  max-width: 100%;
}
#ide .ide-div .test-results code {
  font-size: 0.8em;
  font-family: Consolas, 'Roboto Mono', monospace;
}
#ide .ide-div .test-code h2,
#ide .ide-div .algorithm-code h2,
#ide .ide-div .test-results h2 {
  user-select: none;
  position: absolute;
  left: 0em;
  top: 0em;
  transform: translateY(10em) translateX(-2em) rotate(-90deg);
  transform-origin: top left;
  text-align: right;
  text-transform: uppercase;
  font-size: 0.9em;
  width: 10em;
  z-index: 5;
}
#ide .ide-div .test-results h2 {
  transform: translateY(10em) rotate(-90deg);
}
#ide .ide-div .test-results {
  padding-left: 2em;
  min-height: 9.5em;
}
#ide .ide-div .test-code {
  grid-area: t2;
  position: relative;
}
#ide .ide-div .algorithm-code {
  grid-area: m;
  position: relative;
}
#ide .ide-div .test-status {
  grid-area: t3;
}
#ide .ide-div .i {
  grid-area: i;
  padding-top: 5em;
  text-align: justify;
  padding-right: 1em;
  overflow-y: auto;
}
#ide .ide-div .i .bubble {
  margin-bottom: -0.15em;
}
#ide .ide-div .top {
  grid-area: t;
  text-align: left;
}
#ide .ide-div .top button {
  font-size: 1.2em;
  display: inline-block;
  background: white;
  color: #1d2227;
  border: thin solid #238723;
  padding: 0.4em;
}
#ide .ide-div .top button:hover {
  background-color: #4b6d86;
}
#ide .ide-div .top button span {
  color: #238723;
}
#ide.open {
  border: thick solid orangered;
  z-index: 6;
  position: fixed;
  bottom: 1em;
  left: 1em;
  right: 1em;
  height: 60vh;
  background: white;
}
#ide.open #main-area,
#ide.open #test-area {
  height: 15vh;
  margin-bottom: 1em;
  width: 50%;
}
body .ide-section {
  background: white;
  color: #1d2227;
  top: 5em;
  left: 14em;
  grid-template-rows: 3em calc(100vh - 32em) 18em;
}
body .ide-section h2 {
  text-transform: uppercase;
}
@media (prefers-color-scheme: dark) {
  #ide.open {
    background: #718156;
  }
  #ide.open textarea {
    background: #1d2227;
    color: white;
  }
  body .ide-section {
    background: #312924;
    color: white;
    border: thick solid white;
  }
}
@media (max-width: 1000px) {
  #ide body {
    padding-top: 0;
  }
  #ide article > header h1 {
    margin: 0;
    margin-top: 0.5em;
  }
  #ide article > header ul {
    margin-left: 0.5em;
    margin: 0;
  }
  #ide .ide-div {
    grid-gap: 1em;
    display: flex;
    flex-direction: column;
  }
  #ide .ide-div .i {
    padding-top: 0;
  }
  #ide .ide-div .top {
    text-align: center;
    order: 2;
  }
  #ide .ide-div .top button {
    margin: 0;
  }
  #ide .ide-div .algorithm-code {
    order: 1;
    padding-left: 2em;
    height: 20em;
    resize: vertical;
    padding-bottom: 0.7em;
    overflow: hidden;
  }
  #ide .ide-div .test-code {
    order: 4;
    padding-left: 2em;
    height: 15em;
    resize: vertical;
    padding-bottom: 0.7em;
    overflow: hidden;
  }
  #ide .ide-div .test-status {
    order: 3;
  }
  #ide .ide-div .test-code h2,
  #ide .ide-div .algorithm-code h2,
  #ide .ide-div .test-results h2 {
    transform: translateY(10em) rotate(-90deg);
  }
}
.testcase-result {
  width: 1.2em;
}
.succeeded-test,
.failed-test {
  border-radius: 1em;
  width: 1em;
  height: 1em;
  display: inline-block;
  margin-top: 0.24em;
}
.succeeded-test {
  background: lime;
}
.failed-test {
  background: red;
}
.bubble {
  position: relative;
  z-index: 4;
}
@media (max-width: 999px) {
  .bubbles {
    margin-bottom: 0.5em;
  }
}
@media (min-width: 999px) {
  .bubble[data-description]:hover:after {
    font-family: 'Roboto', Verdana, sans-serif;
    text-decoration: none;
    background: #4b6d86;
    border-radius: 0.7em;
    box-shadow: 0 0 5px 0 #4b6d86;
    border: thin solid white;
    top: 1em;
    left: 1.6em;
    color: whitesmoke;
    content: attr(data-description);
    white-space: pre-wrap;
    text-align: justify;
    padding: 0.4em 0.7em;
    overflow: hidden;
    position: absolute;
    z-index: 5;
    min-width: 15em;
  }
}
#ide-spot {
  margin-top: 3em;
}
.failed {
  color: red;
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.ran-tests .bubble {
  margin-right: 0.3em;
  animation: fadeIn 500ms;
  animation-fill-mode: forwards;
  opacity: 0;
  animation-delay: 180ms;
}
.ran-tests .bubble:nth-child(1) {
  animation-delay: 50ms;
}
.ran-tests .bubble:nth-child(2) {
  animation-delay: 100ms;
}
.ran-tests .bubble:nth-child(3) {
  animation-delay: 140ms;
}
.ran-tests .bubble:nth-child(4) {
  animation-delay: 160ms;
}
.running .test-code .bubble {
  animation: pulse 1500ms infinite;
}
.running .test-code .succeeded-test {
  background: gray;
}
.running .test-code .failed-test {
  background: gray;
}
@keyframes pulse {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}
#ide-div .CodeMirror {
  font-family: Consolas, 'Roboto Mono', monospace;
  font-size: 0.85em;
}
.runs-avail {
  font-size: 0.9em;
  font-style: italic;
}
.colg {
  border-left-width: 2px;
  border-right-width: 2px;
}
a.bubble {
  cursor: pointer;
}
a.bubble:hover {
  box-shadow: 0px 0px 5px 0px #b5abce;
}
#mtpc {
  display: none;
}
button.open-in-ide {
  font-size: 0.9em;
  margin: 0.6em;
  margin-top: 1.2em;
  display: inline-block;
  cursor: pointer;
  padding: 0.4em;
}
button.open-in-ide span {
  color: #238723;
}
p.note {
  font-style: italic;
}
.merge-sort-result {
  background-color: rgba(250, 130, 130, 0.2);
}
.merge-sort-left {
  background-color: rgba(130, 250, 130, 0.2);
}
.merge-sort-right {
  background-color: rgba(130, 130, 250, 0.2);
}
p.rest {
  font-style: italic;
}
#tiers {
  display: flex;
  margin: 0;
  padding: 0;
  list-style-type: none;
  justify-content: center;
  flex-flow: wrap;
}
#tiers > li {
  padding: 1em;
  font-size: 0.8em;
  width: 18.5em;
  min-width: 18.5em;
  max-width: 18.5em;
  flex: 1;
  border-right: thin solid #718156;
  padding-bottom: 3.6em;
  position: relative;
  /*
    &.member ul li:before, &.member blockquote:before {
      color: #7bb32e;
    }

    &.one-off ul li:before, &.one-off blockquote:before {
      color: #cdc635;
    }

    &.unlimited ul li:before, &.unlimited blockquote:before {
      color: #0071ff;
    }

    &.patron ul li:before , &.patron blockquote:before{
      color: #b3582e;
    }*/
}
#tiers > li.unlimited {
  width: 24em;
  min-width: 24em;
}
#tiers > li.unlimited h3 {
  transform: scale(1.2);
}
#tiers > li.unlimited h3 .popular {
  position: absolute;
  right: 2.5em;
  top: -1.3em;
  text-transform: uppercase;
  font-style: italic;
  font-size: 0.6em;
  color: #7bb32e;
}
#tiers > li fieldset {
  margin: 0;
  border: thin solid #1d2227;
}
#tiers > li fieldset legend {
  text-transform: uppercase;
  font-size: 0.8em;
  letter-spacing: -0.2pt;
}
#tiers > li fieldset select {
  border-color: #718156;
  border-radius: 0.2em;
  padding: 0.4em;
}
#tiers > li:last-child {
  border-right: none;
}
#tiers > li h3 {
  position: relative;
  text-align: center;
  text-transform: uppercase;
  font-size: 1.45em;
}
#tiers > li blockquote {
  font-size: 1.2em;
  margin: 0.5em 0.5em 0.5em -1em;
  padding: 0.5em 0;
  quotes: "\201C" "\201D";
  font-style: italic;
  text-align: center;
}
#tiers > li blockquote:before {
  margin-right: 0.13em;
  color: #718156;
  content: open-quote;
  font-size: 4em;
  line-height: 0.1em;
  vertical-align: -0.4em;
}
#tiers > li.one-off select {
  width: 100%;
}
#tiers > li form {
  margin: 0.5em;
  margin-bottom: 0.7em;
}
#tiers > li select {
  width: 100%;
}
#tiers > li ul {
  min-height: 10em;
  margin: 0 1em 0 0;
  padding: 0;
  list-style-type: none;
}
#tiers > li ul li {
  margin: 0;
  padding: 0;
  margin-left: auto;
  margin-right: auto;
  display: block;
  width: auto;
  text-align: center;
}
#tiers > li ul li:before {
  content: '✓';
  margin-right: 0.5em;
}
#tiers > li .go {
  -webkit-appearance: button;
  -moz-appearance: button;
  font-family: inherit;
  appearance: button;
  position: absolute;
  bottom: 0.5em;
  text-align: center;
  width: 80%;
  display: inline-block;
  border: none;
  cursor: pointer;
  font-size: 1.3em;
  margin-left: auto;
  right: 0;
  left: 0;
  margin-right: auto;
  border-radius: 0.3em;
  text-decoration: none;
  padding: 0.4em 0.3em;
  background-color: #238723;
  color: white;
  transition: transform 0.1s ease-in;
  text-transform: uppercase;
  box-shadow: 0 0px 3px #718156;
}
#tiers > li .go:hover {
  transform: scale(1.1);
}
#tiers > li .go:disabled {
  opacity: 0.4;
  background-color: #718156 !important;
  box-shadow: none;
  color: #333;
}
#tiers > li .go:disabled:hover {
  transform: none;
}
#tiers > li.member .go {
  background-color: #7bb32e;
}
#tiers > li.one-off .go {
  background-color: #cdc635;
}
#tiers > li.unlimited .go {
  background-color: #0d63ce;
  box-shadow: 0 0 3px #141414, 0 1 3px #141414, 1 0 3px #141414, -1px 0 3px #141414;
}
#tiers > li.patron .go {
  background-color: #b3582e;
}
@media (max-width: 1240px) {
  #tiers {
    justify-content: space-around;
    gap: 2em;
  }
  #tiers > li {
    border-right: none;
    padding-bottom: 6em;
    border-bottom: thin solid #718156;
  }
  #tiers > li .go {
    bottom: 2em;
  }
  .unlimited {
    order: 1;
  }
  .member {
    order: 2;
  }
  .patron {
    order: 3;
  }
  .one-off {
    order: 4;
  }
}
.stripe-image {
  text-align: center;
  font-size: 1.4em;
}
.stripe-image i {
  font-size: 1em;
}
.stripe-image img,
.stripe-image i {
  margin: 0.1em 0.3em;
  max-height: 1em;
}
figure .stripe-image {
  margin-top: 0.6em !important;
}
figure.paypal {
  text-align: center;
}
figure.paypal .single {
  margin-top: 1em;
}
figure.stripe .or {
  margin: -0.4em !important;
  text-align: center;
}
figure.paypal .or {
  text-align: center;
  margin-bottom: 1em;
}
figure.paypal figcaption p:first-child {
  margin-bottom: 1em;
  font-size: 1.2em;
  font-style: italic;
}
#membership .stripe-image {
  margin-top: -5em;
  margin-bottom: 3em;
}
#profile main {
  margin-top: -4em;
  width: 40%;
  max-width: 40em;
  margin-left: 15.8em;
  margin-right: auto;
}
#profile main table {
  width: 100%;
  border-collapse: collapse;
}
#profile main table th {
  text-align: left;
}
#profile main table td,
#profile main table th {
  padding: 0.6em 0.9em;
  border: thin solid #718156;
  vertical-align: top;
}
#profile main table tr > *:first-child {
  min-width: 4em;
}
#profile main #feedback form #message-td {
  padding: 0;
}
#profile main #feedback form textarea {
  border: none;
  width: 100%;
  min-height: 12em;
  font-family: Georgia, serif;
  font-size: 1em;
  line-height: 1.6;
  padding: 0.6em 0.9em;
}
#profile main #feedback form button {
  -webkit-appearance: button;
  -moz-appearance: button;
  font-family: inherit;
  appearance: button;
  bottom: 0.5em;
  text-align: center;
  width: 80%;
  display: inline-block;
  border: none;
  cursor: pointer;
  font-size: 1.3em;
  margin-left: auto;
  right: 0;
  left: 0;
  margin-right: auto;
  border-radius: 0.3em;
  text-decoration: none;
  padding: 0.4em 0.3em;
  background-color: #8e5817;
  color: white;
  transition: box-shadow 0.1s ease-in;
  text-transform: uppercase;
}
#profile main #feedback form button:hover {
  box-shadow: 0 0px 3px #718156;
}
@media screen and (max-width: 999px) {
  #membership .stripe-image {
    margin-top: 0;
    margin-bottom: 1.6em;
  }
  #profile main {
    margin-left: 0;
    margin-right: 0;
    max-width: 100%;
    width: 100%;
    margin-top: 0;
  }
}
@media screen and (min-width: 999px) {
  #intro-video {
    position: absolute;
    top: -2em;
    right: 2em;
    width: 20em;
  }
}
#tutorial #video {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 60em;
  margin-bottom: 2em;
}
#tutorial #video h2 {
  font-style: italic;
}
#tutorial #video iframe {
  width: 100%;
  max-width: 100%;
}
#homepage iframe {
  max-width: 100%;
}
#edit-newsletter main {
  display: grid;
  grid-template-areas: "e p" "s p" "s p";
  grid-template-columns: auto 900px;
  grid-template-rows: auto auto auto;
  gap: 3em;
}
#edit-newsletter main > * {
  border: thin solid black;
}
#edit-newsletter main button {
  margin: 1em;
  font-size: 1.2em;
  padding: 0.4em 1em;
  text-align: right;
}
#edit-newsletter main input,
#edit-newsletter main select {
  display: inline-block;
  padding: 0.3em;
  min-width: 50%;
}
#edit-newsletter main textarea {
  min-width: 98%;
  min-height: 6em;
  font-family: Georgia, serif;
  padding: 0.4em;
  font-size: inherit;
  border: thin dotted #141414;
}
#edit-newsletter main label {
  width: 100%;
  display: block;
  margin: 1em;
  position: relative;
}
#edit-newsletter main label input,
#edit-newsletter main label select {
  position: absolute;
  left: 10em;
  width: calc(100% - 10em - 3em);
}
#edit-newsletter form#newsletter {
  grid-area: e;
}
#edit-newsletter form#posting {
  grid-area: s;
}
#edit-newsletter iframe {
  grid-area: p;
  width: 640px;
  margin-right: auto;
  height: 1000px;
}
.fab.fa-rss-square,
.fab.fa-calendar,
.fab.fa-calendar-alt {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
}
a.social {
  font-size: 1.1em;
  color: #1d2227;
}
a.social:hover {
  color: goldenrod;
}
@media (prefers-color-scheme: dark) {
  a.social {
    color: white;
  }
}
nav.social-subscribe a {
  margin: 0.2em;
  font-size: 1.5em;
  color: #1d2227;
}
nav.social-subscribe p:nth-child(2) {
  margin-top: -0.5em;
}
nav.social-subscribe .gcal[title]:hover:after,
nav.social-subscribe .ical[title]:hover:after {
  font-size: 0.6em;
}
#ide-form {
  display: none;
}
.suggest-register a {
  background-color: #238723;
  text-decoration: none;
  color: white;
  padding: 0.6em;
  border-radius: 0.7em;
  font-style: normal;
  transition: background-color 0.1s ease-in;
}
.suggest-register a:hover {
  background-color: limegreen;
}
.purchasing-note {
  display: flex;
  flex-wrap: wrap;
}
.purchasing-note > * {
  margin-right: 0.3em;
}
.concepts-list ul {
  font-size: 0.8em;
  font-weight: bold;
}
@media (max-device-width: 400px) {
  #header > nav a.concepts-link {
    display: none;
  }
}
#searchform:not(.showing) ol {
  display: none;
}