:root {
    color-scheme: light dark;
    
    --color-primary: #CC00B9;
    --color-selection: #CC00B9;
    --color-background: #FFF;
    --color-foreground: #000;

    --image-external: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTEiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjAgMCAxMSAxMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzUwMV8xNCkiPgo8cGF0aCBkPSJNMTAuMzE4NyAwSDYuMzY3MTJDNS45NTgzMyAwIDUuNjg1ODEgMC4yODIzNTMgNS42ODU4MSAwLjcwNTg4MkM1LjY4NTgxIDEuMTI5NDEgNS45NTgzMyAxLjQxMTc2IDYuMzY3MTIgMS40MTE3Nkg4LjY4MzU2TDMuNDM3NSA2Ljc3NjQ3TDQuNDU5NDYgNy43NjQ3MUw5LjYzNzM5IDIuNFY0LjhDOS42MzczOSA1LjIyMzUzIDkuOTA5OTEgNS41MDU4OCAxMC4zMTg3IDUuNTA1ODhDMTAuNzI3NSA1LjUwNTg4IDExIDUuMjIzNTMgMTEgNC44VjAuNzA1ODgyQzExIDAuMjgyMzUzIDEwLjY1OTMgMCAxMC4zMTg3IDBaIiBmaWxsPSIjQ0MwMEI5Ii8+CjxwYXRoIGQ9Ik04LjkzNzUgMTJIMFYyLjgyMzQ5SDQuMzMxMjVWNC4yMzUyNUgxLjM3NVYxMC41ODgySDcuNTYyNVY3LjA1ODc4SDguOTM3NVYxMloiIGZpbGw9IiNDQzAwQjkiLz4KPC9nPgo8ZGVmcz4KPGNsaXBQYXRoIGlkPSJjbGlwMF81MDFfMTQiPgo8cmVjdCB3aWR0aD0iMTEiIGhlaWdodD0iMTIiIGZpbGw9IndoaXRlIi8+CjwvY2xpcFBhdGg+CjwvZGVmcz4KPC9zdmc+Cg==);
}
@media screen and (prefers-color-scheme: dark) {
    :root {
        --color-primary: #F967E9;
        --color-selection: #F967E9;
        --color-background: #1C1C1C;
        --color-foreground: #FFF;

        --image-external: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTEiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjAgMCAxMSAxMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzUwMV8xOSkiPgo8cGF0aCBkPSJNMTAuMzE4NyAwSDYuMzY3MTJDNS45NTgzMyAwIDUuNjg1ODEgMC4yODIzNTMgNS42ODU4MSAwLjcwNTg4MkM1LjY4NTgxIDEuMTI5NDEgNS45NTgzMyAxLjQxMTc2IDYuMzY3MTIgMS40MTE3Nkg4LjY4MzU2TDMuNDM3NSA2Ljc3NjQ3TDQuNDU5NDYgNy43NjQ3MUw5LjYzNzM5IDIuNFY0LjhDOS42MzczOSA1LjIyMzUzIDkuOTA5OTEgNS41MDU4OCAxMC4zMTg3IDUuNTA1ODhDMTAuNzI3NSA1LjUwNTg4IDExIDUuMjIzNTMgMTEgNC44VjAuNzA1ODgyQzExIDAuMjgyMzUzIDEwLjY1OTMgMCAxMC4zMTg3IDBaIiBmaWxsPSIjRjk2N0U5Ii8+CjxwYXRoIGQ9Ik04LjkzNzUgMTJIMFYyLjgyMzQ5SDQuMzMxMjVWNC4yMzUyNUgxLjM3NVYxMC41ODgySDcuNTYyNVY3LjA1ODc4SDguOTM3NVYxMloiIGZpbGw9IiNGOTY3RTkiLz4KPC9nPgo8ZGVmcz4KPGNsaXBQYXRoIGlkPSJjbGlwMF81MDFfMTkiPgo8cmVjdCB3aWR0aD0iMTEiIGhlaWdodD0iMTIiIGZpbGw9IndoaXRlIi8+CjwvY2xpcFBhdGg+CjwvZGVmcz4KPC9zdmc+Cg==);
    }
}

::-moz-selection {
    background-color: var(--color-selection);
    color: var(--color-background);
}
::selection {
    background-color: var(--color-selection);
    color: var(--color-background);
}

* {
    box-sizing: inherit;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: none;
    word-break: break-word;
    font-family: 'Open Sans', sans-serif;
    line-height: 1.5;
}
*:focus {
    position: relative;
    z-index: 1000;
    outline: dotted;
    outline-color: var(--color-primary);
    outline-width: .2rem;
    outline-offset: .2rem;
}

body, html {
    font-size: max(18px, 1rem);
    color: var(--color-foreground);
    background-color: var(--color-background);
    margin: 0;
}
html {
    font: -apple-system-body;
}

a {
    color: var(--color-primary);
    text-decoration: underline;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-color: var(--color-primary);
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}
a[href*='//']:not([href*='screenreader.app']):not([class*='badge']) {
	background-image: var(--image-external);
    background-size: 0.75em 0.75em;
    background-repeat: no-repeat;
    background-position: right;
    padding-right: 1em;
}
a:hover {
    text-decoration: none;
}

h1, h2, h3, h4, h5, h6 {
    padding: 0;
    margin: 0.5em 0 0 0;
    font-weight: bold;
}
h1 {
    font-size: 2rem;
    margin-top: 0;
}
h2 {
    font-size: 1.5rem;
}

p {
    margin: 0 0 1em 0;
}

hr {
  margin: 1em 0;
}

.container {
    max-width: 750px;
    margin: 0 auto;
    padding: 1em;
}

.center {
  text-align: center;
}

.logo {
  max-width: 100%;
  max-height: 3em;
}

.screenshot {
  display: block;
  max-width: 100%;
  max-height: 50vh;
  margin: 1em auto;
}

.clear {
  overflow: hidden;
}

.badge {
    display: inline-block;
    margin: 0.5em 0.5em 0.5em 0;
    padding: 1em;
    background-color: #000;
    color: #fff;
    border: .2rem solid #fff;
    border-radius: 1em;
    font-weight: 600;
    text-decoration: none;
}
.badge:hover, .badge:active {
    text-decoration: underline;
}
.badge:before {
    content: '';
    padding: 1.25em;
    background-size: 2em;
    background-repeat: no-repeat;
    background-position: left;
    border-radius: 1em;
}
.badge.android:before {
    background-image: url('/assets/android.svg');
}
.badge.ios:before {
    background-image: url('/assets/ios.svg');
}

.youtube {
  aspect-ratio: 16 / 9;
  width: 100%;
  max-height: 50vh;
  height: 100vw;
  margin: 1em 0;
}

@media only screen and (min-width: 750px) {    
  .screenshot {
    max-width: 33%;
    max-height: 100vh;
    float: right;
    margin: 1em 0 1em 1em;
  }
}

@supports (aspect-ratio: auto) {
  .youtube {
    aspect-ratio: 16 / 9;
    height: auto;
  }
}