/*=============== DARK MODE STYLES ===============*/
/* Dark Mode */
/*style.css*/

.dark-mode .totography_background {
    background-color: var(--c11);
    background-image: var(--topo-dark);
}

body.dark-mode {
    background-color: var(--c11);
    color: var(--c0);
}

.dark-mode ::-moz-selection {
    color: var(--c11);
    background: var(--c0);
}

.dark-mode ::selection {
    color: var(--c11);
    background: var(--c0);
}

.dark-mode .header {
    background-color: var(--c11);
}

.dark-mode .sidebar {
    background-color: var(--c11);
}

.dark-mode .sidebar__link {
    color: var(--c0);
    border: 2px solid var(--c0);
}

.dark-mode .sidebar__link .top-key {
    background-color: var(--c11);
}

.dark-mode .sidebar__link .bottom-key-1 {
    background-color: var(--c11);
}

.dark-mode .sidebar__link .bottom-key-2 {
    background-color: var(--c11);
}

.dark-mode .sidebar__link i {
    color: var(--c0);
}

.dark-mode .sidebar__link:hover {
    background-color: var(--c0);
    color: var(--c11);
}

.dark-mode .sidebar__link:hover i {
    color: var(--c11);
}

.dark-mode .sidebar__title span {
    color: var(--c0);
}

.dark-mode .active-link {
    background-color: var(--c0);
    color: var(--c11);
}

.dark-mode .active-link span {
    color: var(--c11);
}

.dark-mode .active-link i {
    color: var(--c11);
}

.dark-mode #scrollToTopBtn {
    background-color: var(--c11);
    color: var(--c0);
    border: 2px solid var(--c0);
}

.dark-mode #scrollToTopBtn:hover {
    background-color: var(--c0);
    color: var(--c11);
    border: 2px solid var(--c11);
}

.dark-mode .search-trigger {
    color: var(--c0);
}

.dark-mode .header__toggle i,
.dark-mode .dark-mode-toggle i {
    color: var(--c0);
}

.dark-mode hr {
    background-color: var(--c0);
}


/*=============== BREAKPOINTS ===============*/
@media screen and (min-width: 1200px) {
    .dark-mode .show-sidebar .sidebar__link:hover .sidebar__link-floating {
        color: var(--c11);
    }
}

/*=============== ANIMATION ===============*/
.dark-mode .glitch::before {
    background-color: #dfdfdf;
}

.dark-mode .glitch::after {
    background-color: #3f3f3f;
}

@keyframes font {
    0% {
        font-weight: 100;
        color: #dfdfdf;
        filter: blur(3px);
    }

    20% {
        font-weight: var(--font-medium);
        color: var(--c11);
        filter: blur(0);
    }

    50% {
        font-weight: 300;
        color: #3f3f3f;
        filter: blur(2px);
    }

    60% {
        font-weight: var(--font-bold);
        color: var(--c11);
        filter: blur(0);
    }

    90% {
        font-weight: var(--font-medium);
        color: #dfdfdf;
        filter: blur(6px);
    }
}

/*intro.css*/
.dark-mode .introduction h1 {
    color: var(--c0);
}

.dark-mode .introduction::before {
    background: var(--c0);
}

.dark-mode .introduction .corner-element.text {
    color: var(--c0);
}

.dark-mode .introduction .bottom-line {
    background: var(--c0);
}

.dark-mode .introduction .bottom-line::before,
.dark-mode .introduction .bottom-line::after {
    background: var(--c0);
}



/*about.css*/
.dark-mode .about .about-content .round-frame {
    border: 3px solid var(--c0);
}

.dark-mode .about .about-content h2 {
    color: #ccc;
}

.dark-mode .about .story::after {
    background-color: var(--c0);
}

/*counter.css*/
.dark-mode .stat-count {
    color: #ccc;
}

.dark-mode .stat:hover .stat-count {
    color: var(--c0);
}

.dark-mode .stat-icon {
    color: #eee;
}

.dark-mode .stat-title {
    color: #938a82;
}

