/*
 Theme Name:   BLOGGYAANI
 Theme URI:    https://bloggyaani.com/
 Description:  BLOGGYAANI Official Theme.
 Author:       Shaikh Masood Alam
 Author URI:   https://bloggyaani.com/
 Template:     bricks
 Version:      2.1
 Text Domain:  bricks
*/

/* Custom Variables for BLOGGYAANI */
:root {
	--bg-font-head: -apple-system,system-ui,BlinkMacSystemFont,segoe ui,Helvetica,Arial,sans-serif,apple color emoji,segoe ui emoji,segoe ui symbol;
  	--bg-font-body: -apple-system,system-ui,BlinkMacSystemFont,segoe ui,Helvetica,Arial,sans-serif,apple color emoji,segoe ui emoji,segoe ui symbol;
	--bg-font-w-n: 400;
	--bg-font-w-b: 600;
	--bg-p-clr: #063dc9;
	--bg-p-l-clr: #054ce0;
	--bg-p-d-clr: #062eb3;
	--bg-p-xl-rgb-clr: rgba(5, 76, 224, 0.1);
	--bg-p-xxl-rgb-clr: rgba(5, 76, 224, 0.2);
	--bg-wh-clr: #ffffff;
	--bg-wh-d-clr: #fcfafb;
	--bg-bl-clr: #222222;
	--bg-bl-d-clr: #151515;
	--bg-bl-xd-clr: #0c0c0c;
	--bg-body-clr: #f5f5f5;
	--bg-border-clr: #e9eff6;
	--bg-generatepress-color: #212121;
	--bg-kinsta-color: #2A0E0B;
	--bg-wp-rocket-color: #172153;
	--h1: clamp(3rem, 0.588vw + 2.812rem, 3.4rem); /* 30 - 34 */
	--h2: clamp(2.6rem, 0.588vw + 2.412rem, 3rem); /* 26 - 30 */
	--h3: clamp(2.2rem, 0.588vw + 2.012rem, 2.6rem); /* 22 - 22 */
	--h4: clamp(2rem, 0.294vw + 1.906rem, 2.2rem); /* 20 - 22 */
	--text-s: 1.2rem;
	--text-m: 1.4rem;
	--text-l:1.6rem;
	--text-xl: 1.8rem;
	--text-xxl: 2rem;
	--border-width-s: 0.1rem; 
	--border-width: 0.2rem;
	--border-width-l: 0.5rem;
	--gap-s: 1rem;
	--gap: clamp(2rem, 0.735vw + 1.765rem, 2.5rem); /* 20 - 25 */
	--list-gap: clamp(1rem, 0.735vw + 0.765rem, 1.5rem); /* 10 - 15 */
	--section-padding: clamp(2rem, 1.471vw + 1.529rem, 3rem); /* 20 - 30 */
	--gap-xxxl-five: clamp(3rem, 2.941vw + 2.059rem, 5rem); /* 30 - 50 */
	--button-padding: var(--list-gap) var(--gap);
	--bg-button-min-width: 12rem;
	--bg-min-width: 70rem;
	--bg-mid-width: 850rem;
	--bg-max-width: 100rem;
}

/* Essential Settings */
::-moz-selection {
    background: var(--bg-p-xl-rgb-clr);
    color: var(--bg-bl-clr);
  }::selection {
    background: var(--bg-p-xl-rgb-clr);
    color: var(--bg-bl-clr);
}
.brxe-container {
    width: var(--bg-max-width);
    padding-left: var(--section-padding);
	padding-right: var(--section-padding);
}
body {
	font-family: var(--bg-font-body);
	font-size: var(--text-xxl);
	font-weight: var(--bg-font-w-n);
	background-color: var(--bg-body-clr);
	color: var(--bg-bl-clr);
}
.home-post_main {
	padding-top: var(--section-padding);
	padding-bottom: var(--section-padding);
}
@media (min-width: 767px) {
.home-post_main {
	display: grid; 
	align-items: initial; 
	grid-gap: var(--gap); 
	grid-template-columns: 70% 30%;
	}
}
.blog-post_main-body {
	width: var(--bg-min-width);
	padding: var(--section-padding);
}
.header_main {
	padding-top: var(--list-gap);
	padding-bottom: var(--list-gap);
}
.footer_main {
	padding-top: var(--gap);
	padding-bottom: var(--gap-s);
}
/* Fonts */

h1 {
	font-family: var(--bg-font-head);
	font-size: var(--h1);
	font-weight: var(--bg-font-w-b);
}
h2 {
	font-family: var(--bg-font-head);
	font-size: var(--h2);
	font-weight: var(--bg-font-w-b);
}
h3 {
	font-family: var(--bg-font-head);
	font-size: var(--h3);
	font-weight: var(--bg-font-w-b);
}
h4 {
	font-family: var(--bg-font-head);
	font-size: var(--h4);
	font-weight: var(--bg-font-w-b);
}
strong {
	font-size: 95%;
	font-weight: var(--bg-font-w-b);
}
.blog-post_main-body h2 {
	margin-bottom: var(--text-xl);
}
.blog-post_main-body h3 {
	margin-bottom: var(--text-xl);
}
.head-logo {
	font-size: var(--h3);
	padding: var(--text-s) 0;
}
.head-hamburger {
	margin-top: var(--text-l);
}
@media (min-width: 767px) {
.head-hamburger {
	margin-top: 0;
}
}
.text-m {
	font-size: var(--text-m);
}
.text-l {
	font-size: var(--text-l);
}
.bg-font-h {
	font-weight: var(--bg-font-w-b);
}

