@import url('https://fonts.googleapis.com/css2?family=Momo+Trust+Display&display=swap'); /* HEADER FONT */
@import url('https://fonts.googleapis.com/css2?family=Varela&display=swap'); /* MAIN FONT */
@import url('https://fonts.googleapis.com/css2?family=Varela+Round&display=swap'); /* MAIN FONT */
@import url('https://fonts.googleapis.com/css2?family=Indie+Flower&display=swap'); /* BLOG FONT */

:root {
    --delay: 0s;
    --bgGradient1: rgba(2, 23, 69, 0.87);
    --bgGradient2: rgba(100, 3, 90, 0.87);
}

body {
    color: white;
    background-image: linear-gradient(135deg, var(--bgGradient1), var(--bgGradient2)), url("/images/background/checkeredbg.png");
    background-repeat: no-repeat, repeat;
    background-attachment: fixed;
    background-size: auto, 29px;
    margin: 0;
    text-align: center;
    text-shadow: 1.25px 1.25px 2px black;
    font-family: "Varela Round", sans-serif;
    animation: bgScroll 3.5s linear infinite;
}

#container {
    display: flex;
    position: relative;
    margin: 7em auto 3em;
    width: 80%;
    max-width: 1400px;
    height: auto;
}
#container > aside {flex: 1;position: relative;}
#container > main {flex: 4;position: relative;}
main > sup {font-style: italic;}

.flex, .artFlex {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.bubbleCont {cursor: default;}

footer {margin: 24px auto 48px;font-size: 18px;}
footer a {color: white;}
footer sup {display: flex;justify-content: center;}
footer span, sup span {margin: 0 8px;}

/* HEADERS */

header {
    position: absolute;
    margin: 10px auto;
    width: 350px;
    top: 0;
    left: 0;
    right: 0;
}
header.fit {width: fit-content;}

h1, h2, h3, h1 + span, #blogText .header {
    font-family: "Momo Trust Display", sans-serif;
}
h1 {font-size: 34px;}
h1:has(+ span) {margin-bottom: 0;}
h1 + span {font-size: 25px;font-weight: bold;}

h2 {font-size: 28px;}
h3 {margin: 10px;font-size: 22px;}

.heading {
    display: inline-block;
    border: 2px solid white;
    padding: 10px;
}

h2:has(+h3), h2:has(+h2) {margin-bottom: 0;}
h2 + h3 {margin-top: 0;}

.box hr, .heading {
    border-image: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,1), rgba(255,255,255,0) 100%) 1;
    width: 85%;
}

#blogText .header {
    font-size: 26px;
    font-weight: bold;
}

/* #postTitleH1, #postDate {font-family: "Indie Flower", cursive;} nah */
#postTitleH1 {font-size: 30px;}
#postDate {font-size: 22px;}

#postTitleH1 + h2 {margin-top: 0;}

/* BOXES */

.box, .shinyBox, .collapse {
    position: relative;
    background: rgba(0,0,0,0.5);
    border: 3px solid black;
    border-radius: 16px;
    margin: 10px auto;
    padding: 10px 5px;
    width: 85%;
    height: auto;
    font-size: 18px;
    transition: 0.2s;
    box-shadow: 0 3px 6px rgba(8,0,36,0.7);
}
.box:not(:has(.indicator:hover)):hover, .indicator:hover {
    background: rgba(0,0,0,0.6);
    & h2.header {
        width: 90%;
    }
}

.fade {
    position: relative;
    background: rgba(0,0,0,0.5);
    border-radius: 16px;
    margin: 20px auto;
    padding: 10px 0;
    width: 80%;
    box-shadow: 0 0 1px #cbcbcb;
}

.shinyBox {
    background: none;
    border: 1px solid rgba(157,113,128,1);
    padding: 10px;
    box-shadow: 0 -3px 10px -1px rgb(157,113,128) inset, 0 3px 6px rgba(8,0,36,0.7);
}
.shinyBox:hover {background: rgba(255,255,255,0.1);}
.shinyBox, .shinyBox:hover {
    background-image: linear-gradient(135deg, rgba(3, 23, 67, 0.5), rgba(103, 8, 93, 0.5));
}

.gridBox {
    position: relative;
    background-image: linear-gradient(rgba(0,0,0,0.5)), url(/images/background/checkeredbg.png);
    border: 5px solid #767676;
    border-radius: 8px;
    margin: 10px;
    padding: 0 20px;
    width: 40%;
    height: fit-content;
    min-height: 165px;
    font-size: 17px;
    box-shadow: 4px 4px 6px rgba(0,0,0,0.5);
}

