*{-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;padding: 0;margin: 0}
@font-face {font-family: "title";src: url("/template/fonts/header.eot?") format("embedded-opentype"),url("/template/fonts/header.woff") format("woff"),url("/template/fonts/header.woff2") format("woff2"),url("/template/fonts/header.ttf") format("truetype"),url("/template/fonts/header.svg") format("svg");}
@font-face {font-family: "cursive";src: url("/template/fonts/cursive.eot?") format("embedded-opentype"),url("/template/fonts/cursive.woff") format("woff"),url("/template/fonts/cursive.woff2") format("woff2"),url("/template/fonts/cursive.ttf") format("truetype"),url("/template/fonts/cursive.svg") format("svg");}
@font-face {font-family: "darnassian";src: url("/template/fonts/DarnassianRunes-Regular_2.woff") format("woff"), url("/template/fonts/DarnassianRunes-Regular_2.ttf") format("truetype")}
@font-face {font-family: "journal";src: url("/template/fonts/journal.woff") format("woff"), url("/template/fonts/journal.ttf") format("truetype")}
@font-face {font-family: "half-elven";src: url("/template/fonts/HalfElven.ttf") format("truetype")}
@font-face {font-family: "pixel";src: url("/template/fonts/RoentgenNbp.woff") format("woff"), url("/template/fonts/RoentgenNbp.ttf") format("truetype")}
@font-face {font-family: "pixel-small";src: url("/template/fonts/smallest_pixel-7.woff") format("woff"), url("/template/fonts/smallest_pixel-7.ttf") format("truetype")}
@font-face {font-family: "nightsky";src: url("/template/fonts/nightsky.woff") format("woff"), url("/template/fonts/nightsky.ttf") format("truetype")}
@font-face {font-family: "shalassian";src: url("/template/fonts/ShalassianFont-Regular.woff") format("woff"), url("/template/fonts/ShalassianFont-Regular.ttf") format("truetype")}
@font-face {font-family: "starshine";src: url("/template/fonts/starshine.ttf") format("truetype")}
@font-face {font-family: "wizardry";src: url("/template/fonts/wizardry.ttf") format("truetype")}
@font-face {font-family: "stamp";src: url("/template/fonts/stamp.ttf") format("truetype")}
@font-face {font-family: "thalassian";src: url("/template/fonts/Thalassian_Font.woff") format("woff"), url("/template/fonts/Thalassian_Font.ttf") format("truetype")}
@font-face {font-family: "trauma";src: url("/template/fonts/TraumaRegular.otf")}
@font-face {font-family: "typewriter";src: url("/template/fonts/typewriter.ttf") format("truetype")}
@font-face {font-family: "woodgod";src: url("/template/fonts/WoodgodRegular.ttf") format("truetype")}
html {font-size: 1em; font-family: Verdana, sans-serif}
img:not(.interactable),hr,.disabled {pointer-events:none; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none;-ms-user-select: none;user-select: none;}
.disabled {cursor: not-allowed}
.kb,.sr {top:-9999px;left:-9999px;position: absolute;overflow: hidden; height: 0; width: 0}
img.emoji {max-height: 1em !important}
.imglink,nav.home ul,nav.home li {display: inline-block}
ul {list-style-type: none}
p+p {margin-top: 1em}
footer {font-size: 0.8em}
a.skip {position: fixed; top: -9999px; left: -9999px}
a.skip:focus {position: static}
.clearfix {content: "";white-space:pre;display: table;clear: both}
.spoilers {color: #000; background: #000}
.spoilers:hover, .spoilers:focus {color: #fff; cursor: help}
.desktop {display: none}
nav.home {text-align: left}
.gallery,footer {text-align: center}
.gallery small {display: block}
.gallery > li {width: 100%; max-width: 300px; display: inline-block; margin: 1em; vertical-align:top}
.gallery button,.gallery figure > a {display: none}
.gallery a[id] ~ div img {border: #0ff 1px dotted; border-radius: 1em}
ul.prideflags {text-align: center}
ul.prideflags li {display: inline}
ul.prideflags img {height: 23px; border: #0cf 1px solid}
ul.prideflags .main img {height: 50px}
ul.fav li:before {content: "\1F49C";color: #86e;margin: 0 -1.77em}
ul.yes li:before {content: "\2713" !important;color: #0F0;margin: 0 -1.59em !important;font-weight:bold;}
ul.maybe li:before {content: "!" !important;color: #FB0;margin: 0 -1.12em !important;font-weight: bold;}
ul.no li:before {content: "\2718" !important;margin: 0 -1.42em !important}
iframe {border: 0; width: 100%}
.no_url {height: 100vh; width: 100vw}
.wrapper {height: 100%; width: 100%}
.wrapper audio {width: 100%}
.no_url .wrapper iframe {}
.no_url {height: 100vh; overflow: hidden}
.no_url .wrapper {display:-moz-box;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-moz-box-orient:vertical;-webkit-box-orient:vertical;-webkit-flex-direction: column;-ms-flex-direction: column;flex-direction:column}
.no_url .wrapper iframe {-moz-box-flex: 1;-webkit-box-flex: 1;-webkit-flex-grow: 1;-ms-flex-positive: 1;flex-grow: 1}
#wa-logo {display: none !important} /* please trust me TinySynth creator i swear i'm not trying to erase the credit you deserve i'm just removing the default TinySynth credit display to replace it with my own custom one that links to the TinySynth github directly... */
@supports (object-fit: contain) {
.gallery figure {position: relative}
.gallery figure > a {display: block; cursor: zoom-in; width: 100%; height: 300px; position: absolute; z-index: 5}
.gallery a[id] ~ div img {height: 300px; width: 300px; object-fit: cover}
.gallery a[id]:target ~ div {position: fixed;z-index: 13;top: 0;right: 0;bottom: 0;left: 0; display: block;background: rgba(0, 0, 0, 0.8)}
.gallery a[id]:target ~ div.drag-to-scroll {overflow: auto; cursor: grab}
.gallery a[id]:target ~ div img {border: 0; border-radius: 0;min-width: 100vw; min-height: 100vh; object-fit:contain; padding: 1em} /* STEALED this from http://www.bram.us/2020/07/28/simple-image-gallery-with-display-grid-and-object-fit-cover/ and modified it to be BETTER because i am THE SMARTEST CODER IN THE ENTIRE UNIVERSE AND NO ONE'S EVER DONE IT LIKE ME BEFORE >:3 */
.gallery a[id]:target ~ div.drag-to-scroll img {height: auto; width: auto; object-fit: initial; padding: 0}
.gallery a[id]:target ~ .close {display: inline; position: fixed;z-index: 23; top: 1em; right: 1em; font-weight: bold; font-size: 1.2em}
.gallery a[id]:target ~ .next {display: inline; position: fixed;z-index: 23; top: 50%; right: 1em}
.gallery a[id]:target ~ .previous {display: inline; position: fixed;z-index: 23; top: 50%; left: 1em} /* yes i DO use uneven z-index numbers both for Autism Reasons and also to make anyone spying on my css Uncomfortable :3 */
.gallery button {background: transparent; border: 0}
.gallery button a {display: inline-block;padding: 0.5em; color: #ccf; text-decoration: none; border-radius: 0.5em; cursor: default}
.gallery img.top {object-position: 50% 0}
.gallery img.left {object-position: 100% 50%}
.gallery a[id]:target ~ div img.top,.gallery a[id]:target ~ div img.left {object-position: 50% 50%}
.gallery a[id]:target ~ div .imglink {display: block; cursor: default}
}
@media screen and (min-width: 750px) {
.gallery button a {font-size: 1.5em}
}