:root {
  --table-bg: #ccc;
  --table-stripe: #aaa;
  --table-code: darkgreen;
  --table-border: #838282;
  --light-grey: #ccc;
}

@media (prefers-color-scheme: dark) {
  :root {
    --table-bg: #495978;
    --table-stripe: #3e4a5b;
    --table-code: #fff5e9;
    --table-border: #838282;
    --light-grey: #384c66;
  }
}
#green-list-1 > li:nth-child(2) {
  color: green;
}

/* This is for the an+b example list */
ol.practice {
  padding: 0.5em 2em;
  column-count: 4;
  column-gap: 2em;
  background: var(--light-grey);
}

ol.practice + p {
  margin-top: 2em;
  margin-bottom: 4em;
}

.italic {
  font-style: italic;
}

li.italic::marker {
  color: #ffc949;
  font-weight: bold;
  font-style: normal;
}

.smile::after {
  content: "😁";
}

.colour-white {
  color: #fff;
}

.colour-red {
  background-color: darkred;
}

.underline {
  text-decoration: underline 3px orangered;
  text-underline-offset: 3px;
}

.dark-background {
  background-color: rgba(0, 0, 0, 0.4);
}

li.dark-background::marker {
  font-weight: 500;
}

.border-right {
  font-weight: bold;
}

.btn-bank {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4em;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20ch, 1fr));
}

.explanation {
  min-height: 5em;
}

table.first,
.first th,
.first td {
  /* border: solid 1px black; */
  border-collapse: collapse;
  /* background: var(--light-grey); */
}

.first td,
.first th {
  padding: 0 0.4em;
}

.first tr:nth-child(even) td {
  /* background-color:#aaa; */
}

.first tr:nth-child(2) > td:after {
  content: "a";
}

.first tr:nth-child(3) > td:after {
  content: "b";
}

.first tr:nth-child(4) > td:after {
  content: "c";
}

.first tr:nth-child(5) > td:after {
  content: "d";
}

.first tr:nth-child(6) > td:before {
  content: "last ";
}

.first tr:nth-child(4) > td:nth-child(3) {
  color: red;
}

table.other-pseudo {
  background-color: var(--table-bg);
}

table.other-pseudo,
.other-pseudo td {
  border-collapse: collapse;
  border: solid 1px var(--table-border);
}

.other-pseudo td {
  padding: 0.5em;
  /* font-size: .75em; */
  vertical-align: top;
}

.other-pseudo tr > td > strong,
.other-pseudo tr > td:first-child {
  color: var(--table-code);
  font-family: "Source Code Pro", "courier new", courier, monospace;
  font-weight: normal;
}

.other-pseudo tr > td:first-child {
  min-width: 40%;
}

.other-pseudo tr:nth-child(even) td {
  background: var(--table-stripe);
}

.table-title {
  margin-top: 3em;
  font-weight: bold;
}

.wrap {
  width: 50%;
  padding: 0.1em 1em;
  font-size: 0.9em;
  background-color: var(--light-grey);
  margin-bottom: 4.5em;
  border-radius: 15px;
}

.wrap h4,
.wrap h5 {
  font-family: "segoe ui", sans-serif;
  margin: 0.5em auto;
}

.wrap1 p:nth-child(3) {
  color: fuchsia;
}

.wrap2 h5:nth-child(3) {
  color: fuchsia;
}

.wrap3 p:nth-of-type(3) {
  color: fuchsia;
}

.leap li {
  display: inline-block;
  padding: 1px 6px;
  margin-right: 1em;
}

.leap {
  column-count: 8;
}

.leap li:nth-child(4n+2) {
  background: var(--light-grey);
}