body {min-width: 100vw; min-height: 100vh; background: url("img/rachel_ingame.jpg") center center no-repeat; background-size: cover; color: #000; font-family: Tahoma, sans-serif; cursor: url("img/cursor.png"), auto; scrollbar-width: thin; scrollbar-color: #9cf #fff; overflow-x: hidden; font-size: 0.9em}
a,label,audio,summary {cursor: url("img/cursor_link.png"), auto}
body.iframe {background: none}
nav.main {}
header.main {text-shadow: 0 1px #fff, 1px 0 #fff, 0 -1px #fff, -1px 0 #fff; font-family: Verdana, sans-serif; margin-left: 1em}
nav.home {display: inline-block}
h1,h2,h3,h4,h5,h6 {font-size: 1em; display: inline; font-weight: normal}
span.character,label.character {display: inline-block;text-align: center; background: #fff; border-radius: 7px; font-family: Verdana, sans-serif; font-size: 0.8em; line-height: 2em; border: 2px solid #aaa}
span.character:hover,label.character:hover,input.character:checked + label {background: #cdf}
header {background: url("ui/header_bg.png") repeat-x; height: 16px}
header:not(.main):before {content: url("ui/button.png"); margin: 0 0.3em}
header.main {background: none}
header.main img {height: 100px}
span.character:hover {cursor: not-allowed}
main .skills,main .items,main .info,main .profile,main .backstory,main .gallery,main .options,.kafra .storage,input#storage2_1:checked ~ section:not([aria-labelledby="storage2_1"]),input#storage2_2:checked ~ section:not([aria-labelledby="storage2_2"]),input#storage2_3:checked ~ section:not([aria-labelledby="storage2_3"]) {display: none}
input.info:checked ~ main .info,input.skill:checked ~ main .skills,input.item:checked ~ main .items,input.profile:checked ~ main .profile,input.backstory:checked ~ main .backstory,input.gallery:checked ~ main .gallery,input.item:checked ~ main .items,input.options:checked ~ main .options,.kafra input#storage1:checked ~ .storage {display: block}
body > input,.kafra input {position: absolute; top: -9999px; left: -9999px}
div.info,section.skills,section.items,section.character,section.storage,section.profile,section.backstory,section.options,.kafra .storage {background: #fff}
.info .show_equip:before {content: "\2610"; display: inline-block; margin-right: 0.42em; color: #999}
audio,section.character,section.info,section.skills {width: 100%}
section.profile,section.backstory {resize: both}
div.character {text-align: center;}
div.kafra {}
label.kafra span:after {content: url("img/cooleventcorpstaff.png"); display: inline}
body:has() {}
@media screen and (min-width: 599px) {
body {display: grid; grid-template-rows: auto auto auto auto 1fr auto auto; grid-template-columns: 69px 69px 69px 69px 1fr auto; overflow-y: hidden; max-height: 100vh; max-width: 100vw}
nav.home {grid-row: 1; grid-column: 1 / 5}
header.main {grid-row: 1 / 5; grid-column: 5 / 8}
section.character {grid-row: 2; grid-column: 1 / 5}
.info {grid-row: 3; grid-column: 1}
.skill {grid-row: 3; grid-column: 2}
.item {grid-row: 3; grid-column: 3}
.map {grid-row: 3; grid-column: 4}
.profile {grid-row: 4 /5; grid-column: 1}
.backstory {grid-row: 4; grid-column: 2}
.gallery {grid-row: 4; grid-column: 3}
.option {grid-row: 4; grid-column: 4}
main {grid-row: 5; grid-column: 1 / 7; position: relative}
footer {grid-row: 7; grid-column: 1 / 6}
label.kafra {position: absolute; bottom: 0; right: 0; padding: 1em}
div.character {position: fixed; top: 50%; left: 50%; margin-top: -75px}
section[id] .skills {float: right; width: 300px}
section[id] .skills, .profile, .backstory{overflow: auto; resize: both; min-width: 200px; min-height: 200px; max-width: 500px; max-height: 500px; z-index: 3;}
.kafra {text-align: right}
div.storage {text-align: left; max-width: 400px; min-height: 200px; max-height: 500px; resize: vertical}
input.info:checked ~ main .info,input.skill:checked ~ main .skills,input.item:checked ~ main .items,input.profile:checked ~ main .profile,input.backstory:checked ~ main .backstory,input.gallery:checked ~ main .gallery,input.item:checked ~ main .items,input.options:checked ~ main .options,.kafra input#storage1:checked ~ .storage {display: inline-block}
section.options {max-height: 300px; overflow-y: auto; resize: both}
}