/*social.css*/
.dark-mode .social-media .social-btn {
    --primary: #333;
    --shadow-primary: var(--c0);
    --color: var(--c0);
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.dark-mode .social-media .social-btn:hover {
    --primary: var(--c0);
    --color: var(--c11);
}

.dark-mode .social-media .number {
    background: var(--c0);
    color: var(--c11);
}

.dark-mode .social-media .social-btn i {
    color: var(--color);
}

.dark-mode .social-media .social-btn-text {
    color: var(--color);
}

/*footer.css*/
.dark-mode .new__footer {
    border-top: 1px solid var(--c0);
}

.dark-mode .footer-block__details-content .list-menu__item--link {
    color: rgba(237, 237, 237, 0.75);
}


/* loader*/
body.dark-mode .loader-container {
    background-color: rgb(0, 0, 0) !important;
}

body.dark-mode .loader {
    --loading-color: var(--c0) !important;
}

/* modal.css */
.dark-mode .modal {
    background-color: rgb(0, 0, 0);
}

.dark-mode .image-navbar {
    color: var(--c0);
}

/* .dark-mode .modal-media {
    border: var(--c0) 1px solid;
} */
.dark-mode .divider,
.dark-mode .nav-thumbnails {
    color: var(--c0);
}

.dark-mode .nav-btn {
    color: #c0c0c0;
}

.dark-mode .image-title {
    color: #eaeaea;
    border: 0.1rem solid var(--c0);
    border-right-color: var(--c0);
    border-left-color: var(--c0);
    border-left: 0px;
    border-right: 0px;
    background-color: rgba(0, 0, 0, 0.6);
}

.dark-mode .corner-deco.plus,
.dark-mode .vertical-text {
    color: #d0d0d0;
}


/*media-intro.css*/
.dark-mode .story-icon {
    color: #ccc;
}

.dark-mode .media-intro .media-intro-image img {
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.1);
}

.dark-mode .media-side-image img {
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.1);
}

.dark-mode .icon-text:hover {
    background: var(--c0);
    color: var(--c11);
}

.dark-mode .icon-text:hover i {
    color: var(--c11);
}

.dark-mode .icon-text:hover p {
    color: var(--c11);
}

/*02_morph.php*/
.dark-mode .morphing {
    color: var(--c0);
    background-color: var(--c11);
}

/* 02_about.php */
.dark-mode .about2 hr {
    border-top: 2px solid #ccc;
}

/* contact */
.dark-mode .contact_text__text a {
    color: #ccc;
}

.dark-mode .contact_text__text a:hover {
    color: var(--c0);
}

.dark-mode .field__input,
.dark-mode .text-area {
    color: var(--c0);
    border: 0.1rem solid var(--c0);
}

.dark-mode .field__input:focus,
.dark-mode .text-area:focus {
    outline: 2px solid #ccc;
}

.dark-mode .field__input:not(:placeholder-shown)~label,
.dark-mode .text-area:not(:placeholder-shown)~label {
    color: #ccc;
}

.dark-mode .field__input:focus~label,
.dark-mode .text-area:focus~label {
    color: #ccc;
}

.dark-mode .field label,
.dark-mode .form__label.field__label {
    background-color: var(--c11);
    color: #999;
}

.dark-mode .text-area:focus,
.dark-mode .text-area:not(:placeholder-shown) {
    background-color: var(--c11);
}

/* Timeline */
.dark-mode .timeline-wrap::before {
    background: var(--c0);
}

.dark-mode .timeline-block::after {
    background: var(--c0);
}

.dark-mode .timeline-ico {
    background: var(--c0);
    color: var(--c11);
}

.dark-mode .timeline-ico i {
    color: var(--c11);
}

.dark-mode .timeline-content h4::after {
    background: #3e3e3e;
}

/* breadcrumbs */

.dark-mode .breadcrumb-item a,
.dark-mode .breadcrumb-item+.breadcrumb-item::before,
.dark-mode .breadcrumb-item.active {
    color: var(--c0);
}


/* 01_reviews.php */
.dark-mode .slide p,
.dark-mode .details .name,
.dark-mode .details .job {
    color: #ccc;
}

.dark-mode .review-nav-btn {
    background-color: rgba(255, 255, 255, 0.1);
}

.dark-mode .review-nav-btn:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

.dark-mode .review-nav-btn::after,
.dark-mode .review-nav-btn::before {
    background-color: var(--c11);
}

.dark-mode .swiper-pagination-bullet {
    background-color: rgba(255, 255, 255, 0.8);
}

/* Scrolling Text */
.dark-mode .scrolling-container {
    background-color: rgb(0, 0, 0, 0.6);

    border: 0.1rem solid var(--c0);
    border-right-color: var(--c0);
    border-left-color: var(--c0);
    border-left: 0px;
    border-right: 0px;
}

.dark-mode .scrolling-item {
    color: #eaeaea;
}

/* proress bar */
.dark-mode .progress {
    background-color: #0e0e0e;
}

.dark-mode .progress-container {
    background-color: #333;
}

.dark-mode .progress-bar {
    background-color: var(--c0);
}

/* Search */
.dark-mode .search-modal,
.dark-mode .reset__button:not(:focus)::after {
    border-bottom: 0.1rem solid rgba(237, 237, 237, 0.08);
}

.dark-mode .search-modal__content {
    background: var(--c11);
}

.dark-mode .modal__content {
    background: var(--c11);
}

