@charset "UTF-8";
:root {
  --foreground-1: #F2EFFF;
  --foreground-2: #E6DEFF;
  --background-1: #1F1731;
  --background-2: #2A2041;
  --dark-accent-1: #F99FB1;
  --dark-accent-2: #FAA56C;
  --dark-accent-3: #D2B83A;
  --dark-accent-4: #96C839;
  --dark-accent-5: #3BD18A;
  --dark-accent-6: #3ECDBF;
  --dark-accent-7: #41C8E5;
  --dark-accent-8: #98B9F8;
  --dark-accent-9: #D5A6F8;
  --dark-accent-10: #F99ADD;
  --dark-gray-1: #E2E2E2;
  --dark-gray-2: #C6C6C6;
  --dark-gray-3: #ABABAB;
  --light-accent-1: #8B123C;
  --light-accent-2: #6A3B11;
  --light-accent-3: #514610;
  --light-accent-4: #384D10;
  --light-accent-5: #115133;
  --light-accent-6: #124F49;
  --light-accent-7: #144D5A;
  --light-accent-8: #17477E;
  --light-accent-9: #6F1995;
  --light-accent-10: #81156A;
  --light-gray-1: #1B1B1B;
  --light-gray-2: #303030;
  --light-gray-3: #474747;
}

code[class*=language-] {
  color: var(--foreground-1);
}
code[class*=language-] .token.cdata, code[class*=language-] .token.comment, code[class*=language-] .token.doctype, code[class*=language-] .token.prolog {
  color: var(--dark-gray-3);
}
code[class*=language-] .token.punctuation {
  color: var(--dark-accent-5);
}
code[class*=language-] .token.namespace {
  opacity: 70%;
}
code[class*=language-] .token.boolean, code[class*=language-] .token.constant, code[class*=language-] .token.deleted, code[class*=language-] .token.number, code[class*=language-] .token.property, code[class*=language-] .token.symbol, code[class*=language-] .token.tag {
  color: var(--dark-accent-7);
}
code[class*=language-] .token.attr-name, code[class*=language-] .token.builtin, code[class*=language-] .token.char, code[class*=language-] .token.inserted, code[class*=language-] .token.selector, code[class*=language-] .token.string {
  color: var(--dark-accent-4);
}
code[class*=language-] .token.entity, code[class*=language-] .token.operator, code[class*=language-] .token.url {
  color: var(--dark-accent-5);
}
code[class*=language-] .token.atrule, code[class*=language-] .token.attr-value, code[class*=language-] .token.keyword {
  color: var(--dark-accent-5);
}
code[class*=language-] .token.class-name, code[class*=language-] .token.function {
  color: var(--dark-accent-6);
}
code[class*=language-] .token.important, code[class*=language-] .token.regex, code[class*=language-] .token.variable {
  color: var(--dark-accent-6);
}
code[class*=language-] .token.bold, code[class*=language-] .token.important {
  font-weight: bold;
}
code[class*=language-] .token.italic {
  font-style: italic;
}
code[class*=language-] .token.entity {
  cursor: help;
}

.language-css .token.string,
.style .token.string {
  color: var(--dark-accent-5);
}

html {
  font-size: 62.5%;
}

body {
  background-color: var(--background-1);
  color: var(--foreground-1);
  font-family: sans-serif;
  font-size: 2rem;
}

a,
a:visited {
  color: var(--dark-accent-7);
}
a:hover,
a:visited:hover {
  color: var(--dark-accent-4);
}
a[href^=http]:not(.hide-external), a.fake-external,
a:visited[href^=http]:not(.hide-external),
a:visited.fake-external {
  margin-right: 12px;
}
a[href^=http]:not(.hide-external)::after, a.fake-external::after,
a:visited[href^=http]:not(.hide-external)::after,
a:visited.fake-external::after {
  content: "↗";
  font-size: 1.5rem;
  position: absolute;
}

code {
  padding: 0 4px;
}

pre {
  padding: 16px;
  overflow: auto;
}

h1 {
  padding: 16px;
}

h1,
h2,
h3,
p,
pre {
  margin: 0;
}

li {
  margin-bottom: 8px;
}
li:last-child {
  margin-bottom: 0;
}

ol,
ul {
  margin: 0;
  margin-bottom: 8px;
  padding-left: 32px;
}
ol:last-child,
ul:last-child {
  margin-bottom: 0;
}
ol > li > ol,
ol > li > ul,
ul > li > ol,
ul > li > ul {
  margin-top: 8px;
}

