```css id="lightpinkfixed"
:root {
    --mainBG: rgb(251, 231, 238);
    --mainFG: rgb(58, 46, 57);
    --subFG: rgb(230, 57, 99);
    --mainAccent: rgb(184, 15, 46);
}

html,
body {
    background: var(--mainBG);
    color: var(--mainFG);
}

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

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

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

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

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

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

#sidebar {
    background: rgba(251, 231, 238, 0.9);

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

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

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

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

    border-color: var(--mainAccent);

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

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

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

    color: var(--subFG);
}

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

    color: var(--mainFG);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

::-webkit-scrollbar-track {
    background: rgb(245, 220, 228);
}

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

    border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgb(230, 57, 99);
}

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

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

    #sidebar {
        background: rgba(251, 231, 238, 0.96);
    }
}
```