.dark-mode .field__input {
    border: 0.1rem solid var(--c0);
    color: var(--c0);
}

.dark-mode .field__input:focus {
    outline: 2px solid #ccc;
}

.dark-mode .field__input:not(:placeholder-shown)~.field__label,
.dark-mode .field__input:focus~.field__label,
.dark-mode .field__input:focus~label {
    color: #ccc;
}

.dark-mode .field label {
    background-color: var(--c11);
    color: #999;
}

.dark-mode .search__button,
.dark-mode .reset__button,
.dark-mode .search-modal__close-button {
    color: var(--c0);
    /* Parent element color */
}

.dark-mode .search__button svg,
.dark-mode .reset__button svg,
.dark-mode .search-modal__close-button svg {
    fill: var(--c0);
    /* Ensure the SVG is the correct color */
}

.dark-mode .search-options-container label,
.dark-mode .search-options-container select:focus,
.dark-mode .search-options-container label {
    color: #ccc;
}

.dark-mode .search-options-container select {
    background-color: var(--c11);
}

/* Collection */
.dark-mode .load-media {
    border: 3px dotted var(--c0);
    border-style: solid solid dotted dotted;
}

.dark-mode .load-media::after {
    border: 3px dotted var(--c0);
    border-style: solid solid dotted;
}


/* ================================ A CAUTIONARY TALE ================================*/
.dark-mode .page-card {
    background-color: #0F0F0F;
}


/* ================================ Digital Diary & Playlist Section ================================*/
.dark-mode .multicolumn-card {
    border: 0.1rem solid var(--c0);
    background: var(--c11);
}

.dark-mode .instafeed-lightbox .lightbox-instagram {
    background-color: var(--c11);
}

.dark-mode .instafeed-lightbox .lightbox-instagram .description {
    color: var(--c0);
}

.dark-mode .instafeed-lightbox .lightbox-instagram .instafeed-header {
    border-bottom: 1px solid #111;
}

.dark-mode .instafeed-lightbox .lightbox-instagram .instafeed-fullname {
    color: var(--c0);
}

.dark-mode .instafeed-lightbox .lightbox-instagram .post-date {
    border-top: 1px solid #111;
}

.dark-mode .instafeed-lightbox .lightbox-instagram .instafeed-header-logo img {
    filter: invert(1);
    -webkit-filter: invert(1);
}

/* ================================ Playlists ================================*/
.dark-mode .black_viper_playlist .header_title_section {
    border-bottom: 1px solid var(--c0);
    border-top: 1px solid var(--c0);
}

.dark-mode .black_viper_playlist .header_text_block {
    color: var(--c0);
}

.dark-mode .card__desc {
    color: var(--c0);
}


/* ================================================================================================ */
/* FANCY BUTTON */
/* ================================================================================================ */
/* Button Styling */
.dark-mode button.fancy:not(.overlay button.fancy) {
    transition: all 0.3s ease-in-out;
    background-color: var(--c11);
    border: 2px solid var(--c0);
    color: var(--c11);
}

.dark-mode button.fancy:not(.overlay button.fancy)::before {
    background: var(--c0);
}

.dark-mode button.fancy:not(.overlay button.fancy) a,
.dark-mode button.fancy:not(.overlay button.fancy) p {
    color: var(--c0);
}

.dark-mode button.fancy:not(.overlay button.fancy) .top-key,
.dark-mode button.fancy:not(.overlay button.fancy) .bottom-key-1,
.dark-mode button.fancy:not(.overlay button.fancy) .bottom-key-2,
.dark-mode button.fancy:not(.overlay button.fancy):hover::before {
    background: var(--c11);
}

.dark-mode button.fancy:not(.overlay button.fancy):hover {
    color: var(--c11);
    background: var(--c0);
}

.dark-mode button.fancy:not(.overlay button.fancy):hover a,
.dark-mode button.fancy:not(.overlay button.fancy):hover p {
    color: var(--c11);
}


/* ================================================================================================ */
/* ABOUT ME IMAGE */
/* ================================================================================================ */
.dark-mode .media-intro-image .background-media-text__image {
    filter: invert(1);
    -webkit-filter: invert(1);
}

/* ================================================================================================ */
/* SIDE NAVIGATION */
/* ================================================================================================ */
.dark-mode #chapter-nav {
    border: 1px solid var(--c0);
    background-color: var(--c11);
}

.dark-mode .chapter-link .line {
    background-color: var(--c0);
}

.dark-mode .chapter-link .label {
    color: #ccc;
}

.dark-mode #chapter-nav .chapter-link:not(.main-link):hover {
    background-color: #333;
}

.dark-mode .chapter-link:not(.main-link).active {
    background-color: #333;
    color: var(--c0);
}