/* Mobile */
@media only screen and (min-width: 0rem) {
    :root {
        --dark: #121212;
        --medium: #282828;
        --accent: #404040;
        --bodyTextColorDark: #C1C1C1;
        --bodyTextColorWhite: #FAFBFC;
    }
    
    /* Black Dark Mode Colours
    --dark: #121212;
    --medium: #282828;
    --accent: #404040; */
    
    body.dark-mode {
        --bg01: var(--dark);
        --bg04: var(--medium);
        --itemColor: var(--accent);
        --headerColor: var(--bodyTextColorWhite);
        --bodyTextColor: var(--bodyTextColorDark);
    }
    body.dark-mode li,
    body.dark-mode h1,
    body.dark-mode h2,
    body.dark-mode h3,
    body.dark-mode h4,
    body.dark-mode h5,
    body.dark-mode h6,
    body.dark-mode .cs-text,
    body.dark-mode .cs-li {
        color: var(--bodyTextColorWhite);
    }

    body.dark-mode .cs-topper {
        color: var(--primary);
    }

    body.dark-mode p,
    body.dark-mode .cs-text,
    body.dark-mode .cs-item-text {
        color: var(--bodyTextColorDark);
    }
    body.dark-mode .light {
        display: none;
    }
    body.dark-mode .dark {
        display: block !important;
    }
    .dark {
        display: none;
    }
}
/* Dark Mode Section */
/* Mobile */
@media only screen and (min-width: 0rem) {
    body.dark-mode #dark-mode-toggle .cs-sun {
        transform: translate(-50%, -50%);
        opacity: 1;
    }
    body.dark-mode #dark-mode-toggle .cs-moon {
        transform: translate(-50%, -150%);
        opacity: 0;
    }
    #dark-mode-toggle {
        display: block;
        position: absolute;
        top: 75%;
        transform: translateY(-50%);
        right: 3.75rem;
        width: 3rem;
        height: 3rem;
        background: transparent;
        border: none;
        overflow: hidden;
        padding: 0;
    }
    #dark-mode-toggle img,
    #dark-mode-toggle svg {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 1.5625rem;
        height: 1.5625rem;
        pointer-events: none;
    }
    #dark-mode-toggle .cs-moon {
        z-index: 2;
        transition: transform 0.3s,
        opacity 0.3s,
        fill 0.3s;
        fill: #000;
    }
    #dark-mode-toggle .cs-sun {
        z-index: 1;
        transform: translate(-50%, 100%);
        opacity: 0;
        transition: transform 0.3s,
        opacity 0.3s;
    }
}
/* Desktop */
@media only screen and (min-width: 64rem) {
    #dark-mode-toggle {
        position: relative;
        top: auto;
        right: auto;
        transform: none;
        margin-left: 1.875rem;
        margin-bottom: 0rem;
    }
    #dark-mode-toggle .cs-moon {
        /* change to whatever you need it to be */
        fill: #1A1A1A;
    }
}