html {color: #ccf; cursor: url("img/arr-pointer.cur"), auto}
body {background: url("img/david-frasheski-ishgard2.jpg") center center no-repeat fixed #000; background-size: cover}
body.nav {background: transparent; overflow-x: hidden; overflow-y: scroll}
.home li,.main li {display: inline-block}
.layout > header, nav.main, main,footer > span,.gallery button {background: rgba(12,0,42,0.7); border: 3px outset #09c; border-radius: 1em}
footer > span {border-radius: 1em}
.layout > header small,.layout > header q, footer > span {display: block}
a {cursor: alias; color: #0ff}
p,figcaption,h1,h2,h3,ul:not(.gallery) li {cursor: url("img/arr-text.cur"), auto}
header p {font-size: 0.8em}
h1,h2,h3,h4 {display: inline-block}
h1 {font-size: 3em}
h2 {font-size: 2em}
h3,.pronouns {font-size: 1.5em}
small {cursor: url("img/arr-small-text.cur"), auto; color: #99f}
a:hover,a:focus {color: #fff; cursor: url("img/arr-link.cur"), auto}
.gallery a[id] {cursor: url("img/arr-pointer-magnifier.cur"), auto !important}
.gallery a[id]:target ~ div.drag-to-scroll {cursor: url("img/arr-move.cur"), auto}
.gallery button,.gallery button a,.gallery a[id]:target ~ div .imglink {cursor: url("img/arr-pointer.cur"), auto}
details summary,.gallery a[id],button a {cursor: help}
header, footer {text-align: center}
header,main,nav.main,main > article > div,main > section > div {margin: 0 1em 1em}
.profile {margin: 0 1em 1em 0}
footer {font-size: 0.8em}
footer > span {padding: 0 1em}
h1,h2,h3,h4,.pronouns,ul.profile li > span:first-child {color: #fff; font-family: "woodgod", sans-serif}
h1:before {content: url("img/CarbuncleFF6_small_flipped.png"); display: inline-block;}
h1:after {content:url("img/CarbuncleFF6_small.png"); display: inline-block}
body.nav ul:last-of-type:after {content:url("img/Carbuncle_from_FFBE_enemy_sprite.png"); display: block; text-align: center; margin-top: 1em}
.jobs {text-align: center; white-space: pre-wrap; margin-top: 1em}
.jobs img {height: 2em}
.spoilers:hover {cursor: url("img/arr-pointer-help-2.cur"), auto}
.gallery button a {display: inline-block;padding: 0.5em; color: #0ff; text-decoration: none}
@media screen and (min-width: 1000px) and (min-height: 300px) {
  nav.main {height: 100%;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}
  nav.main > iframe {height: 100%;-moz-box-flex: 1;-webkit-box-flex: 1;-webkit-flex-grow: 1;-ms-flex-positive: 1;flex-grow: 1}
  ul.profile {float: left}
  footer > span {display: inline-block}
  @supports (display: grid) {
    html,body {overflow-x: hidden; overflow-y: hidden}
    .layout {display: grid; grid-template-rows: auto auto 1fr auto; grid-template-columns: 300px 1fr; overflow-x: hidden; overflow-y: hidden; margin-bottom: 1em; max-height: 100vh; width: 100vw}
    nav.home {grid-row: 1 / 2; grid-column: 1 / 3}
    nav.main {grid-row: 2 / 4; grid-column: 1 / 2; margin: 0 1em}
    .layout > header {grid-row: 2 / 3; grid-column: 2 / 3}
    main {grid-row: 3 / 4; grid-column: 2 / 3; overflow-y: scroll; padding-top: 1em}
    footer {grid-row: 4 / 5; grid-column: 1 / 3; margin-top: 1em}
    main, .layout > header {margin: 0 1em 0 0}
}}