section {
  background-color: var(--background-1);
}

ul {
  list-style-type: symbols(cyclic "♡" "♥");
}

#wrapper {
  margin: 0 16px;
}

@media (min-width: 900px) {
  #wrapper {
    margin: 0 auto;
    width: 900px;
  }
}
.light {
  background-color: var(--foreground-1);
  color: var(--background-1);
}
.light a,
.light a:visited {
  color: var(--light-accent-8);
}
.light a:hover,
.light a:visited:hover {
  color: var(--light-accent-10);
}

.border {
  border: 2px solid var(--foreground-1);
}

.divider {
  border-top: 2px solid var(--foreground-1);
  margin: 32px 0;
}

.monospace {
  font-family: monospace;
}

.spacer {
  margin-bottom: 32px;
}

.goals {
  border: 2px solid;
}
.goals h2 {
  padding: 16px;
}

.goal {
  padding: 16px;
}
.goal:nth-child(even) {
  background-color: var(--background-1);
  color: var(--foreground-1);
}
.goal:nth-child(odd) {
  background-color: var(--foreground-1);
  color: var(--background-1);
}

.goal-title {
  display: block;
  padding-bottom: 8px;
}

.cupcake-ipsum h2 {
  background-color: var(--foreground-1);
  color: var(--background-1);
  padding: 16px;
}
.cupcake-ipsum p {
  padding: 16px;
}

.dark-labels,
.light-labels,
.dark-outline-labels,
.light-outline-labels {
  display: flex;
  justify-content: space-between;
  padding: 16px;
  overflow-x: auto;
}
.dark-labels span,
.light-labels span,
.dark-outline-labels span,
.light-outline-labels span {
  font-family: monospace;
  font-weight: bold;
  margin-right: 8px;
  padding: 8px;
  text-align: center;
  width: 100px;
}
.dark-labels span:last-child,
.light-labels span:last-child,
.dark-outline-labels span:last-child,
.light-outline-labels span:last-child {
  margin-right: 0;
}

.dark-labels {
  border: 2px solid var(--foreground-1);
  color: var(--background-1);
}
.dark-labels span:nth-child(1) {
  background-color: var(--dark-accent-1);
}
.dark-labels span:nth-child(2) {
  background-color: var(--dark-accent-2);
}
.dark-labels span:nth-child(3) {
  background-color: var(--dark-accent-3);
}
.dark-labels span:nth-child(4) {
  background-color: var(--dark-accent-4);
}
.dark-labels span:nth-child(5) {
  background-color: var(--dark-accent-5);
}
.dark-labels span:nth-child(6) {
  background-color: var(--dark-accent-6);
}
.dark-labels span:nth-child(7) {
  background-color: var(--dark-accent-7);
}
.dark-labels span:nth-child(8) {
  background-color: var(--dark-accent-8);
}
.dark-labels span:nth-child(9) {
  background-color: var(--dark-accent-9);
}
.dark-labels span:nth-child(10) {
  background-color: var(--dark-accent-10);
}

.light-labels {
  background-color: var(--foreground-1);
}
.light-labels span:nth-child(1) {
  background-color: var(--light-accent-1);
}
.light-labels span:nth-child(2) {
  background-color: var(--light-accent-2);
}
.light-labels span:nth-child(3) {
  background-color: var(--light-accent-3);
}
.light-labels span:nth-child(4) {
  background-color: var(--light-accent-4);
}
.light-labels span:nth-child(5) {
  background-color: var(--light-accent-5);
}
.light-labels span:nth-child(6) {
  background-color: var(--light-accent-6);
}
.light-labels span:nth-child(7) {
  background-color: var(--light-accent-7);
}
.light-labels span:nth-child(8) {
  background-color: var(--light-accent-8);
}
.light-labels span:nth-child(9) {
  background-color: var(--light-accent-9);
}
.light-labels span:nth-child(10) {
  background-color: var(--light-accent-10);
}

