/* website theme, for article css see markdown.css */

@font-face {
    font-family: "gooddog";
    src: url("assets/fonts/gooddog.woff") format("woff");
    font-weight: 400; font-style: normal;
}
@font-face {
    font-family: "gooddog";
    src: url("assets/fonts/gooddogbold.woff") format("woff");
    font-weight: 600; font-style: normal;
}
@font-face {
    font-family: "segoe print"; /* semi-official (famobi) cyrillic alt */
    src: url("assets/fonts/segoeprintbold.woff") format("woff");
    font-weight: 400; font-style: normal;
}
@font-face {
    font-family: "jetbrains mono";
    src: url("assets/fonts/jetbrainsmono.woff") format("woff");
    font-weight: 400; font-style: normal;
}

/* not much here for now.. 
   add repeating css here for ease of use! */
:root {
    --stroke:
        0.08em 0 0 #000, -0.08em 0 0 #000, 0 0.08em 0 #000,
        0 -0.08em 0 #000, 0.08em 0.08em 0 #000, -0.08em 0.08em 0 #000,
        0.08em -0.08em 0 #000, -0.08em -0.08em 0 #000, 0 0.14em 0 #000;
    --soft: rgba(0,0,0,0.5);
    --softw: rgba(255,255,255,0.5);
}

* {box-sizing: border-box; margin: 0; padding: 0; scrollbar-width: none}
*::-webkit-scrollbar {width: 0; height: 0}

body {
    min-height: 100vh; color: white;
    font-size: 1.1em; line-height: 1;
    font-family: "gooddog", "segoe print", "comic sans ms", system-ui, sans-serif;
    text-shadow: var(--stroke);
    background-color: #e9a856;
    --bg: url("assets/images/bg.webp");
    background-image: var(--bg), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' style='background:%239a2' viewBox='0 0 2048 1154'%3E%3Cpath fill='%23d94' d='M0-4h2048v500c-25 2-41-10-66-8q-42-1-83 4c-18-1-42-7-63-10-21-13-47-2-71-16-28 8-56 2-84-5-26-7-62 1-90-7-28 5-52-14-80-7-24-1-40 11-64 4-41 7-83 4-125 12-26 10-54 9-81 5-24 9-51 5-75 16-27 3-56 15-82 4-36 1-74-2-108 7-36 8-75 7-111 17-24 9-48 9-72 8q-57 1-116 6c-33 9-71 7-108 8-22 14-43-2-66-2q-48 5-93-6c-23-3-54-4-81-6-30-4-59 6-89-4-36-7-71-19-109-17-23-3-44-12-68-11-20-6-69 16-63-16z'/%3E%3Cpath fill='%2356a' d='M538 786q38-5 64 18c29 9 53 20 84 23 50 5 92 23 140 30q80 21 159 34c60 21 126 20 186 42q60 8 119 23c39 12 82 5 121 20 42 15 87 24 132 13 44-10 88-26 134-26 31-1 56-15 88-18 39-8 75-11 113-25 56-10 114-19 176-29v271l-572 1-1476-1V914c65-8 128-30 192-41 42-15 90-16 135-30q43-18 88-29'/%3E%3Cpath fill='%23fff' d='M540 783c23-1 44-1 60 16 31 10 56 21 88 25 49 4 90 24 139 29q79 22 160 35c60 21 126 20 185 42q60 9 120 23c39 12 81 5 120 20 42 15 88 24 132 13 44-10 88-26 135-26 30-1 56-15 87-18 38-9 73-9 109-24 57-11 115-17 169-36 14 16-35 17-49 24q-68 3-132 24c-22 6-44 7-63 14-36 14-78 9-115 21-26-1-45 20-70 20-24 4-50 3-72 14l-57 1c-28 4-51-13-80-17-20-5-40 4-57-12-49-18-104-12-152-30-21-6-49-7-72-16-38-16-80-14-120-20-40-14-82-18-122-32-41 1-78-20-120-20-27-11-58-9-83-20-27-4-51-24-79-29-27-8-59-20-89-5-57 8-103 45-161 46-38 13-80 10-117 26-32 0-62 14-94 18-42 11-85 22-129 23-26 4 39-12 34-10 35-5 67-20 103-21q92-23 183-43c43-15 98-12 142-35 23-6 44-16 67-20'/%3E%3Cpath fill='%23fff' d='M1481 445c70-5 138 15 208 14 68 6 137 10 203 25 40-4 79 6 119 6 22 2 57 11 14 8-30-11-68-4-102-6-20 7-40 3-62-2-21-1-40-13-59-12-22 2-41-15-62-4-37-1-66-15-103-13-26 2-49-5-75-3-24-15-54-7-81-5-17 8-44-1-66 4-35 7-74 1-109 14-22 7-44 2-65 1-24 9-51 4-75 16-27 3-56 14-82 4-36 1-74-3-108 7-34 7-69 6-103 15-25 6-50 15-76 8l-101 6c-23 1-44 9-67 9-30 1-60-3-88 8-36-18-79-1-115-13-26-5-56-4-84-8q-42-2-82 0c-43-7-85-23-129-21-21-3-41-12-63-11-21-5-61 10-68-8l91 5q161 26 325 35l134 9q32-12 64-6c92-2 183-18 275-23 41-7 85-9 123-16 37 0 73-5 110-5 111-35 229-20 343-37z'/%3E%3C/svg%3E");
    background-size: cover; background-position: center;
    background-attachment: fixed;

    cursor: url("assets/static/cursors/idle.cur"), default !important;
}
body:active, body:focus, body:focus-within, body:target, body:active * {
    cursor: url("assets/static/cursors/active.cur"), default !important;
}