.gridBox h3 {
    background: #313131;
    margin: 10px;
    padding: 5px 0;
    transition: background 0.2s;
}
.gridBox:hover h3 {background: #242424;}
.gridBox ul {
    padding: 0;
    padding-left: 15px;
    text-align: left;
}
.gridBox a {color: #d8d8d8;}

.showoff {
    display: flex;
    font-size: 18px;
    text-align: var(--align);
    flex-direction: var(--dir);
    --align: left;
    --dir: row;
}
.showoff a {
    margin: 8px;
    height: fit-content;
}

.showoff:not(:has(.decor)) img {
    border: 1px solid transparent;
    border-radius: 16px;
    width: 240px;
    height: 240px;
    transition: border 0.2s, box-shadow 0.2s;
    object-fit: cover;
    &:hover {
        border-color: #e3e3e3;
        box-shadow: 0 0 7px rgb(255,255,255,0.5);
    }
}
.showoff ul {padding-left: 20px;}

.showoff section b:not(:first-child) {text-decoration: underline;}
.showoff section b ~ ul {margin-top: 3px;}

.collapse {
    margin: 10px auto;
    padding: 0;
    width: 80%;
    font-size: 16px;
    overflow: hidden;
    transition: none;
    box-shadow: 0 2px 5px rgba(0,0,0,0.5);
}
.collapse:has(details[open]), .collapse:not(:has(details[open])):has(summary:hover) {
    background: rgba(50,50,50,0.5);
}
.collapse .log {max-height: 250px;overflow: auto;}
.log section p {margin: 10px 10px 0;text-align: left;}

.background {
    background-image: linear-gradient(rgba(var(--hue),var(--dim))), var(--bg) !important;
    background-position: var(--pos) !important;
    background-size: cover !important;
    --hue: 0,0,0;
    --pos: 0% 0%;
    --dim: 0.6;
}

/* BOX ELEMENTS */

.box h2 {margin: 15px;}
.box p {margin: 5px;}

.box sup {display: inline-block;margin: 10px;font-size: 16px;font-style: italic;}
.box li sup {width: 100%;}

.box ul, .box dl {
    margin: 10px;
    padding: 0;
    text-align: left;
}
.box li {
    margin: 8px;
    padding: 0;
    width: 80%;
}

.fade p {
    margin: 3px;
}

.collapse ul {
    padding-left: 28px;
    padding-right: 10px;
    text-align: left;
    list-style-position: outside;
}
.collapse li {margin: 12px 0;}

.collapse section ul {text-align: left;}
.collapse section li {margin: 3px 0;}

summary {
    border-radius: 15px;
    padding: 10px 0;
    font-size: 18px;
    transition: background 0.2s;
}
summary:hover {background: rgba(255,255,255,0.2);cursor: pointer;}
details[open] summary {border-radius: 15px 15px 0 0;}

#recentpostlistdiv ul {
    padding: 0;
    font-size: 19px;
    line-height: 1em;
    list-style-type: circle;
    list-style-position: inside;
}
.moreposts {margin-top: 3px;font-size: 17px;}

/* BUBBLES */

.bubble, #anBubble {
    display: inline-block;
    color: white !important;
    border: 2px solid #c7c7c7;
    border-style: solid none none solid;
    border-radius: 20px;
    margin: 20px 5px;
    padding: 5px 40px;
    width: fit-content;
    font-size: 18px;
    text-decoration: none !important;
    box-shadow: 0 0 6px rgba(255, 255, 255, 0.5) inset, 0 2px 5px rgba(19,17,20,0.6);
    transition: opacity 0.5s ease, width 0.2s ease, text-shadow 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
    z-index: 1;
}
.bubble:not(.off):hover, #announcement:hover #anBubble {
    border-color: #e3e3e3;
    text-shadow: 0 0 5px rgba(255,255,255,0.5);
    box-shadow: 0 0 9px rgba(255,255,255,0.8) inset;
    transform: scale(1.05);
}
.bubble:not(.off) {background: var(--bg) !important;}

#announcement:hover #anBubble {transform: none;}

