/*
 Theme Name: The View
 Theme URI: https://www.codenep.com/
 Description: A modern simple News theme
 Author: Anish Blon Lama
 Author URI: https://www.codenep.com/
 Template: uku
 Version: 1.0
*/





:root {
	--gray0: #fff;
	--gray1: #dbe1e8;
	--gray2: #b2becd;
	--gray3: #6c7983;
	--gray4: #454e56;
	--gray5: #2a2e35;
	--gray6: #12181b;
	--footer-bg: #f2eee9;
	--background: var(--gray0);
	--text-color: var(--gray6);
	--link-color: var(--gray6);
	--nav-bg: var(--gray0);
	--nav-shadow: 4px 0 10px -3px #010101;
	--nav-border: 2px dashed var(--text-color);
	--card-bg: #fff;
	--card-border: #000;
	--card-shadow: 0 4px 8px rgba(0, 0, 0, 0.38);
	--card-radius: 0.25em;
	--border-color: #000;
	--widget-bg: var(--gray0);
	--widget-border: var(--border-color);
	--grayscale-percentage: 0;
	transition: all .3s ease
}

.darkmode--activated {
	--background: var(--gray6);
	--text-color: var(--gray1);
	--link-color: var(--gray0);
	--widget-bg: var(--gray5);
	--widget-border: #2a2e3560;
	--nav-bg: var(--gray5);
	--footer-bg: #2a2e35;
	--border-color: #454e56;
	--nav-shadow: 4px 0 10px -3px #010101;
	--card-bg: var(--gray5);
	--card-border: #fff;
	--card-deep-bg: #fff;
	--card-shadow: 0 4px 8px rgba(0, 0, 0, 0.38);
	--card-radius: 0.25em;
	--grayscale-percentage: 35%;
	transition: all .3s ease
}

.light--activated {
	--background: var(--gray0);
	--text-color: var(--gray6);
	--link-color: var(--gray6);
	--nav-shadow: 4px 0 10px -3px #c1c1c1;
	--card-bg: #fff;
	--card-border: #fff;
	--card-deep-bg: #000;
	--card-shadow: 0 4px 8px rgba(0, 30, 84, 0.12);
	--nav-bg: #fff;
	--footer-bg: #f2eee9;
	--border-color: #000;
	transition: all .5s ease
}

body {
	font-family: 'Mukta', sans-serif;
	background: var(--background);
	color: var(--text-color);
}

body .container-all { font-family: 'Mukta', sans-serif; }

img {
  filter: grayscale(var(--grayscale-percentage));
}

section article {
	-webkit-box-shadow: 0px 2px 7px rgba(22,30,106,0.3);
	-moz-box-shadow: 0px 2px 7px rgba(22,30,106,0.3);
	box-shadow: 0px 2px 7px rgba(22,30,106,0.3);
    border-radius: 10px; 
	padding: 10px 20px 5px !important;
	border-top :0 !important;
}

#front-section-threecolumn article {
	margin-bottom: 15px !important;
}

section .section-one-column-two article {
	margin-bottom: 15px !important;
	padding: 5px !important;
	
}
	
#sidebar-offcanvas .widget h2.widget-title,
.single-post .entry-header p.intro, .entry-meta, .entry-cats, .entry-summary, .front-section-title, .social-front-title, .widget_mc4wp_form_widget p, .jetpack_subscription_widget #subscribe-text p, .section-about-column-one p { color: var(--text-color); }

.button-darkmode-toggle { position: relative; margin-left: 10px; }
	
.button-darkmode-toggle svg {
    fill: var(--text-color);
	height: 24px;
	width: 24px;
	position: absolute;
}


.inner-offcanvas-wrap,
#colophon, .uku-serif .big-instagram-wrap { background: var(--footer-bg) !important; }


#colophon, #colophon .footer-menu ul a, #colophon .footer-menu ul a:hover, #colophon #site-info, #colophon #site-info a, #colophon #site-info, #colophon #site-info a:hover, #footer-social span, #colophon .social-nav ul li a, .uku-serif .big-instagram-wrap .null-instagram-feed .clear a, .uku-serif .big-instagram-wrap .widget h2.widget-title {
    color: var(--text-color) !important;
}

/*.sticky-header, .inner-offcanvas-wrap, aside.widget-area .widget {  background: var(--card-bg) !important; border: 1px solid var(--card-bg) !important; } */

.sticky-header { background: var(--background); }

.widget h2.widget-title, .footer-menus-wrap { border-bottom: 1px solid var(--border-color); }
.widget h2.widget-title { border-top: 1px solid var(--border-color); }

.front-section-title, .social-front-title,
.blog-wrap h3.blog-title, .archive-header h1.archive-title { border-top: 4px solid var(--border-color); }

.widget h2.widget-title,
.footer-menus-wrap { border-bottom: 1px solid var(--border-color) !important; }

a, .entry-header h2.entry-title, .entry-header h2.entry-title a, #secondary h2.widget-title, #sidebar-page h2.widget-title, .entry-meta a, .entry-cats a,
.pagination, .pagination a { color: var(--text-color); }


.pagination { border: 2px solid var(--border-color); }

#overlay-nav { border-top: 1px solid var(--border-color); }
#overlay-nav ul li { border-bottom: 1px solid var(--card-border); }

#overlay-nav ul ul.sub-menu, #overlay-nav ul ul.children { border-bottom: 1px solid var(--border-color); }

@media only screen and (max-width: 768px) {
	.close-btn-wrap, .mobile-search, #site-branding { background: var(--background) !important; border-bottom: 1px solid var(--background) !important; }
}