.dark-outline-labels {
  border: 2px solid;
}
.dark-outline-labels span:nth-child(1) {
  border: 2px solid var(--dark-accent-1);
  box-shadow: 0 0 2px var(--dark-accent-1), inset 0 0 2px var(--dark-accent-1);
  color: var(--dark-accent-1);
  text-shadow: 0 0 2px var(--dark-accent-1);
}
.dark-outline-labels span:nth-child(2) {
  border: 2px solid var(--dark-accent-2);
  box-shadow: 0 0 2px var(--dark-accent-2), inset 0 0 2px var(--dark-accent-2);
  color: var(--dark-accent-2);
  text-shadow: 0 0 2px var(--dark-accent-2);
}
.dark-outline-labels span:nth-child(3) {
  border: 2px solid var(--dark-accent-3);
  box-shadow: 0 0 2px var(--dark-accent-3), inset 0 0 2px var(--dark-accent-3);
  color: var(--dark-accent-3);
  text-shadow: 0 0 2px var(--dark-accent-3);
}
.dark-outline-labels span:nth-child(4) {
  border: 2px solid var(--dark-accent-4);
  box-shadow: 0 0 2px var(--dark-accent-4), inset 0 0 2px var(--dark-accent-4);
  color: var(--dark-accent-4);
  text-shadow: 0 0 2px var(--dark-accent-4);
}
.dark-outline-labels span:nth-child(5) {
  border: 2px solid var(--dark-accent-5);
  box-shadow: 0 0 2px var(--dark-accent-5), inset 0 0 2px var(--dark-accent-5);
  color: var(--dark-accent-5);
  text-shadow: 0 0 2px var(--dark-accent-5);
}
.dark-outline-labels span:nth-child(6) {
  border: 2px solid var(--dark-accent-6);
  box-shadow: 0 0 2px var(--dark-accent-6), inset 0 0 2px var(--dark-accent-6);
  color: var(--dark-accent-6);
  text-shadow: 0 0 2px var(--dark-accent-6);
}
.dark-outline-labels span:nth-child(7) {
  border: 2px solid var(--dark-accent-7);
  box-shadow: 0 0 2px var(--dark-accent-7), inset 0 0 2px var(--dark-accent-7);
  color: var(--dark-accent-7);
  text-shadow: 0 0 2px var(--dark-accent-7);
}
.dark-outline-labels span:nth-child(8) {
  border: 2px solid var(--dark-accent-8);
  box-shadow: 0 0 2px var(--dark-accent-8), inset 0 0 2px var(--dark-accent-8);
  color: var(--dark-accent-8);
  text-shadow: 0 0 2px var(--dark-accent-8);
}
.dark-outline-labels span:nth-child(9) {
  border: 2px solid var(--dark-accent-9);
  box-shadow: 0 0 2px var(--dark-accent-9), inset 0 0 2px var(--dark-accent-9);
  color: var(--dark-accent-9);
  text-shadow: 0 0 2px var(--dark-accent-9);
}
.dark-outline-labels span:nth-child(10) {
  border: 2px solid var(--dark-accent-10);
  box-shadow: 0 0 2px var(--dark-accent-10), inset 0 0 2px var(--dark-accent-10);
  color: var(--dark-accent-10);
  text-shadow: 0 0 2px var(--dark-accent-10);
}