a, :any-link {
    color: #8feeff;
    text-decoration: none;
    cursor: url("assets/static/cursors/link.cur"), default !important;
}
a:hover, :any-link:hover {color: #b4f4ff}

/*//////////////////////////////////////////////////////////////////////*/

b, strong {font-weight: 600}
h1, h2, h3, h4, h5, h6 {font-weight: 400}
.paragraph br:only-child {user-select: none}

.page {
    width: min(1300px, 100vw);
    margin: 0 auto; display: grid;
    grid-template-columns: 240px 1fr;
    gap: 20px; padding: 0 20px; margin-bottom: 18em
}

.logo {
    display: block;
    width: 100%; height: 170px; width: 170px;
    margin: 2px auto 20px;
    position: relative;
}
.logo img {
    display: block;
    width: 100%; height: 100%;
    object-fit: contain;
}
.wikititle {
    width: max-content;
    font-size: 1.75em; position: absolute;
    left: 50%; text-shadow: var(--stroke);
    transform: translateX(-50%);
    bottom: 0; z-index: 99;
}

.sidebar {
    background: var(--soft);
    border-radius: 0 0 22px 22px; padding: 10px 14px 16px;
    align-self: start; user-select: none;
    cursor: url("assets/static/cursors/active.cur"), default !important;
}
.shortlink, .link {
    word-break: break-all;
    white-space: normal;
}

.navblock {
    margin-top: 8px;
    font-size: 0.95em;
}
.navblocktitle {
    margin: 14px 0 8px;
    opacity: 0.95;
}
.navlist {
    list-style: none;
    display: grid;
    gap: 6px;
}
.navdivider {
    border: 0;
    border-top: 2px solid rgba(255, 255, 255, 0.55);
    margin: 14px 0 8px;
}

/*//////////////////////////////////////////////////////////////////////*/

.main {
    min-width: 0;
    padding-top: 14px;
}

.toolbar {
    display: flex; gap: 10px;
    align-items: flex-end;
    margin-bottom: 0; min-width: 0;
    flex-wrap: nowrap; user-select: none;
}

.tabs {
    list-style: none; display: flex;
    flex-wrap: nowrap;
    gap: 0; flex: 0 0 auto;
    min-width: 0;
}

.tab {
    color: #fff; padding: 12px;
    background: linear-gradient(to top, rgba(0,0,0,0.3), rgba(0,0,0,0));
    border-right: 1px solid rgba(0,0,0,0.3);
    display: inline-flex; align-items: center;
    gap: 6px; white-space: nowrap; min-width: 0;
}
.tab.discussion {color: #b7b7b7}
.tab.active {background: linear-gradient(to top, rgba(0,0,0,0.5), rgba(0,0,0,0));}
.tab.discussionloading {color: #b7b7b7; pointer-events: none} /* probably redundant */
.tab.discussionmissing {color: #ff9f9f}
.tab.discussionfound {color: white}

.search {
    color: #fff; background: var(--soft);
    width: 380px; min-width: 60px;
    flex: 0 1 380px; padding: 10px; border: 0;
    border-radius: 20px 20px 0 0;
    font: inherit; text-shadow: var(--stroke);
    margin-left: auto; user-select: none;
}
.search:focus {
    outline: none;
    border: 0;
    box-shadow: none;
}
.search::placeholder {color: #fff; opacity: 0.5}
.search::-webkit-search-cancel-button {
    -webkit-appearance: none; appearance: none;
    width: 16px; height: 16px;
    background: url("assets/images/icons/x.png") no-repeat center / contain;
    cursor: url("assets/static/cursors/active.cur"), default !important;
}
.search::-ms-clear {
    width: 16px; height: 16px;
    background: url("assets/images/icons/x.png") no-repeat center / contain;
    border: 0;
}

/*//////////////////////////////////////////////////////////////////////*/

.content {
    min-height: 520px; overflow: visible !important;
    line-height: 1.25; background: var(--soft);
    border-radius: 0 0 22px 22px; padding: 18px 18px 16px;
}
.content::after {
    content: ""; display: block;
    clear: both;
}
.loading {
    display: flex; flex-direction: column;
    justify-content: center; align-items: center; z-index: 65535;
    filter: drop-shadow(0 4px 12px rgba(0,0,0,0.33));
    padding: 2em 0; user-select: none; text-align: center
}
.loading svg {
    width: 100px; padding: 0;
    filter: drop-shadow(0 4px 12px rgba(0,0,0,/*0.55*/0.33));
    animation: rotate 4s linear infinite;
}

/*//////////////////////////////////////////////////////////////////////*/

.playgroundpanel {
    position: fixed; left: 16px; bottom: 0;
    width: min(900px, calc(100vw - 32px));
    height: 40vh; min-height: 160px;
    background: rgba(0,0,0,0.25);
    border: 0; border-radius: 20px 20px 0 0;
    z-index: 9000;
    display: block; overflow: hidden;
}
.playgroundeditor {
    position: relative;
    width: 100%; height: 100%;
}
.playgrounddraghandle {
    position: absolute;
    top: -12px; left: -12px;
    width: 34px; height: 34px;
    border: 0; border-radius: 50%;
    background: rgba(0,0,0,0.3);
    z-index: 1000;
}
.playgrounddraghandle:hover {
    background: rgba(0,0,0,0.75);
}
.playgroundinput {
    width: 100%; height: 100%;
    resize: none; border: 0;
    background: rgba(0,0,0,0.25);
    color: #f6f6f6; caret-color: #fff;
    font-size: 1rem;
    font-family: "jetbrainsmono", monospace;
    padding: 10px 12px; line-height: 1.35;
    border-radius: 20px;
    text-shadow: none; white-space: pre-wrap;
    word-break: break-word;
}
.playgroundinput:focus {outline: none}
.playgroundinput::selection {
    background: rgba(143, 238, 255, 0.35);
}
.playgroundtoggle {
    position: fixed; left: 2em; bottom: 0;
    width: 50px; height: 30px;
    border: none; border-radius: 60px 60px 0 0;
    background: var(--soft);
    cursor: url("assets/static/cursors/active.cur"), default !important;
    z-index: 9999;
}
.playgroundtoggle img {
    width: 18px; height: 18px;
    object-fit: contain;
}
.playgroundresizehandle {
    position: absolute;
    top: -12px; right: -12px;
    width: 34px; height: 34px;
    border: 0; border-radius: 50%;
    background: rgba(0,0,0,0.3);
    z-index: 1000;
}
.playgroundresizehandle:hover {
    background: rgba(0,0,0,0.75);
}
@keyframes rotate {
    0% {transform: rotate(0deg)}
    100% {transform: rotate(360deg)}
}

/*//////////////////////////////////////////////////////////////////////*/

.footer {
    margin-top: 26px; width: 100%; font-size: 0.95em;
    display: grid; align-items: end; user-select: none;
    grid-template-columns: 1fr auto;
    column-gap: 16px; row-gap: 8px;
}
.footer > p {grid-column: 1}
.footerbadges {
    grid-column: 2; grid-row: 1 / span 2;
    display: flex; align-items: center;
    gap: 12px; flex-wrap: nowrap;
}
.footerbadges a {display: inline-flex}

.fandombadge {
    display: none;
    position: relative;
}
.fandombadge.visible {display: inline-flex}
.fandombadge .closebutton {
    position: absolute; display: inline-flex;
    align-items: center; justify-content: center;
    top: -8px; right: -8px;
    width: 20px; height: 20px;
    border-radius: 50%; background: rgba(0,0,0,0.5);
    border: 0; padding: 0;
    z-index: 2;
    cursor: url("assets/static/cursors/active.cur"), default !important;
}
.fandombadge .closebutton img {
    width: 11px; height: 11px;
    object-fit: contain;
}

.footerlinks {
    grid-column: 1;
    list-style: none; display: flex; flex-wrap: wrap;
    column-gap: 18px; row-gap: 0; margin-top: 0;
}

/*//////////////////////////////////////////////////////////////////////*/

/* when clicking on most images in an article they'll show up in a larger view.
   not for videos yet though */ 
.imageoverlay {
    position: fixed; display: flex;
    align-items: center; justify-content: center;
    inset: 0; width: 100vw; height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0; pointer-events: none;
    transition: opacity 0.25s ease;
    z-index: 10000;
}
.imageoverlay.active {
    opacity: 1;
    pointer-events: auto;
}
.imageoverlaylink {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: auto;
}
.imageoverlay img {
    width: auto; height: auto;
    max-width: 80vw; max-height: 80vh;
    object-fit: contain; opacity: 1;
    border-radius: 10px;
}