body {overflow-x: hidden; min-height: 100vh}
html {background: url("/img/bottom-deco.png") repeat-x bottom 0 right 0 fixed, url("/img/the_dream_forest_by_mahojit.jpg") no-repeat fixed #000; background-size: auto, cover}
header,.music_player .music,.h1,main > article > section > header,.music_player div.lyrics {text-align: center}
nav.home,.music_player .playlist header small {text-align: left}
nav.home ul, nav.home li,.main .h1,main > article > section > header > h2,main > article > section > header > span {display: inline-block}
h1,h2,h3,h4,h5,h6,[aria-label="pronouns"] {font-family: "woodgod"}
h1,.main h2,h3,h4 {color: #eef; text-shadow: 1px 1px #90f}
div.main {margin: 0 1em}
.sidebar,.main .h1,main,footer span {background: rgba(12,0,42,0.7); border: #09c 1px dotted; border-radius: 1em}
html.music_player {background: transparent; overflow-y: scroll; overflow-x: hidden}
main {margin: 0 1em}
main > article > section[id] > header, .music_player .playlist:before,.music_player .playlist:after,.sidebar section+section:before, nav.sidebar > section:last-child:after, .info_grid > div {background: url("/template/img/bgs/stars_constellations_transparent.gif") repeat fixed, url("/img/misc/anim_disabled/bg18_2.png") repeat fixed, url("/template/img/spacebg_transparent.png") repeat fixed, url("/template/img/bgs/stars.gif") repeat fixed}
main > article > section[id] > header, .music_player .playlist:before,.music_player .playlist:after,.sidebar section+section:before, nav.sidebar > section:last-child:after {content: ""; display: block; width: 100%; border-top: #09c 1px dotted; border-bottom: #09c 1px dotted}
.music_player .playlist:before,.music_player .playlist:after {margin-top: 0; border-top: 0}
.music_player .playlist:before,.music_player .playlist:after,.sidebar section+section:before, nav.sidebar > section:last-child:after {background: url("/template/img/bgs/stars_constellations_transparent.gif") repeat fixed, url("/img/misc/anim_disabled/bg18_2.png") repeat fixed, url("/template/img/bgs/bgrnd2_transparent.png") repeat fixed, url("/template/img/spacebg_transparent.png") repeat fixed, url("/template/img/bgs/stars.gif") repeat fixed; height: 1em}
.music_player .playlist:before,.music_player .playlist:after {margin-top: 0; border-top: 0}
.sidebar section+section, .sidebar section+section:before, nav.sidebar > section:last-child:after, main > article > section[id] > header:first-child:after {margin-top: 0}
.music_player header {border-bottom: 0}
.main .h1,main > article > section > header > span,footer span {padding: 0 1em}
.wrapper {padding: 1em}
.sidebar {width: 100%}
.info_grid > div {text-align: center; display: block; max-height: 350px; overflow-y: auto; overflow-x: hidden; border: #09c 1px dotted; border-radius: 1em; margin: 0 0 0.5em; width: 100%}
.info_grid header p,.sidebar header p {font-size: 0.8em}
h2,nav.sidebar h2,h3 {font-size: 1.5em}
.main h2,[aria-label="pronouns"] {font-size: 1.75em}
.main > section > header,.main .h1 {margin-bottom: 1em}
h1 {font-size: 3em}
.main_nav section+section {margin-top: 0.5em}
.main_nav header {text-align: left; font-size: 1em}
.grid {margin-top: 1em}
audio {width: 100%}
.music_player > iframe {width: 100%; height: 100vh; border: 0}
.music_player h3,.music_player h4, html.music_player .playlist ul,.music_player .lyrics,.music_player .info {font-family: "pixel"}
.music_player h3,.music_player h4 {color: #0ff; text-shadow: 1px 1px #60f; font-size: 1em}
.music_player .music_wrapper h3 {font-size: 1.5em}
.playlist h3,.music_player h4 {text-shadow: none}
.music_player p {font-size: 0.8em}
.music_player small {font-size: 0.69em}
.music_player div.info, .music_player .playlist ul,.music_player div.lyrics {display: block; overflow-x: hidden; overflow-y: scroll; scrollbar-width: thin; scrollbar-color: #069 #000; border-top: #09c 1px dotted; border-bottom: #09c 1px dotted}
.music_player div.info, .music_player div.lyrics {padding: 0 1em; height: 150px; padding: 0 1em; color: #fff; background: url("/template/img/bgs/Button_BG_Transparent.png") repeat-y; background-size: 100% 150px}
.music_player .playlist ul {height: 200px; text-decoration: none; background: url("/template/img/bgs/Button_BG_Transparent.png") repeat-y; background-size: 100% 200px; overflow-x: scroll}
.music_player section[id],.music_player section[id]:target ~ section,input.lyrics:checked ~ div:not(.lyrics),input.info:checked ~ div:not(.info) {display: none}
.music_player section[id]:target,.music_player .music small, .music_player .playlist header small {display: block}
.playlist small {color: #ccf}
.playlist input {display: inline}
.playlist a span[aria-label]:before {content: ""; height: 1em; width: 1em; background: url("/template/img/list/star_bullet.png") no-repeat 0 0; background-size: 100%; display: inline-block; margin-left: -1.5em}
.music_player a {cursor: url("/template/img/ddr_help.png"), help; padding: 0 0.5em}
.music_player .playlist ul a {padding: 0 0.5em 0 1.5em; white-space: nowrap; width: 300%; height: 1.25em}
.music_player .music:before {content: ""; display: block; height: 53px; background: url("/img/misc/anim_disabled/0.png") no-repeat center center #000; background-size: contain; filter: hue-rotate(123deg); -webkit-filter: hue-rotate(123deg)}
/* .music_player .playlist:before {content: ""; display: block; height: 20px; background: url("/template/img/dividers/linemusic02.gif") repeat-x center center #000} */
@media screen and (min-height: 500px) and (min-width: 1250px) {
  .info_grid {overflow-y: auto; overflow-x: hidden; border-right: #09c 1px dotted; border-top: #09c 1px dotted; border-radius: 1em 0 0 1em}
  .info_grid > div {width: 350px; scrollbar-width: thin}
  section.music_player {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}
  .music_player > iframe {height: 100%;-moz-box-flex: 1;-webkit-box-flex: 1;-webkit-flex-grow: 1;-ms-flex-positive: 1;flex-grow: 1}
  /*
  section.music_player {display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex; min-height: 0;width: 100%; height: 100%; -webkit-flex-direction: column;-ms-flex-direction: column;flex-direction:column}
  section.music_player > iframe {-webkit-flex-grow: 1;-ms-flex-positive: 1;flex-grow: 1; overflow-y: auto;height: 100%} */
  @supports (display: grid) {
    html {overflow-x: hidden; overflow-y: hidden}
    body:not(.musicbox) {display: grid; grid-template-rows: auto 1fr auto; grid-template-columns: 300px auto 300px; min-width: 0; height: 100vh; width: 100vw; overflow-x: hidden; overflow-y: hidden;}
    header.main {grid-row: 1 / 2; grid-column: 1 / 4}
    nav.sidebar {float: none; grid-row: 2 / 3; grid-column: 1 / 2; overflow-y: scroll}
    main {grid-row: 2 / 3; grid-column: 2 / 3; overflow-y: scroll}
    footer {grid-row: 3 / 4; grid-column: 1 / 4}
    aside.sidebar {grid-row: 2 / 3; grid-column: 3 / 4;overflow-y: hidden; overflow-x: hidden}
    .info_grid_wrapper {display: grid; grid-template-rows: auto; grid-template-columns: 375px auto}
    .info_grid_wrapper .info {grid-column: 2 / 3; grid-row: 1 / 2; margin-left: 1em}
    .info_grid {grid-column: 1 / 2; grid-row: 1 / 2; max-height: 100vh}
    main > article > section[id] {min-height: 100vh}
}}
@media screen and (prefers-reduced-motion: no-preference) {
  /* .music_player .visualizer {border-image: url("/template/img/dividers/an_colorbar.gif") 1 stretch} */
  .music_player .music:before {background: url("/img/misc/anim/0.gif") no-repeat center center; background-size: contain}
  .playlist a:hover span[aria-label]:after {background: url("/template/img/list/silver_star.gif") no-repeat 0 0; background-size: 100%}
  main > article > section[id] > header, .music_player .playlist:before,.music_player .playlist:after,.sidebar section+section:before, nav.sidebar > section:last-child:after, .info_grid > div {background: url("/template/img/bgs/stars_constellations_transparent.gif") repeat fixed, url("/img/misc/anim_disabled/bg18_2.png") repeat fixed, url("/template/img/spacebg_transparent.gif") repeat fixed, url("/template/img/bgs/stars.gif") repeat fixed}
  .music_player .playlist:before,.music_player .playlist:after,.sidebar section+section:before, nav.sidebar > section:last-child:after {background: url("/template/img/bgs/stars_constellations_transparent.gif") repeat fixed, url("/img/misc/anim_disabled/bg18_2.png") repeat fixed, url("/template/img/bgs/bgrnd2_transparent.png") repeat fixed, url("/template/img/spacebg_transparent.gif") repeat fixed, url("/template/img/bgs/stars.gif") repeat fixed; animation: diag-bg 3000s linear infinite}
  .music_player .playlist:before,.music_player .playlist:after {animation: diag-bg 900s linear infinite}
}
@-webkit-keyframes diag-bg {to {background-position: -200% -200%}}
@keyframes diag-bg {to {background-position: -200% -200%}}