.light-outline-labels {
  background-color: var(--foreground-1);
}
.light-outline-labels span:nth-child(1) {
  border: 2px solid var(--light-accent-1);
  box-shadow: 0 0 2px var(--light-accent-1), inset 0 0 2px var(--light-accent-1);
  color: var(--light-accent-1);
  text-shadow: 0 0 2px var(--light-accent-1);
}
.light-outline-labels span:nth-child(2) {
  border: 2px solid var(--light-accent-2);
  box-shadow: 0 0 2px var(--light-accent-2), inset 0 0 2px var(--light-accent-2);
  color: var(--light-accent-2);
  text-shadow: 0 0 2px var(--light-accent-2);
}
.light-outline-labels span:nth-child(3) {
  border: 2px solid var(--light-accent-3);
  box-shadow: 0 0 2px var(--light-accent-3), inset 0 0 2px var(--light-accent-3);
  color: var(--light-accent-3);
  text-shadow: 0 0 2px var(--light-accent-3);
}
.light-outline-labels span:nth-child(4) {
  border: 2px solid var(--light-accent-4);
  box-shadow: 0 0 2px var(--light-accent-4), inset 0 0 2px var(--light-accent-4);
  color: var(--light-accent-4);
  text-shadow: 0 0 2px var(--light-accent-4);
}
.light-outline-labels span:nth-child(5) {
  border: 2px solid var(--light-accent-5);
  box-shadow: 0 0 2px var(--light-accent-5), inset 0 0 2px var(--light-accent-5);
  color: var(--light-accent-5);
  text-shadow: 0 0 2px var(--light-accent-5);
}
.light-outline-labels span:nth-child(6) {
  border: 2px solid var(--light-accent-6);
  box-shadow: 0 0 2px var(--light-accent-6), inset 0 0 2px var(--light-accent-6);
  color: var(--light-accent-6);
  text-shadow: 0 0 2px var(--light-accent-6);
}
.light-outline-labels span:nth-child(7) {
  border: 2px solid var(--light-accent-7);
  box-shadow: 0 0 2px var(--light-accent-7), inset 0 0 2px var(--light-accent-7);
  color: var(--light-accent-7);
  text-shadow: 0 0 2px var(--light-accent-7);
}
.light-outline-labels span:nth-child(8) {
  border: 2px solid var(--light-accent-8);
  box-shadow: 0 0 2px var(--light-accent-8), inset 0 0 2px var(--light-accent-8);
  color: var(--light-accent-8);
  text-shadow: 0 0 2px var(--light-accent-8);
}
.light-outline-labels span:nth-child(9) {
  border: 2px solid var(--light-accent-9);
  box-shadow: 0 0 2px var(--light-accent-9), inset 0 0 2px var(--light-accent-9);
  color: var(--light-accent-9);
  text-shadow: 0 0 2px var(--light-accent-9);
}
.light-outline-labels span:nth-child(10) {
  border: 2px solid var(--light-accent-10);
  box-shadow: 0 0 2px var(--light-accent-10), inset 0 0 2px var(--light-accent-10);
  color: var(--light-accent-10);
  text-shadow: 0 0 2px var(--light-accent-10);
}

.color {
  font-family: monospace;
  font-weight: bold;
}

.dark-rainbow,
.light-rainbow {
  padding: 16px;
  text-align: center;
}
.dark-rainbow p,
.light-rainbow p {
  padding: 16px 0;
}

.dark-rainbow p {
  background: linear-gradient(to right, var(--dark-accent-1), var(--dark-accent-2), var(--dark-accent-3), var(--dark-accent-4), var(--dark-accent-5), var(--dark-accent-6), var(--dark-accent-7), var(--dark-accent-8), var(--dark-accent-9), var(--dark-accent-10));
  color: var(--background-1);
}

.light-rainbow p {
  background: linear-gradient(to right, var(--light-accent-1), var(--light-accent-2), var(--light-accent-3), var(--light-accent-4), var(--light-accent-5), var(--light-accent-6), var(--light-accent-7), var(--light-accent-8), var(--light-accent-9), var(--light-accent-10));
  color: var(--foreground-1);
}

#variants h2 {
  padding: 16px;
}

#dark,
#light {
  padding: 16px;
}
#dark h3,
#light h3 {
  margin-bottom: 16px;
}
#dark p,
#light p {
  display: flex;
  margin-bottom: 2px;
  padding: 8px;
}
#dark p:last-child,
#light p:last-child {
  margin-bottom: 0;
}
#dark p .color,
#light p .color {
  margin-left: auto;
}

#dark {
  border: 2px solid var(--foreground-1);
}
#dark .foreground-primary {
  background-color: var(--foreground-1);
  color: var(--background-1);
}
#dark .foreground-secondary {
  background-color: var(--foreground-2);
  color: var(--background-1);
}
#dark .background-primary {
  background-color: var(--background-1);
  color: var(--foreground-1);
}
#dark .background-secondary {
  background-color: var(--background-2);
  color: var(--foreground-1);
}
#dark .accent-1 {
  background-color: var(--dark-accent-1);
  color: var(--background-1);
}
#dark .accent-2 {
  background-color: var(--dark-accent-2);
  color: var(--background-1);
}
#dark .accent-3 {
  background-color: var(--dark-accent-3);
  color: var(--background-1);
}
#dark .accent-4 {
  background-color: var(--dark-accent-4);
  color: var(--background-1);
}
#dark .accent-5 {
  background-color: var(--dark-accent-5);
  color: var(--background-1);
}
#dark .accent-6 {
  background-color: var(--dark-accent-6);
  color: var(--background-1);
}
#dark .accent-7 {
  background-color: var(--dark-accent-7);
  color: var(--background-1);
}
#dark .accent-8 {
  background-color: var(--dark-accent-8);
  color: var(--background-1);
}
#dark .accent-9 {
  background-color: var(--dark-accent-9);
  color: var(--background-1);
}
#dark .accent-10 {
  background-color: var(--dark-accent-10);
  color: var(--background-1);
}
#dark .gray-1 {
  background-color: var(--dark-gray-1);
  color: var(--background-1);
}
#dark .gray-2 {
  background-color: var(--dark-gray-2);
  color: var(--background-1);
}
#dark .gray-3 {
  background-color: var(--dark-gray-3);
  color: var(--background-1);
}

