/************* VARIABLES *************/
body {
    --primary: #0b132b;
    --secondary: #fee440;
    --tertiary: #f15bb5;
    --dark: #000;
    --light: #ffecd1;
    --border: #390099;
}

/************* HEADER *************/
.dark header {
    background-color: var(--dark);
    border-bottom: 1px solid var(--border);
}

.dark .h-wrap h1.title a {
    color: var(--secondary);
}

.dark .menu-icon .lines,
.dark .menu-icon .lines::before,
.dark .menu-icon .lines::after {
    background-color: var(--secondary);
}

.dark .h-wrap .close .lines {
    background: 0, 0;
}

.dark .h-wrap h1.title a:hover {
    color: var(--tertiary);
}
/************* LIGHT/DARK ICONS *************/
/* Not related to dark theme but they use variables */
.sun-btn {
    fill: var(--secondary);
}

.sun-btn:hover {
    fill: var(--tertiary);
}

.moon-btn:hover {
    fill: #7b68ee;
}

/************* OFF-CANVAS *************/
.dark .off-canvas.toggled {
    border-left: 1px solid var(--border);
}

.dark .off-canvas {
    background-color: var(--dark);
    color: var(--light);
}

.dark .bio h1 {
    color: var(--secondary);
}

.dark .bio p {
    color: var(--light);
}

.dark .off-canvas.toggled a {
    color: var(--secondary);
}

.dark .off-canvas.toggled a:hover {
    color: var(--tertiary);
}

/************* POSTS *************/
.dark .posts li .p-wrap {
    background: var(--primary);
}

.dark .posts li .p-wrap:hover {
    background: var(--border);
}

.dark .posts li time {
    color: var(--secondary);
}

.dark .posts li {
    border-bottom: 1px solid var(--border);
}

.dark .posts li:first-child {
    border-top: none;
}

.dark .posts li:last-child {
    border-bottom: none;
}

.dark .posts li a {
    color: var(--light);
}

.dark .off-canvas nav h6 {
    color: var(--light);
    border-color: var(--border);
}

/************* NEXT/PREVIOUS ARROWS (HOME) *************/
.dark .pagination {
    color: var(--light);
    border-color: var(--border);
    margin-top: unset;
}

.dark .pagination a {
    color: var(--secondary);
}

.dark .pagination a:hover {
    background-color: var(--border);
    color: var(--tertiary);
}

.dark .pagination span:first-child {
    border-color: var(--border);
}

.dark .pagination a:first-child {
    border-color: var(--border);
}

/************* FOOTER *************/
.dark footer {
    background-color: var(--dark);
}

/************* POST PAGE *************/
body.dark {
    background: var(--primary);
}

.dark section {
    background: var(--primary);
}

.dark .single-wrap .feat {
    border-bottom: 1px solid var(--border);
}

.dark .single-wrap .page-date,
.dark .single-wrap .feat a.popup {
    background: var(--primary);
}

.dark .single-wrap .page-date {
    color: var(--light);
}

.dark article {
    color: var(--light);
}

.dark article a {
    color: var(--secondary);
}

.dark article a:hover {
    color: var(--tertiary);
}

.dark article img {
    background-color: var(--light);
    border-radius: 1px;
}

/************* NEXT/PREVIOUS ARROWS (ARTICLE) *************/
.dark a#prev, .dark a#next {
    background: var(--border);
    border-color: var(--dark);
    color: var(--light);
}