.indicator {
    display: flex;
    position: absolute;
    background: rgba(0,0,0,0.7);
    border: 3px solid black;
    border-radius: 25px;
    width: 30px;
    max-width: 170px;
    min-height: 30px;
    top: -11px;
    right: -11px;
    font-size: 17px;
    line-height: initial;
    word-break: break-all;
    flex-flow: row-reverse wrap;
    justify-content: center;
    align-items: center;
    transition: background 0.2s, width 0.2s, height 0.2s, padding 0.2s;
    z-index: 1;
}
.indicator::after {content: "i";}

.indicator:hover {
    background: rgba(0,0,0,0.9);
    padding: 5px 10px;
    width: auto;
    height: auto;
}
.indicator:hover::after {
    content: var(--indicMsg);
    text-align: right
}

/* LINK BUBBLES */

.linkBubble {
    display: block;
    color: white !important;
    position: relative;
    background-image: linear-gradient(rgba(0,0,0,0.3)), var(--bg);
    background-position: var(--pos);
    background-size: cover;
    border: 3px solid black;
    border-radius: 16px;
    margin: 5px;
    width: 45%;
    text-align: left;
    text-decoration: none !important;
    transition: border 0.25s ease, box-shadow 0.25s ease;
    box-shadow: 0 0 0 white inset, 0 2px 5px rgba(6,5,6,0.6);
    --pos: center;
}
.linkBubble:hover {
    border-color: white;
    box-shadow: 0 0 24px white inset, 0 2px 5px rgba(139,109,151,0.6);
}

.linkBubble p {
    margin: 5px 0;
    padding: 0 8px 5px;
    font-size: 16px;
}

.linkBubble h3 {
    background: rgba(0,0,0,0.5);
    border-radius: 13px 13px 0 0;
    margin: 0;
    padding: 5px 8px;
    font-size: 24px;
}

.linkBubble span {
    opacity: 0;
    margin-left: 5px;
    font-size: 18px;
    font-family: "Varela Round", sans-serif;
    transition: opacity 0.2s;
}
.linkBubble:hover span, span.urgent, span.float {opacity: 1;}
.linkBubble span.urgent {color: #ff40a9;}
.linkBubble span.float {float: right;margin-top: 5px;}

/* LINKS */

a {color: #f62e84;text-decoration: none;}
a:hover {color: #ff8bbd;text-decoration-line: underline;}

#logo {
    width: 69%;
    object-fit: contain;
}

.linkChar {
    position: relative;
    margin: var(--top) auto;
    width: 80%;
    top: var(--top);
    object-fit: contain;
    animation: hover 3s ease-in-out var(--delay) infinite;
    transition: filter 0.2s, transform 0.2s;
    filter: drop-shadow(4px 4px 0 rgba(0,0,0,0.6));
    --reach: 30px;
}
.linkChar:hover {
    filter: drop-shadow(4px 4px 0 rgba(0,0,0,0.6)) drop-shadow(0 0 6px white) brightness(110%);
}

a:has(.linkChar) {position: relative;}
a:has(.linkChar) span {
    opacity: 0;
    color: white;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    font-size: 20px;
    font-weight: bold;
    pointer-events: none;
    transition: opacity 0.2s, bottom 0.2s;
    z-index: 1;
}
a:has(.linkChar):hover span {
    opacity: 1;
    bottom: -10px;
}

#logo, .gridBox img, .gamelogo, a:has(.art) {
    filter: drop-shadow(4px 4px 4px rgba(0,0,0,0.6));
}

/* IMAGES */

.decor {filter: drop-shadow(2px 2px rgba(0,0,0,0.6));}

.charHover {
    animation: hover 3s ease-in-out var(--delay) infinite;
    filter: drop-shadow(4px 4px 5px black);
    --reach: 30px;
}
.floatImg {
    position: absolute;
    width: 100px;
    height: 100px;
    bottom: -10px;
    right: -10px;
    object-fit: contain;
}

.hangingDecor {
    opacity: 0.3;
    background: var(--img) repeat-x;
    background-size: 25%;
    position: fixed;
    width: 100%;
    height: 30%;
    top: 0;
    left: 0;
    animation: fellOff 1s ease;
    z-index: -1;
}

.bgimg {
    opacity: 0;
    position: fixed;
    width: auto;
    height: auto;
    top: 100px;
    left: 100px;
    pointer-events: none;
    animation: fadeloop 5s ease infinite;
    animation-delay: var(--delay);
    z-index: -1;
}
.bgimgmanual {
    pointer-events: none;
    position: fixed;
    top: var(--top);
    left: var(--left);
    width: auto;
    height: auto;
    opacity: 0;
    z-index: -1;
    animation: fadeloop 5s ease infinite;
    animation-delay: var(--delay);
}

/* PORTAL */

#shrinePortal {
    display: flex;
    opacity: 0.8;
    justify-content: center;
    align-items: center;
}
#shrinePortal:hover {opacity: 1;}

