@media screen { /*Magic Circle*/
  #magiccircle { /* Default (small) screens */ /*Medium screens*/ }
  #magiccircle * { box-sizing: content-box; }
  #magiccircle body { background: #002; color: #f9c2ff; text-align: center; font-size: 1.5em; font-family: serif; margin: 0; }
  #magiccircle main > div, #magiccircle main > section, #magiccircle nav li, #magiccircle main > .tagslist { background: rgba(0, 0, 34, 0.75); border: solid thin #f48bff; color: #f9c2ff; }
  #magiccircle main, #magiccircle figure { margin-left: 0em; padding-left: 0em; }
  #magiccircle h1 { margin: 0em; text-shadow: 0em 0em 0.2em #002, 0em 0em 0.2em #002, 0em 0em 0.2em #002, 0em 0em 0.2em #002, 0em 0em 0.2em #002, 0em 0em 0.5em #002, 0em 0em 0.5em #002; }
  #magiccircle figure#comic { margin: 0em; padding-top: 0em; text-align: center; border: none; border-bottom: solid thin #f48bff; }
  #magiccircle figure#comic img { margin: 0em; border: thin solid #f48bff; vertical-align: middle; }
  #magiccircle figcaption { margin-bottom: 0em; padding: 0.5em; }
  #magiccircle figure + .cominavbox { margin-top: 0em; border-top: none; margin-bottom: 1em; }
  #magiccircle figure + .cominavbox li { margin-top: 0em; padding: 0.5em; }
  #magiccircle .cominavbox, #magiccircle .cominavbox li { display: inline-block; padding: 0em; }
  #magiccircle p + p, #magiccircle li + li, #magiccircle div + div, #magiccircle section + section { margin-top: 0.5em; }
  #magiccircle #skippy { text-align: left; margin: 0em; }
  #magiccircle #skippy a, #magiccircle #skippy a:hover, #magiccircle #skippy a:visited { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
  #magiccircle #skippy a:active, #magiccircle #skippy a:focus { position: static; height: auto; width: auto; font-size: 1em; margin-top: 0em; color: #bbf; margin: 1em; outline: dotted medium #bbf; }
  #magiccircle nav { margin-bottom: 0em; }
  #magiccircle nav ul { margin: 0em; padding-left: 0em; }
  #magiccircle nav li { display: inline-block; padding: 0.5em; }
  #magiccircle nav li + li { margin-left: 1em; border: solid thin #f48bff; }
  #magiccircle nav a:link { text-decoration: none; }
  #magiccircle nav a:hover { text-decoration: underline; }
  #magiccircle header { margin-top: 0em; padding-top: 0em; }
  #magiccircle header img { margin-top: 0em; padding-top: 0em; display: inline; }
  #magiccircle main div { text-align: left; padding: 0.5em 0em 0.5em 0.2em; }
  #magiccircle .statline { font-weight: bold; }
  #magiccircle a:link { color: #bad3ff; text-decoration: underline; }
  #magiccircle a:visited { color: #d1adff; }
  #magiccircle a:hover, #magiccircle a:focus, #magiccircle a:active { color: #ffabab; }
  #magiccircle footer a:link { color: #bbf; text-decoration: underline; }
  #magiccircle footer a:visited { color: #daf; }
  #magiccircle footer a:hover, #magiccircle footer a:focus, #magiccircle footer a:active { color: #ffaaaa; }
  #magiccircle footer p { margin-left: 0em; text-align: left; }
  #magiccircle main > section { text-align: left; }
  #magiccircle main > section h2 { margin-top: 0.5em; }
  #magiccircle main > section ol { margin-top: 0em; }
  #magiccircle img, #magiccircle embed, #magiccircle object, #magiccircle video { max-width: 100%; }
  #magiccircle .action { font-weight: bold; }
  #magiccircle .charname { font-weight: bold; }
  #magiccircle .chartext { border: none; }
  #magiccircle .cominavbox { background: rgba(0, 0, 34, 0.75); margin-bottom: 0em; border: thin solid #f48bff; border-bottom: none; }
  #magiccircle .cominavbox li { padding: 0.5em; }
  #magiccircle figure + .cominavbox { margin-top: 0em; border: thin solid #f48bff; border-top: none; margin-bottom: 1em; }
  #magiccircle figure + .cominavbox li { margin-top: 0em; padding: 0.5em; }
  #magiccircle .intro { border: none; background: none; margin: 0em; padding: 0em; }
  #magiccircle .intro + .intro { border-top: solid thin #f48bff; }
  #magiccircle .intro h2 { margin-top: 0em; padding-top: 0em; }
  #magiccircle .char { text-align: left; }
  #magiccircle .char h2 { margin-left: 1em; padding-top: 1em; }
  #magiccircle .char dt { font-style: italic; }
  #magiccircle .char dt:after { content: ":"; }
  #magiccircle .char dd:after { content: "\A"; white-space: pre; }
  #magiccircle .char dd { margin-left: 0em; }
  #magiccircle .char dt, #magiccircle .char dd { display: inline; white-space: pre-wrap; }
  #magiccircle .char dl { font-size: 0.9em; margin-left: 1em; }
  #magiccircle .char img { border: solid thin #f48bff; }
  #magiccircle .char .chartraits { overflow-wrap: break-word; }
  #magiccircle .tagslist, #magiccircle .chapterarch { list-style-type: none; }
  #magiccircle .chapterarch { padding-left: 0em; }
  #magiccircle main > .tagslist { padding: 1em; } }
@media screen and (min-width: 1024px) { #magiccircle body { background: #002 url("glowy-magic-circle.jpg") fixed no-repeat 100% 0%; background-size: 50%; }
  #magiccircle figure#comic { padding: 0em; margin: 0em 1em 0em 0em; border: none; width: 100%; }
  #magiccircle figure#comic img { -webkit-box-shadow: 0em 0em 0.5em 0.5em #f48bff; -moz-box-shadow: 0em 0em 0.5em 0.5em #f48bff; box-shadow: 0em 0em 0.5em 0.5em #f48bff; background: rgba(0, 0, 34, 0.75); max-width: 100%; }
  #magiccircle figcaption { padding: 1em; margin: 0em 2em; background: rgba(0, 0, 34, 0.75); border: solid thin #f48bff; }
  #magiccircle main > div, #magiccircle main > section, #magiccircle main > .tagslist { max-width: 70%; padding: 0em 0em 0.5em 0em; margin: 1em 2em 1em 10%; }
  #magiccircle main > div p, #magiccircle main > section p, #magiccircle main > .tagslist p { margin-left: 1em; }
  #magiccircle main > .tagslist { padding: 1em; }
  #magiccircle .cominavbox { background: rgba(0, 0, 34, 0.75); border: thin solid #f48bff; }
  #magiccircle .cominavbox li { margin-bottom: 1em; padding-bottom: 1em; }
  #magiccircle figure + .cominavbox { margin-top: 0em; border-top: none; }
  #magiccircle figure + .cominavbox li { margin-top: 0em; padding-top: 0.5em; }
  #magiccircle .cominavbox, #magiccircle .cominavbox li { margin: 0.5em 1em 0em 1em; }
  #magiccircle h1 { font-size: 1.5em; border-bottom: none; border-top: none; padding-top: 0.5em; padding-bottom: 0.5em; width: 70%; margin-left: 10%; }
  #magiccircle h2 { font-size: 1.2em; margin: 0em; padding: 0.5em 0em 0.5em 0.5em; }
  #magiccircle h3 { font-size: 1em; padding-left: 1em; }
  #magiccircle nav { text-align: center; background: none; }
  #magiccircle nav li { padding: 1em 1em 0.8em 1em; margin: 0em; border: solid thin #f48bff; }
  #magiccircle nav li + li { margin-left: 0em; }
  #magiccircle .statline { font-size: 0.8em; text-align: right; margin-right: 1em; }
  #magiccircle footer p { font-size: 0.7em; margin-left: 1em; }
  #magiccircle .action { text-indent: 1em; }
  #magiccircle main > section { padding: 0em 0em 0.5em 0em; width: 80%; }
  #magiccircle main > section ol { margin-top: 1em; margin-left: 1em; margin-right: 2em; border-right: solid thin #f48bff; }
  #magiccircle main > section h2 { padding: 0em; margin: 0em; margin-left: 1em; margin-top: 0.7em; }
  #magiccircle .main { padding: 0.5em; }
  #magiccircle .main p { margin-left: 0em; }
  #magiccircle .main .intro h2 { margin-top: 0.5em; }
  #magiccircle .char img { margin: 0em 2em 1em 1em; }
  #magiccircle .char .chartraits { margin: 0em; text-align: left; background: none; }
  #magiccircle .char .chartraits p { margin: 0em; padding: 0em; }
  #magiccircle .char .chartraits, #magiccircle .char img { display: inline-block; vertical-align: top; max-width: 50%; } }

/*# sourceMappingURL=style.css.map */
