:root {
    --huzzah: #85c865;
}
img, video {
    opacity: 1.0;
}
header {
    padding: 1em 5em;
}
header > a > img {
    width: 300px;
    float: left;
    position: relative;
    z-index: 10000;
}
header > nav {
    float: right;
    background-color: var(--accent-bg);
}
header > nav > a.btn {
    border: none;
    background: var(--accent);
    color: var(--bg) !important;
}
header > nav > a.btn:hover {
    color: var(--bg);
    filter: brightness(1.4);
}
header > #menu_btn {
    position: absolute;
    visibility: hidden;
    z-index: -1111;
}
header > .menu_toggle, header .menu_close {
    cursor: pointer;
    display: none;
    font-size: x-large;
    float: right;
}
header > .menu_toggle:hover, header .menu_close:hover {
    color: var(--accent);
}
.trialing {
  font-size: smaller;
  background-color: #6b6b6b;
  float: right;
  text-align: right;
  padding: 0 1em;
  border-radius: 0 0 1em 1em;
}
footer {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    box-sizing: border-box;
    background: var(--accent-bg);
}
footer > nav {
    margin: 0 auto;
    display: grid;
    max-width: 45rem;
    gap: 0 1rem;
    grid-template-columns: repeat(auto-fit, minmax(7rem, auto));
}
footer > nav > a {
    border: none;
    text-transform: uppercase;
    white-space: nowrap;
    margin: 0;
}
form label {
    display: inline-block;
    width: 9em;
}
form textarea {
    width: 85%;
    resize: vertical;
}
.special > label {
    width: auto;
}
section.features, section.plans {
    display: grid;
    grid-gap: 1em;
    margin: 1.5em;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
section.features > div, section.plans > div {
    font-size: larger;
    padding: 1em;
    text-align: center;
    border: 2px solid var(--text);
    border-radius: 1em;
    background-color: var(--accent-bg);
}
section.plans > div {
    font-size: medium;
    text-align: left;
    position: relative;
    padding-bottom: 4rem;
}
section.plans > div > img {
    width: 100%;
}
section.plans > div > h4 {
    text-align: center;
    color: #6bc1d3;
}
section.plans > div > ul {
    padding-left: 1rem;
}
section.plans > div > .price {
    /*position: absolute;
    bottom: 0;*/
    width:70%;
    margin: 0 auto;
}
section.plans > div > .price > p {
    font-size: larger;
    font-weight: bold;
    text-align: center;
    color: #6bc1d3;
    margin: 0;
}
section.plans > div > .price > p > s {
    text-decoration-thickness: 15%;
    text-decoration-color: #b30000;
}
section.plans > div > .price > p.promo {
    font-size: x-large;
    color: #b30000;
}
section.plans > div > .price button {
    width: 100%;
}
#controls {
    overflow: auto;
}
#controls > div {
    display: inline-block;
}
#controls > #sort_control {
    float: right;
    text-align: right;
}
#controls #sort {
    width: auto;
}
section.book_detail {
    display: grid;
    grid-gap: 1em;
    margin: 1.5em;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    align-items: end;
}
section.book_detail.special {
    align-items: flex-start;
}
section.book_detail > div {
    padding: 0;
    text-align: center;
}
ul.booklist, ul.vendorlist{
    font-size: smaller;
    list-style: none;
    padding: 0;
}
ul.booklist > li, ul.vendorlist > li {
    display: inline-block;
    width: 225px;
    vertical-align: top;
    text-align: center;
    margin-right: 0.5em;
    margin-bottom: 2em;
    background: var(--accent-bg);
    border-radius: 1em;
}
ul.vendorlist > li {
    margin-right: 0.3em;
}
ul.booklist > li > p {
    text-align: left;
    padding: 1em;
}
ul.booklist > li > section {
    display: grid;
    grid-template-rows: 175px 70px 100px 70px;
    margin: 0.15em;
}
ul.booklist > li > section > div:first-child {
    border: 1px #212121 solid;
    border-width: 0 0 3px 0;
    padding-top: 0.5em;
}
ul.booklist > li > section > div:last-child {
    border: 1px #212121 solid;
    border-width: 3px 0 0 0;
}
ul.booklist > li > section span {
    white-space: nowrap;
}
ul.booklist img {
    max-width: 100px;
}
ul.vendorlist {
    text-align: center;
}
ul.vendorlist > li {
    width: 100%;
    padding: 0.5em;
    text-align: left;
}
ul.vendorlist > li li {
    list-style-type: none;
}
ul.vendorlist > li ul {
    padding-left: 0.5em;
}
figure > img {
    width: 100%;
}
figure > figcaption {
    position: relative;
    top: -2rem;
    font-size: .7rem;
    margin-bottom: 0;
    opacity: 0;
    transition: .5s ease;
    background-color: var(--accent-bg);
}
figure > figcaption:hover {
    opacity: .75;
}
img.book_cover {
    max-width: 200px;
}
details.log, details.log > pre, details.log > pre > code {
    font-size: smaller;
    background-color: var(--bg);
}
details.log > summary {
    padding-left: 1em;
    background-color: var(--bg);
}
button.more {
    padding: 0.1em 0.5em;
    margin: 0;
    float: right;
}
button.subtle {
    background: none !important;
    border: none;
    padding: 0 !important;
    color: var(--accent);
}
meter {
    width: 100%;
}
.dev {
    background-color: var(--important);
}
.accent {
    color: #6bc1d3;
}
.yay {
    color: var(--accent);
}
.huzzah {
    background-color: var(--huzzah);
}
.boo {
    background-color: var(--important);
}
.flash_message {
    padding: 0.5rem 1rem;
    margin: 1rem auto;
    background-color: var(--important);
    border-radius: 5px;
}
.paused {
    background-color: var(--important) !important;
    padding: 0.5rem 1rem;
}
li.paused {
    padding: 0;
}
.paused img {
    opacity: 25%;
}
.paused .special label, .paused .special input {
    opacity: 100%;
}
.left {
    text-align: left !important;
}
table {
    font-size: smaller;
    white-space: nowrap;
}
.table {
    display: table;
    font-size: smaller;
    white-space: nowrap;
    border-collapse: collapse;
    width: 100%;
    margin: 1.5rem 0;
}
table tr, .table > .tr, .table > form {
    display: table-row;
    background: var(--bg);
}
.table > .tr:nth-child(2n), .table > form:nth-child(2n) {
    background: var(--accent-bg);
}
.table .td, .table .th {
    display: table-cell;
}
.table .th {
    background: var(--accent-bg);
    font-weight: 700;
    border: 1px solid var(--border);
    text-align: left;
    padding: 0.5rem;
}
table th, .table .th {
    background: #344042;
    color: var(--accent);
}
.table .td {
    border: 1px solid var(--border);
    text-align: left;
    padding: 0.5rem;
}
#patience {
    display: none;
    /*display: grid;*/
    grid-gap: 1em;
    margin: 1.5em;
    grid-template-columns: 75px 1fr;
}
#patience > div > img {
    width: 75px;
}
input:read-only {
    color: #aaa;
    background-color: inherit;
}
[data-star] {
  text-align:left;
  font-style:normal;
  display:inline-block;
  position: relative;
  unicode-bidi: bidi-override;
}
[data-star]::before {
  display:block;
  /*content: '★★★★★';*/
  content: '☆☆☆☆☆';
  color: #e6bf00;
}
[data-star]::after {
  white-space:nowrap;
  position:absolute;
  top:0;
  left:0;
  content: '★★★★★';
  width: 0;
  color: #fffb00;
  overflow:hidden;
  height:100%;
}
[data-star^="0.1"]::after,[data-star^=".1"]::after{width:2%}
[data-star^="0.2"]::after,[data-star^=".2"]::after{width:4%}
[data-star^="0.3"]::after,[data-star^=".3"]::after{width:6%}
[data-star^="0.4"]::after,[data-star^=".4"]::after{width:8%}
[data-star^="0.5"]::after,[data-star^=".5"]::after{width:10%}
[data-star^="0.6"]::after,[data-star^=".6"]::after{width:12%}
[data-star^="0.7"]::after,[data-star^=".7"]::after{width:14%}
[data-star^="0.8"]::after,[data-star^=".8"]::after{width:16%}
[data-star^="0.9"]::after,[data-star^=".9"]::after{width:18%}
[data-star^="1"]::after{width:20%}
[data-star^="1.1"]::after{width:22%}
[data-star^="1.2"]::after{width:24%}
[data-star^="1.3"]::after{width:26%}
[data-star^="1.4"]::after{width:28%}
[data-star^="1.5"]::after{width:30%}
[data-star^="1.6"]::after{width:32%}
[data-star^="1.7"]::after{width:34%}
[data-star^="1.8"]::after{width:36%}
[data-star^="1.9"]::after{width:38%}
[data-star^="2"]::after{width:40%}
[data-star^="2.1"]::after{width:42%}
[data-star^="2.2"]::after{width:44%}
[data-star^="2.3"]::after{width:46%}
[data-star^="2.4"]::after{width:48%}
[data-star^="2.5"]::after{width:50%}
[data-star^="2.6"]::after{width:52%}
[data-star^="2.7"]::after{width:54%}
[data-star^="2.8"]::after{width:56%}
[data-star^="2.9"]::after{width:58%}
[data-star^="3"]::after{width:60%}
[data-star^="3.1"]::after{width:62%}
[data-star^="3.2"]::after{width:64%}
[data-star^="3.3"]::after{width:66%}
[data-star^="3.4"]::after{width:68%}
[data-star^="3.5"]::after{width:70%}
[data-star^="3.6"]::after{width:72%}
[data-star^="3.7"]::after{width:74%}
[data-star^="3.8"]::after{width:76%}
[data-star^="3.9"]::after{width:78%}
[data-star^="4"]::after{width:80%}
[data-star^="4.1"]::after{width:82%}
[data-star^="4.2"]::after{width:84%}
[data-star^="4.3"]::after{width:86%}
[data-star^="4.4"]::after{width:88%}
[data-star^="4.5"]::after{width:90%}
[data-star^="4.6"]::after{width:92%}
[data-star^="4.7"]::after{width:94%}
[data-star^="4.8"]::after{width:96%}
[data-star^="4.9"]::after{width:98%}
[data-star^="5"]::after{width:100%}
@media (prefers-color-scheme: dark) {
    :root {
        --accent: #e6c100;
        --important: #372222;
        --huzzah: #467b2d;
    }
}
@media (prefers-color-scheme: light) {
    :root {
        --accent: #366069;
        --important: #e89a9a;
        --huzzah: #85c865;
    }
    table th, .table .th {
        background: #b6d2d7;
    }
}
@media only screen and (max-width: 768px) {
    header {
        padding: 0.5em;
    }
    header > a > img {
        width: 75%;
    }
    header > .menu_toggle, header .menu_close {
        display: block;
    }
    header .menu_close {
        position: absolute;
        top: 0.25em;
        right: 0.35em;
    }
    header > nav {
        position: fixed;
        width: 100%;
        height: auto;
        top: -100%;
        left: 0;
        z-index: 1000;
        padding-top: 4rem;
        border-bottom: 1px solid var(--border);
        transition: 1s;
    }
    header > nav > a {
        width: 80%;
    }
    header > #menu_btn:checked ~ nav {
        top: 0;
    }
    form textarea {
        width: 100%;
        height: 15em;
    }
    section.hero {
        padding: 6em 0.5em;
    }
    ul.booklist > li, ul.vendorlist > li {
        width: 90%;
    }
}