#shrinePortal img {
    animation: portalSpin 5s infinite linear;
    z-index: 1;
}
#shrinePortal::before {
    display: block;
    content: '';
    position: absolute;
    background-image: url(/images/decor/shrinePortal2.svg);
    width: 75px;
    height: 60px;
    transition: filter 0.2s;
    filter: drop-shadow(0 0 6px rgba(255,0,244,0.5)) drop-shadow(2px 2px 0 rgba(0,0,0,0.6));
    animation: portalSpin 25s infinite linear;
}

#shrinePortal:hover::before {
    filter: drop-shadow(0 0 6px rgba(255,0,244,0.5)) drop-shadow(2px 2px 0 rgba(0,0,0,0.6)) drop-shadow(0 0 6px rgba(255,255,255,0.5)) brightness(110%);
}

/* MISC. RULES */

hr {
    border: 0;
    border-bottom: 2px dashed rgba(0,0,0,0.5);
    margin: 20px auto;
    width: 85%;
}
hr.short {
    border: 0;
    border-bottom: 2px dashed rgba(255,255,255,0.5);
    margin: 10px auto;
    width: 75%;
}

#blogTitle {
    background: url(/images/background/blogTitle.png) no-repeat;
    background-position-x: center;
    background-size: 450px;
    padding: 10px 0;
}

#blogText {
    padding: 10px 20px;
    font-size: 17px;
    line-height: 2.2;
}
#blogText::after {
    content: "-LG";
    position: absolute;
    bottom: -10px;
    right: 20px;
    font-size: 40px;
    font-weight: bold;
    transform: rotate(3deg);
}

#blogText p {margin: 15px 0;font-family: "Varela", sans-serif;}
#blogText p:first-child {margin-top: 5px;}
#blogText sup:last-child {margin-top: -10px;}

#blogText ul {text-align: center;}
#blogText li {width: 100%;}

.smallText {font-size: 15px;}
.smallText p {margin: 10px 5px;}

.hotpink {
    color: transparent;
    background-image: linear-gradient(90deg, #c790fe, #fe5c96);
    background-clip: text;
    -webkit-background-clip: text;
    text-shadow: none;
    filter: drop-shadow(1.25px 1.25px 1px black);
}
.solidpink, #blogText::after {color: #ea70bc;}

.fadedText {
    opacity: 0.7;
    margin-top: 8px;
    font-size: 14px;
    text-shadow: none;
    pointer-events: none;
}

.em {
    text-decoration-line: underline;
    text-decoration-style: dotted;
}

.rainbow-text {
    background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.5);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: #0000;
}

.spoiler {color: #ffdb00;}
.warn {color: #ff7d58;}

.off {
    opacity: 0.5;
    cursor: not-allowed;
}

span.new, .linkBubble.new::after {
    content: "NEW!";
    color: #ff7eb4;
    position: absolute;
    bottom: -10px;
    right: -9px;
    font-size: 20px;
    font-weight: bold;
    text-shadow: 1px 1px 2px black, 0 0 6px #e22a78;
    transform: rotate(-3deg);
}

marquee {
    background: rgba(0,0,0,0.3);
    margin: 20px auto;
    padding: 0;
    width: 80%;
    white-space: nowrap;
    overflow: hidden;
}
.scrolling div, .scrolling b {
    animation: scrollingText 15s linear infinite;
}

code {background: rgba(0,0,0,0.6);}

/* ANIMATIONS */

@keyframes bgScroll {
    100% {background-position: 0, 58px 58px;}
}

@keyframes scrollingText {
    0% {transform: translateX(100%);}
    100% {transform: translateX(-100%)}
}

@keyframes fadeloop {
    0% {opacity: 0}
    50% {opacity: 0.3}
    100% {opacity: 0}
}

@keyframes hover {
    0%, 100% {transform: translate(0, 0);}
    50% {transform: translate(0, var(--reach));}
}

@keyframes fellOff {
    from {transform: translateY(-50px);}
    to {}
}

@keyframes portalSpin {
    100% {transform: rotate(360deg);}
}

@media (prefers-reduced-motion: reduce) {
    body, .linkChar, .charHover, .hangingLeaves, #shrinePortal {
        animation: none !important;
    }
}