#light {
  background-color: var(--foreground-1);
  color: var(--background-1);
}
#light .foreground-primary {
  background-color: var(--background-1);
  color: var(--foreground-1);
}
#light .foreground-secondary {
  background-color: var(--background-2);
  color: var(--foreground-1);
}
#light .background-primary {
  background-color: var(--foreground-1);
  color: var(--background-1);
}
#light .background-secondary {
  background-color: var(--foreground-2);
  color: var(--background-1);
}
#light .accent-1 {
  background-color: var(--light-accent-1);
  color: var(--foreground-1);
}
#light .accent-2 {
  background-color: var(--light-accent-2);
  color: var(--foreground-1);
}
#light .accent-3 {
  background-color: var(--light-accent-3);
  color: var(--foreground-1);
}
#light .accent-4 {
  background-color: var(--light-accent-4);
  color: var(--foreground-1);
}
#light .accent-5 {
  background-color: var(--light-accent-5);
  color: var(--foreground-1);
}
#light .accent-6 {
  background-color: var(--light-accent-6);
  color: var(--foreground-1);
}
#light .accent-7 {
  background-color: var(--light-accent-7);
  color: var(--foreground-1);
}
#light .accent-8 {
  background-color: var(--light-accent-8);
  color: var(--foreground-1);
}
#light .accent-9 {
  background-color: var(--light-accent-9);
  color: var(--foreground-1);
}
#light .accent-10 {
  background-color: var(--light-accent-10);
  color: var(--foreground-1);
}
#light .gray-1 {
  background-color: var(--light-gray-1);
  color: var(--foreground-1);
}
#light .gray-2 {
  background-color: var(--light-gray-2);
  color: var(--foreground-1);
}
#light .gray-3 {
  background-color: var(--light-gray-3);
  color: var(--foreground-1);
}
#light .gray-4 {
  background-color: var(--light-gray-4);
  color: var(--foreground-1);
}

footer {
  display: flex;
  flex-direction: column;
  margin-bottom: 32px;
}
footer > div {
  display: flex;
  justify-content: center;
}
footer > div:first-of-type {
  align-items: center;
  margin-bottom: 8px;
}
footer > div:first-of-type a {
  align-items: center;
  color: var(--foreground-1);
  display: flex;
  text-decoration: none;
}
footer > div:first-of-type a:hover {
  color: var(--foreground-1);
}
footer > div:first-of-type img {
  height: 29px;
}

#get h2 {
  padding: 16px;
}
#get h3 {
  margin-bottom: 16px;
}
#get > div {
  padding: 16px;
}
#get ul {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
}
@media (min-width: 600px) {
  #get ul {
    grid-template-columns: repeat(2, 1fr);
    list-style-type: symbols(cyclic "♡" "♥" "♥" "♡");
  }
}

#attributions h2 {
  padding: 16px;
}
#attributions h3 {
  margin-bottom: 8px;
}
#attributions > div {
  padding: 16px;
}

#liberapay-button {
  display: flex;
  line-height: 0;
}

#get-love-page h3 {
  padding-bottom: 16px;
}
#get-love-page img {
  width: 100%;
}
#get-love-page p {
  margin-bottom: 8px;
}
#get-love-page p:last-child {
  margin-bottom: 0;
}
#get-love-page pre {
  background-color: var(--background-1);
}
#get-love-page .images-section > div {
  padding: 8px;
}
#get-love-page .is-dark {
  border: 2px solid var(--foreground-1);
  color: var(--foreground-1);
}
#get-love-page .is-dark code {
  background-color: var(--background-2);
}
#get-love-page .is-light {
  background-color: var(--foreground-1);
  color: var(--background-1);
}
#get-love-page .is-light a,
#get-love-page .is-light a:visited {
  color: var(--light-accent-8);
}
#get-love-page .is-light a:hover,
#get-love-page .is-light a:visited:hover {
  color: var(--light-accent-10);
}
#get-love-page .is-light code {
  background-color: var(--foreground-2);
}
#get-love-page .padded {
  padding: 16px;
}