/* Colors */

.bg-white_background {
	background-color: var(--bg-wh-clr);
}
.bg-white_foreground {
	color: var(--bg-wh-clr);
}
.bg-black_background {
	background-color: var(--bg-bl-clr);
}
.bg-link a {
	border-bottom: solid var(--border-width) var(--bg-p-clr);
}
.bg-link a:hover {
	background-color: var(--bg-p-xl-rgb-clr);
}

/* Home and Categories */
.read-more {
	float: right;
	font-weight: var(--text-xxl);
	margin-top: var(--gap);
}
.bg-home_list-image {
	margin-bottom: var(--gap-s);
}
@media (max-width: 389px) {
.bg-post_list-img {
	margin-top: var(--gap-s);
	margin-right: var(--gap);
	width: 30rem;
	min-width: 30rem;
	max-width: 30rem;
	height: 15rem;
	min-height: 15rem;
	max-height: 15rem}
}
@media (min-width: 390px) {
.bg-post_list-img {
	margin-top: var(--gap-s);
	margin-right: var(--gap);
	width: 36rem;
	min-width: 36rem;
	max-width: 36rem;
	height: 18rem;
	min-height: 18rem;
	max-height: 18rem}
}
@media (min-width: 530px) {
.bg-post_list-img {
	margin-top: var(--gap-s);
	margin-right: var(--gap);
	width: 49rem;
	min-width: 49rem;
	max-width: 49rem;
	height: 24.5rem;
	min-height: 24.5rem;
	max-height: 24.5rem}
}

@media (min-width: 767px) {
.bg-post_list-img {
	float: left;
	margin-top: var(--gap-s);
	margin-right: var(--gap);
	width: 25rem;
	min-width: 25rem;
	max-width: 25rem;
	height: 12.5rem;
	min-height: 12.5rem;
	max-height: 12.5rem}
}

/* About Us */

.bg-about_shadow {
	box-shadow: 0 0 var(--section-padding) 0 var(--bg-p-xxl-rgb-clr);
}

/* Comments */

.logged-in-as {
	font-size: var(--text-l);
}
.brxe-post-comments .comment-meta .comment-reply-link {
	background-color: var(--bg-p-clr);
	color: var(--bg-wh-clr);
}
.brxe-post-comments .comment-meta .comment-reply-link:hover {
	background-color: var(--bg-bl-clr);
	color: var(--bg-wh-clr);	
}

/* Sidebar */
.bg-sidebar_gap {
	column-gap: var(--gap); 
	row-gap: var(--gap);
}
.bg-generatepress {
	background-color: var(--bg-generatepress-color);
	color: var(--bg-wh-color);
	padding: var(--gap) var(--list-gap);
	font-size: var(--text-xl);
}
.bg-generatepress a {
	background-color: var(--bg-wh-clr);
	color: var(--bg-bl-clr);
	padding: var(--button-padding);
	font-weight: var(--bg-font-w-b);
	font-size: var(--text-xxl);
}
.bg-kinsta {
	background-color: var(--bg-kinsta-color);
	color: var(--bg-wh-color);
	padding: var(--gap) var(--list-gap);
	font-size: var(--text-xl);
}
.bg-kinsta a {
	background-color: var(--bg-wh-clr);
	color: var(--bg-bl-clr);
	padding: var(--button-padding);
	font-weight: var(--bg-font-w-b);
	font-size: var(--text-xxl);	
}
.bg-wp-rocket {
	background-color: var(--bg-wp-rocket-color);
	color: var(--bg-wh-color);
	padding: var(--gap) var(--list-gap);
	font-size: var(--text-xl);
}
.bg-wp-rocket a {
	background-color: var(--bg-wh-clr);
	color: var(--bg-bl-clr);
	padding: var(--button-padding);
	font-weight: var(--bg-font-w-b);
	font-size: var(--text-xxl);
}
.bg-ads_text {
	margin-top: var(--border-width-l);
}
.bg-featured_text {
	margin-bottom: var(--list-gap);
}
.bg-featured_shadow {
	padding: 0 var(--list-gap);
	border: var(--border-width-s) solid var(--bg-border-clr);
  	box-shadow: 0 0 var(--section-padding) 0 var(--bg-p-xxl-rgb-clr);
}

/* Buttons */

.bg-button a {
	display: inline-block;
	font-size: var(--text-xxl);
	padding: var(--button-padding);
	text-decoration: none;
	min-width: var(--bg-button-min-width);
	text-align: center;
	background-color: var(--bg-p-clr);
	color: var(--bg-wh-clr);
	font-weight: var(--bg-font-w-b);
	box-shadow: none;
}
.bg-button a:hover {
	background-color: var(--bg-p-clr);
	color: var(--bg-wh-clr);
	box-shadow: none;
}

/* Notes & Highlight */
.bg-notes {
  background-color: var(--bg-p-xl-rgb-clr);
  color: var(--bg-bl-clr);
  clear: both;
  padding: var(--text-l) var(--text-xxl);
  margin-bottom: var(--text-xl);
  overflow: hidden;
}

.blog-post_main-body pre {
  border-left: var(--gap-s) solid var(--bg-p-clr);
  padding: var(--gap-s);
  margin: var(--section-padding) 0;
  overflow-x: auto;
  color: var(--bg-bl-clr);
  background-color: var(--bg-wh-clr);
  border-right: var(--border-width) solid var(--bg-border-clr);
  border-top: var(--border-width) solid var(--bg-border-clr);
  border-bottom: var(--border-width) solid var(--bg-border-clr);
}