:root {
    --darkBG: rgb(35, 20, 30);
    --darkFG: rgb(251, 231, 238);
    --darkSubFG: rgb(247, 161, 181);
    --darkAccent: rgb(230, 57, 99);
}

html,
body {
    background: var(--darkBG);
    color: var(--darkFG);
}

/* =========================
   TEXT
========================= */

p,
h1,
h2,
h3,
h4,
h5,
h6,
span,
li,
a {
    color: var(--darkFG);
}

.subtitle,
.pageLabel,
#dmTooltip,
.contentPlaceholder,
.imagePlaceholder,
.codeBlock,
.credits {
    color: var(--darkSubFG);
}

/* =========================
   LINKS
========================= */

a:hover,
.pageLabel:hover {
    color: var(--darkAccent);
}

/* =========================
   SIDEBAR
========================= */

#sidebar {
    background: rgba(35, 20, 30, 0.92);

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    border-right: 1px solid rgba(230, 57, 99, 0.15);
}

/* =========================
   BOXES
========================= */

.sectionBox,
.subContainer {
    background: rgba(255, 255, 255, 0.04);

    border-color: var(--darkAccent);

    box-shadow: 0 0 20px rgba(230, 57, 99, 0.12);
}

.contentPlaceholder,
.imagePlaceholder {
    border-color: var(--darkAccent);

    background: rgba(255, 255, 255, 0.03);

    color: var(--darkSubFG);
}

.codeBlock {
    background: rgba(255, 255, 255, 0.04);

    color: var(--darkFG);
}

/* =========================
   DOCUMENT VIEWER
========================= */

.documentViewer {
    border-color: var(--darkAccent);

    background: rgba(255, 255, 255, 0.03);

    box-shadow: 0 0 20px rgba(230, 57, 99, 0.08);
}

/* =========================
   TYPEWRITER
========================= */

#hello {
    color: var(--darkFG);

    border-right-color: var(--darkAccent);
}

/* =========================
   IMAGES
========================= */

#image1 {
    border-color: var(--darkAccent);

    box-shadow: 0 0 25px rgba(230, 57, 99, 0.15);
}

/* =========================
   DINO FOOTER
========================= */

#ground {
    background: var(--darkAccent);
}

/* =========================
   DARK MODE BUTTON
========================= */

#funstuff {
    color: var(--darkFG);
}

#dmTooltip {
    color: var(--darkSubFG);
}

/* =========================
   SCROLLBAR
========================= */

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: rgb(28, 16, 24);
}

::-webkit-scrollbar-thumb {
    background: var(--darkAccent);

    border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgb(184, 15, 46);
}

/* =========================
   MOBILE
========================= */

@media only screen and (max-width: 600px) {

    #sidebar {
        background: rgba(35, 20, 30, 0.96);
    }
}