@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap');

/*CODE BLOCK STUFF*/

/* desert scheme ported from vim to google prettify */
pre.prettyprint { display: block; background-color: #333; font-family: "JetBrains Mono", monospace;}
pre .nocode { background-color: none; color: #000 }
pre .str { color: #ffa0a0 } /* string  - pink */
pre .kwd { color: #f0e68c; font-weight: bold }
pre .com { color: #87ceeb } /* comment - skyblue */
pre .typ { color: #98fb98 } /* type    - lightgreen */
pre .lit { color: #cd5c5c } /* literal - darkred */
pre .pun { color: #fff }    /* punctuation */
pre .pln { color: #fff }    /* plaintext */
pre .tag { color: #f0e68c; font-weight: bold } /* html/xml tag    - lightyellow */
pre .atn { color: #bdb76b; font-weight: bold } /* attribute name  - khaki */
pre .atv { color: #ffa0a0 } /* attribute value - pink */
pre .dec { color: #98fb98 } /* decimal         - lightgreen */

/* Specify class=linenums on a pre to get line numbering */
ol.linenums { margin-top: 0; margin-bottom: 0; color: #AEAEAE } /* IE indents via margin-left */
li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8 { list-style-type: none }
/* Alternate shading for lines */
li.L1,li.L3,li.L5,li.L7,li.L9 { }

@media print {
  pre.prettyprint { background-color: none }
  pre .str, code .str { color: #060 }
  pre .kwd, code .kwd { color: #006; font-weight: bold }
  pre .com, code .com { color: #600; font-style: italic }
  pre .typ, code .typ { color: #404; font-weight: bold }
  pre .lit, code .lit { color: #044 }
  pre .pun, code .pun { color: #440 }
  pre .pln, code .pln { color: #000 }
  pre .tag, code .tag { color: #006; font-weight: bold }
  pre .atn, code .atn { color: #404 }
  pre .atv, code .atv { color: #060 }
}

/* ----- */

cb {
    color: rgb(255, 100, 100);
    font-weight: 700;
}

cg {
    color: rgb(100, 255, 100);
    font-weight: 700;
}

cp {
    color: rgb(255,255,100);
    font-weight: 700;
}

cs {
    color: aqua;
    font-weight: 700;
}

.itemTag, .tooltipTag {
    font-size: 0.75em;
    font-weight: 700;
    box-shadow: inset 0px 2px rgb(255,255,255,0.25);
    color: white;
    padding: 2px 8px;
    border-radius: 2px;
    display: inline;
}

:root {
    --lightbg4: rgb(60,60,60);
    --lightbg3: rgb(55,55,55);
    --lightbg2: rgb(50,50,50);
    --lightbg1: rgb(45,45,45);
    --lightbg0: rgb(40,40,40);
    --bg: rgb(35,35,35);
    --darkbg0: rgb(30,30,30);
    --darkbg1: rgb(25,25,25)
}

body {
    background-color: var(--bg);
    color: white;
    font-family: "Poppins", sans-serif;
    margin: 0;
    display: flex;
    flex-direction: column;
    height: 100dvh;
}

table {
    width: 100%;
    margin: 10px 0px;
    background-color: var(--lightbg1);
}

table th {
    background-color: var(--lightbg2);
    font-weight: 700;
}

table td {
    border: 1px solid var(--lightbg4);
    padding: 5px;
}

code {
    outline: 1px solid var(--lightbg2);
    height: 100%;
    padding: 5px;
}

#topper {
    display: flex;
    justify-content: space-between;
    background-color: var(--lightbg0);
    padding: 10px;
}

#topperLeft {
    display: flex;
    gap: 5px;
}

#topperRight {
    display: flex;
}

#searchContainer {
    height: 25px;
    display: flex;
    flex-direction: column;
    z-index: 2;
    max-height: 500px;
}

#searchBar {
    font-family: "Poppins", sans-serif;
    background-color: var(--darkbg0);
    color: white;
    border: none;
    height: 25px;
}

#searchBar:focus {
    outline: none;
}

#searchContainer a {
    border: none;
    background-color: var(--darkbg0);
    text-align: left;
    cursor: pointer;
    color: white;
    text-decoration: none;
    padding: 0px 5px;
}

#searchContainer a:hover {
    background-color: var(--darkbg1);
}

#main {
    display: flex;
    height: calc(100% - 74px);
}

#explorer {
    display: flex;
    flex-direction: column;
    width: 250px;
    min-width: 250px;
    height: calc(100% - 20px);
    padding: 10px;
    background-color: var(--darkbg0);
    position: sticky;
    overflow-y: auto;
}

.explorerItem {
    height: fit-content;
    position: relative;
}

.explorerItemButtons {
    display: flex;
    gap: 5px;
    height: 35px;
}

.explorerItem button {
    border-radius: 5px;
    border: none;
    padding: 10px;
    display: flex;
    align-items: center;
    font-family: "Poppins", sans-serif;
    background-color: transparent;
    cursor: pointer;
    color: white;
    transition: background-color ease-in-out 150ms;
}

.explorerItem button:hover {
    background-color: var(--lightbg2);
}

.explorerItem button:active {
    background-color: var(--lightbg4);
}

.explorerItem .explorerItem {
    margin-left: 15px;
}

.explorerItem .explorerItem::before {
    content: "";
    position: absolute;
    left: 2px;
    width: 1px;
    height: 100%;
    background-color: var(--lightbg2);
}

.explorerItemArrow {
    min-width: fit-content;
    justify-content: center;
    min-width: 35px;
}

.explorerItemButtons a {
    text-decoration: none;
    width: 100%;
}

.explorerItemButtons a button {
    width: 100%;
    text-align: left;
    height: 100%;
}

.explorerItemChildren {
    display: none;
}

#body {
    overflow: auto;
    width: 100%;
    padding: 10px;
    display: flex;
    gap: 5px;
    justify-content: space-between;
}

.genericTitle {
    font-size: 2em;
    font-weight: 700;
}

.genericHeader {
    font-size: 1.25em;
    font-weight: 700;
    margin-top: 20px;
}

.infoCard {
    width: 350px;
    padding: 5px;
    background-color: var(--lightbg1);
    outline: 1px solid var(--lightbg3);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    flex-direction: column;
}

.infoCard img {
    max-width: 100%;
}

#body span {
    display: block;
}

#body a {
    color: rgb(255, 100, 100);
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
}

#body a img {
    vertical-align: middle;
    margin-right: 5px;
    image-rendering: pixelated;
}

#body a[href] {
    color: rgb(0, 255, 255);
}

#body a:hover {
    text-decoration: underline;
}

.characterTag {
    background-color: grey;
    width: fit-content;
    padding: 0px 5px;
    border-radius: 5px;
    font-weight: 700;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: inset 0px 2px 0px 0px rgb(255,255,255,0.25);
}

.projectileDisplayContainer {
    width: 24px;
    height: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url(/games/GooberShooter2/graphics/bullet.png);
    background-size: cover;
    image-rendering: pixelated;
    margin: 50px;
}

.bigButtonContainer {
    display: flex;
    justify-content: center;
    gap: 10px;
    width: 100%;
    flex-wrap: wrap;
}

.bigButton {
    background-color: var(--lightbg1);
    border: 1px solid var(--lightbg2);
    padding: 5px;
    display: flex;
    gap: 5px;
    width: 30%;
    min-width: 200px;
    user-select: none;
}

.bigButton span {
    color: white;
}

.bigButton:hover {
    text-decoration: none !important;
}