@charset "UTF-8";

/* reset kinde of */

* {
	box-sizing: border-box;
	outline: none !important;
}

/* global */

p {
	margin: 0.25em 0;
}

a {
	text-decoration: none;
}

img, table,audio {
	max-width: 100%;
}

video {
	width: 100% !important;
	height: auto !important;
}

.imgFeat {
	width: 100%;
	height: auto;
}

.hr {
	border: 0;
	height: 15px;
	background: transparent !important;
}

/* html */

html {
	scroll-behavior: smooth;
}

/* margin and padding and width */

.fit-CON {
	width: fit-content;
}

.Hfit-CON {
	height: fit-content;
}

.mrg0, .ul, .padOmrg0 {
	margin: 0;
}

.mrgb {
	margin-bottom: 1rem;
}

.pad10 {
	padding: 10px;
}

.pad15 {
	padding: 15px;
}

.padOmrg0 {
	padding: 0;
}

.mrg-B10 {
	margin-bottom: 10px;
}

.mrg-B15 {
	margin-bottom: 15px;
}

.mrg-T10 {
	margin-top: 10px;
}

.mrg-T15 {
	margin-top: 15px;
}


/* lists */

.ul {
	list-style-type: none;
	padding: 0;
}

.li:last-child,.lib:last-child {
	margin-bottom: 0;
}

.lib:last-child {
	border-bottom: 0;
}

/* flex */

.fl,.flW,.flRe,.flWRe,.plmc {
	display: flex;
}

.flW,.flWRe {
	flex-wrap: wrap;
}

.flRe,.flWRe {
	flex-direction: row-reverse;
}

.aliI-CE,.plmc {
	align-items: center;
}

.jusCo-SP {
	justify-content: space-between;
}

.jusCo-CE,.plmc {
	justify-content: center;
}

.fl-im {
	display: flex !important;
}

.aliI-flS {
	align-items: flex-start;
}

.aliI-flE {
	align-items: flex-end;
}

.fl1 {
	flex-grow: 1;
	flex-shrink: 1;
}

/* border-radius */

.borOK {
	border-radius: 50%;
}

.borNOK {
	border-radius: 10rem;
}

.bor-INH {
	border-radius: inherit;
}

/* buttons and input[type="submit"] */

.but, input[type="submit"] {
	padding: 0;
	border: 0;
	margin: 0;
	background: transparent;
	cursor: pointer;
}

/* positioning */

.por{
	position: relative;
}

.pos,.farhana  {
	position: absolute;
}

.farhana {
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	inset: 0;
}

.zin0 {
	z-index: 0;
}

.zin1 {
	z-index: 1;
}

.zin2 {
	z-index: 2;
}

.zin3 {
	z-index: 3;
}

.zin4 {
	z-index: 4;
}

.zin5 {
	z-index: 5;
}

.zin6 {
	z-index: 6;
}

.zin7 {
	z-index: 7;
}

.zin8 {
	z-index: 8;
}

.zin9 {
	z-index: 9;
}

.zin10 {
	z-index: 10;
}

/* aligns */

.txt-R {
	text-align: right;
}

.txt-C,.plmc {
	text-align: center;
}

.txt-L {
	text-align: left;
}

.dir-L {
	direction: ltr;
}

.dir-R {
	direction: rtl;
}

/* summary */

summary {
	cursor: pointer;
}

.non-mark {
	list-style-type: none;
}

.non-mark::marker {
	color: transparent !important;
}

/* details topics... */

.non {
	display: block;
}

details .clBut .clos, details[open] .clBut .ope, .disp-N,[name="dis-N"] {
	display: none;
}

details[open] .clBut .clos {
	display: initial;
}

/* displays */

.disp-B {
	display: block;
}

/* float */

.floR {
	float: right;
}

.floL {
	float: left;
}

.clear {
	clear: both;
}

/* overflow */

.ovf-H {
	overflow: hidden;
}

.ovf-YS {
	overflow-y: scroll;
}

/* background and backG settings */

.backGSize {
	background-size: cover !important;
}

/* fonts settings */

.FSt-NOR {
	font-style: normal;
}

/* @key frames */

@keyframes fade-farhan {
	0% {
		opacity: 0;
	}
	
	100% {
		opacity: 1;
	}
}

@keyframes rot-farhan {
	0% {
		transform: rotate(0deg);
	}
	
	100% {
		transform: rotate(360deg);
	}
}

/* animations */

.fade-ME,
.stickyAs {
	animation: fade-farhan 0.6s linear 0s 1;
}

/* Fonts */

/* English Font */

@font-face {
	font-family: 'Poppins-Regular';
	src: url('https://bayanbox.ir/download/3597202278100401580/Poppins-Regular.eot');
	src: url('https://bayanbox.ir/download/3597202278100401580/Poppins-Regular.eot?#iefix') format('embedded-opentype'),
	url('https://bayanbox.ir/download/1068366696921114214/Poppins-Regular.svg#Poppins-Regular') format('svg'),
	url('https://bayanbox.ir/download/5947179238070229354/Poppins-Regular.ttf') format('truetype'),
	url('https://bayanbox.ir/download/4861806138071738912/Poppins-Regular.woff') format('woff'),
	url('https://bayanbox.ir/download/7211620908606122750/Poppins-Regular.woff2') format('woff2');
	font-weight: normal;
	font-style: normal;
}


/* Persian Font */

@font-face {
	font-family: 'Vazir-Regular';
	src: url('//bayanbox.ir/download/4827310715344697348/Vazir.eot');
	src: url('//bayanbox.ir/download/4827310715344697348/Vazir.eot?#iefix') format('embedded-opentype'),
	url('//bayanbox.ir/download/9079346587792044865/Vazir.woff2') format('woff2'),
	url('//bayanbox.ir/download/8618153108850776974/Vazir.woff') format('woff'),
	url('//bayanbox.ir/download/8657326714357973781/Vazir.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

textarea, input,
select, body,
button,
h1, h2, h3, h4, h5, h6,
.followBx, .followThis,
.cke_reset_all .cke_rtl * {
	font-family: 'Poppins-Regular','Vazir-Regular';
}


/*Lets Styling...*/


/* body */

body {
	background:  #f9f9f9 url('#'); /* background of the site */
	font-size:16px;
}

/* header part of the site */

header {
	background: #f9f9f9 url('https://bayanbox.ir/download/3516867247121498791/jacek-dylag-hUHzaiAHuUc-unsplash.jpg');
	background-size: cover;
	height: 100vh;
	width: 100%;
	flex-direction: column;
	background-attachment: fixed;
}


/* mobile or tablet menu */

.navBarButton {
    width: 25px;
    height: 25px;
    background: #37414a;
    padding-top: 5px;
    color: #fff;
    border-radius: 3px;
    font-size: 16px;
}

.navBar-mobile {
    width: 300px;
    position: fixed;
    right: -400px;
    height: 100vh;
    background: #fff;
    z-index: 10;
    padding: 25px;
    opacity: 0;
    overflow-y: auto;
    
}

.top-navBar strong {
    font-size: 20px;
    color: #000;
    margin-top: 15px;
    display: block;
}

.top-navBar a.pos {
    left: -12px;
    top: -30px;
    width: 25px;
    height: 25px;
    font-size: 19px;
    background: #f9f9f9;
    border-radius: 100px;
    color: #000;
    padding: 2px 3px;
}

.meunu-i a {
    font-size: 16px;
    color: #000;
    padding: 10px;
    border: 1px solid #e8e8e8;
    border-radius: 5px;
    text-align: center;
    transition: all 0.6s ease-out;
}

.meunu-i a:hover {
    color: #000;
    background: #e8e8e8;
    border-color:#e8e8e8;
}

#showMe_-NavBar:target ~ .navBar-mobile {
    opacity: 1;
    right: 0;
    transition:all 0.6s ease-out;
}

#closer:target ~ .navBar-mobile {
    transition: all 0.6s ease-in;
    opacity: 0;
    right: -400px;
} 

/* menu */

nav {
	top: 0;
	width: 100%;
	background: rgba(0, 0, 0, 0.1);
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
}

.menu-I a {
	font-size: 14.5px;
	color: #fff;
}

.menu-I {
	margin-left: 20px;
}

/* search bar */

div#srchBx {
	background: transparent !important;
	margin: 0 !important;
	padding: 0 !important;
}

form[action$="/search"] {
	display: flex;
	position: relative;
}

.search-wrapper {
	width: 450px;
	position: relative;
	margin:0 !important;
}

.search-wrapper input[type="text"] {
	width: 100%;
	padding: 10px;
	border: 0;
	border-radius: 3px;
	padding-left: 38px;
	background: rgba(255, 255, 255, 0.13);
	color: #fff;
}

.search-wrapper input[type="text"]::placeholder {
	color: #fff;
}

form[action$="/search"] input[type="submit"] {
	border-radius: 3px;
	left: 0;
	position: absolute;
	width: 30px;
	height: 30px;
	background: transparent !important;
}

.search-wrapper:after {
	border-radius: 2px;
	content: '\e041';
	position: absolute;
	left: 0;
	height: 32px;
	width: 30px;
	background: transparent;
	font-family: 'dripicons-v2' !important;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	color: #fff;
}


/* single picture in the header */

.img-forHead {
	width: 300px;
	height: 300px;
	background: #fff url('https://bayanbox.ir/download/4785366990625289805/single-picture.jpg');
	background-size: cover;
	margin-bottom: 15px;
}

/* short description */

.sh-Desc {
	padding: 5px;
	background: #fff;
	margin-right: 10px;
        margin-left: 10px;
}

/* enter to my world button */

.enter {
	padding: 2.5px 20px;
	border: 2px solid #fff;
	color: #fff;
	background: radial-gradient(black, transparent);
}

/* main */

main {
	margin: 0 auto;
	padding: 50px 0 15px;
	width: 920px;
}


/* article container */

#article-container {
	width: 610px;
}

/*bread crumbs*/

.breadCrumbs {
	background: #fff;
	border-radius: 5px;
	box-shadow: 0 0 3px #e8e8e8;
	font-size: 12.5px;
}

.breadCrumbs a:nth-child(1) {
	color: cadetblue;
}

.post-categories {
    color: cadetblue;
}

.spacer-Br {
	padding: 0 5px;
	color: #898989;
}

.thePostUserThere {
	color: #ddd;
}

/* comments */

#comment_box_title {
	border: 2px solid #e8e8e8;
	border-radius: 6px;
	color:#000;
}

#comment_box_title span {
	color:#d5b28d;
}

.formField2 textarea {
	border: 2px solid #e8e8e8;
	resize: none;
	height: 65px;
	background: #f9f9f9 url('#');
}

.formField2 textarea {
	border: 2px solid #e8e8e8;
	resize: none;
	height: 65px;
	background: #f9f9f9;
	width: 100%;
}

select {
	padding: 3px;
	border: 2px solid #e8e8e8;
	appearance: none;
	border-radius: 5px;
	width: 100%;
	cursor: cell;
}

.formField2 input.text {
	padding: 3px;
	border: 2px solid #e8e8e8;
	border-radius: 5px;
	background: #fff;
	font-size: 12px;
}

div.inputFix {
	padding: 0;
}

.smalltip {
	display: none !important;
}

.bComForm .commentAvatar img {
	border: 0;
	padding: 5px;
	background: repeating-linear-gradient(45deg, #cacaca, transparent 1px);
	box-shadow:0 0 3px #e8e8e8;
	border-radius: 100px;
}

.bComForm .commentAvatar span {
	display: none !important;
}

#comment_box {
	padding: 10px;
	background: #fff;
	box-shadow: 0 0 3px #e8e88e;
}

.formField2 label {
	text-align: right;
}

.formField2 .fldcontent {
	padding: 0;
	margin: 25px 0 0 0;
}

.formField2 label:not([for]) { 
	background: #e8e8e8;
	width: fit-content;
	color:#000;
	border-radius: 8px 0 0 8px;
	padding-right: 5px;
	font-size:12px;
}

input#bComSub {
    margin: 0;
    text-align: center;
    width: 100%;
    color: #62320f;
    padding: 5px;
    background: #d5b28d;
}

/* comments list */

.CoMsLiSt {
    border-radius: 5px;
}

.top-container img.borOK {
    margin-left: 10px;
}

.ex-pA {
    width: calc(100% - 65px);
}

.comment_website {
    top: 0;
    left: 0;
    width: 25px;
    height: 25px;
    background: #ffdddd;
    padding-top: 3px;
    color: #a7227e;
}

.date-coms {
    font-size: 12.5px;
}

.ex-pA b {
    font-size: 16px;
}

.comsTxt {
    margin: 19px 15px 0;
    padding: 10px;
    border-radius: 5px;
    font-size: 13.5px;
}

/*user comments*/

.CoMsLiSt.i1 {
    background: #fff;
    box-shadow: 0 0 3px #e8e8e8;
}

.CoMsLiSt.i1 .top-container .ex-pA {
	padding-left:35px;
}

.CoMsLiSt.i1 .top-container .ex-pA b {
	color: #000;
}

.CoMsLiSt.i1 .top-container .ex-pA .date-coms {
	color: #979797;
}

.CoMsLiSt.i1 .comsTxt {
	color: #000;
	background: #f3f3f3;
}

/*admin comments*/

*[id^="farhan-comment-"]:target {
    background: linear-gradient(45deg, #13a0b7, #e5eaf9);
}

.CoMsLiSt.i2 {
    background: #fff;
    box-shadow: 0 0 3px #e8e8e8;
}

.comsTxt {
    background: #e5eaf9;
}

a.toWhom {
    color: cadetblue;
    text-shadow: 0px -2px 3px #70c0c3;
}

/* article posts */

.post-IL {
	background: #fff;
	padding: 20px;
	box-shadow: 0 0 3px #e8e8e8;
}

.posNAME a {
	font-size: 18.72px;
	color: #000;
}

.mainTxt {
	font-size: 14px;
	color: #535353;
}

.imgPosCons:hover > .overlAy {
	opacity: 1;
}

.overlAy {
	background: rgba(0, 0, 0, 0.6);
	color: #fff;
	opacity: 0;
}

.imgPosCons:hover > .Ximg{
	transform: scale(2);
	-webkit-transform: scale(2);
	-o-transform: scale(2);
	-ms-transform: scale(2);
	-moz-transform: scale(2);
}

.Ximg {
	transition: all 8s linear;
	-webkit-transition: all 8s linear;
	-moz-transition: all 8s linear;
	-o-transition: all 8s linear;
}

.read_more {
	font-size: 13.5px;
	color: #8282a6;
	background: #f9f9f9;
	padding: 2.5px 8px;
	border-radius: 100px;
}

.like {
	margin-left: 7px;
	font-size: 13.5px;
	padding: 4px 13px 0.5px;
	background: #f9f9f9;
	border-radius: 100px;
	color: #a7a8a9;
	display:block;
}

.comMe {
	padding: 4px 13px 0.5px;
	font-size: 13.5px;
	background: #f9f9f9;
	border-radius: 100px;
	color: #a7a8a9;
	display:block;
}

.like:hover,
.rate-button-box.rated .like{
	background: #e74c3c26;
	color: #E74C3C;
	opacity: 0.8;
	box-shadow: 0 0 3px #fdb5b2;
}

.comMe:hover {
	background: #e349ff26;
	color: #E349FF;
	opacity: 0.8;
	box-shadow: 0 0 3px #f0c0f9;
}

.read_more:hover {
	background: #2ecc7126;
	color: #2ECC71;
	opacity: 0.8;
	box-shadow: 0 0 3px #2ecc7126;
}

.tagPost-I a {
	display: block;
	font-size: 11.5px;
	padding: 2.5px 0 0 10px;
	color: #949494;
	transition: all 0.31s ease;
	-webkit-transition: all 0.31s ease;
	-o-transition: all 0.31s ease;
	-moz-transition: all 0.31s ease;
}


.tagPost-I a:before {
	content: '#';
	font-size: 10px;
}

.tagPost-I a:hover {
	color:#000;
	text-decoration:underline;
}

/* pagination box */ 

.paginBox {
	background: #fff;
	border-radius: 5px;
	box-shadow: 0 0 3px #e8e8e8;
	padding: 0 10px;
}

.paginBox a {
	padding: 2.5px 20px;
	margin: 7.5px 0;
	display: block;
	border-radius: 100px;
	background: #f3f3f3;
	color: #aaa;
}

.paginBox a:hover {
	background: #d9a7e1;
	color: #673ab7;
}

.howMUpOsT {
    background: #fff;
    box-shadow: 0 0 3px #e8e8e8;
    border-radius: 10px;
    font-size: 16px;
    color: #000;
}

/* typography */

.mainTxt h1 {
    font-size: 22px;
    margin: 8px 0;
}

.mainTxt hr {
    border: 0;
    margin: 1em 0;
    border-bottom: 9px solid #f9f9f9;
}

.mainTxt ul li::marker {color: #ff5722;}

ul {}

.mainTxt ol {
    counter-reset: farhan-ol-list;
    list-style: none;
}

.mainTxt ol li {
    counter-increment: farhan-ol-list;
    margin-bottom: 8px;
    position: relative;
}

.mainTxt ol li:after {
    content: counter(farhan-ol-list);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 1.5rem;
    height: 1.5rem;
    position: absolute;
    top: 0;
    right: -37px;
    left: 0;
    bottom: 0;
    inset: 0 -37px 0 0;
    border-radius: 50%;
    font-size: .9em;
    background: #FFC107;
    color: #000000;
    font-weight: 500;
}



blockquote {
    background: #ddd;
    padding: 10px;
    border-radius: 10px;
    border-width: 5px;
    font-style: normal;
    border-color: #aaa;
    color: #000;
    margin: 1em;
    position: relative;
}



.mainTxt a {
    color: cadetblue;
    text-decoration: 2px underline;
    padding: 2px;
}

.mainTxt a:hover {
    color: cadetblue;
    background: #f5f5f5;
}

.mainTxt h2 {
    font-size: 21px;
}

.mainTxt h3 {
    font-size: 16.38px;
}

.mainTxt h4 {font-size: 14px;}

.mainTxt h5 {
    font-size: 11.62px;
}

.mainTxt h6 {
    font-size: 9.38px;
}

/* 404 page */

.messageBoxes section[name^="which :"],
.messageBoxes section[name^="which :"] P[id^="i"]
{
	display:none;
}

.messageBoxes section[name="which : چنین مطلبی وجود ندارد"] p#i1,
.messageBoxes section[name="which : چنین صفحه ای وجود ندارد (آدرس اشتباه است)"] p#i2,
.messageBoxes section[name="which : لینک آرشیو معتبر نیست"] p#i3 {
	display:block;
}

.messageBoxes section[name="which : چنین مطلبی وجود ندارد"],
.messageBoxes section[name="which : چنین صفحه ای وجود ندارد (آدرس اشتباه است)"],
.messageBoxes section[name="which : لینک آرشیو معتبر نیست"] {
	padding: 15px;background: #afd1f6;
	border-radius: 6px;
	display:block;
}

.goBackHome {
	padding: 4px 19px;
	border-radius: 5px;
	border: 2px solid #fff;
	color: #fff;
	margin-top: 15px;
	display: inline-block;
}

.MessageTxt {
	color: #000;
	font-size:16px;
}



/* side bar */

aside {
	width: 290px;
}

/* 

برنامه نویس گرامی این رو واسه تو مینویسم
دلیل نوشتن یک استایل برای بخش های زیر که همگی سکشن های
بخش ساید بار هستند اعم از آخرین پست ها و ... این بوده که
اگر احیانن خواستی واسه هر کدوم از بخش استایلی خارج از استایل های 
پیش فرضی که من نوشتم بنویسی یه تگ پرنت (پدر) داشته باشی
تا بتونی فرزنداش رو سلکت کنی موفق باشی میتونی اگر سوالی داشتی با من
از اینجا در ارتباط باشی 

web : https://farhanwd.blog.ir
email : amberboy.ir@gmail.com
extra email : hanf5087@gmail.com

بهتره بیای وبم ولی اگر سوال داشتی و دسترسی به وب نداشتی میتونی به دوتا ایمیلم ایمیل بزنی 

*/

/* INFO BLOG */

.info,
.last-comments,
.Recent-Posts,
.ssTAB,
.list-categories,
.list-Tags,
.Archive-List,
.LiNK-List,
.music-part{
	background: #fff;
	border-radius: 0 0 6px 6px;
	box-shadow: 0 0 3px #e8e8e8;
}

.LC-I:last-child a,
.RP-I:last-child a,
.Cat-I:last-child a,
.arch-I:last-child a  {
	border-radius: 0 0 6px 6px;
}

.list-Tags,
.LiNK-List {
	border-radius: 6px;
}

.list-Tags .head-title,
.LiNK-List .head-title {
	padding-top: 10px;
	padding-bottom: 0;
}
/* تصویر گرد توی ساید بار */

.img-gerd,
.head-inSide-Bar section.pos {
	width: 70px;
	height: 70px;
	background: #ddd url('https://i.pinimg.com/originals/10/f5/06/10f506084cf4cad46606cc4572abac21.png');
	background-size: cover !important;
	left: 8px;
	bottom: -30px;
	border: 5px solid #fff;
}


/* اسم بلاگتون توی ساید بار */

.blN {
	color:#000;
	font-size: 16px;
	padding-top: 5px;
	width: fit-content;
}

/* بخش توضیحات بلند بلاگتون */

.long-desc {
	font-size: 13.5px;
	color: #535353;
}

/* دکمه فالو در ساید بار بلاگتون */

.followBut {
	padding: 2.5px 16px;
	background: linear-gradient(45deg, #dd8e7b, #c24c5b);
	color: #fff;
}

/* کد زیر نیازی به ادیت نداره توضیح هم نمیدم ولی اصن تغییرش ندید */

.xf[name*="https://blog.ir/panel/-/followed_blogs?"] {
	display: block;
}

/* 
بخش هدر هر ساید بار حتما توی پیشنمایش دیدید که هر بخش از ساید بار دو تصویر داره
خب الان میخوام واسه هر بخش تصویر ها رو بزاریم خب 
*/

.head-inSide-Bar {
	height: 100px;
	background-size: cover !important;
}

.head-inSide-Bar section.pos {
	top: auto;
	bottom: -20px;
}

.head-title {
	padding-top: 20px;
	font-size: 16px;
	color: #000;
	font-weight: 600;
}

/* خب بریم تک تک تصویر ها رو بزاریم */

/* بخش آخرین دیدگاه ها */

[name="LC"] {
	background: #dd8e7b url('https://wc.wallpaperuse.com/wallp/86-860075_s.png');
	background-position-y: -5px;
}

/* تصویر کوچیکه */

[name="LC"] section.pos {
	background: #ddd url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ9o2vvuEmdwBuKnY2KTMVP09gopIiIzrpj84zIb9M6xW21f-bYGqDzzu8wlwo23a3YwqM&usqp=CAU');
}

/* بخش آخرین پست ها */

[name="RP"] {
	background: #dd8e7b url('https://i.pinimg.com/originals/ee/ca/95/eeca951391d851fd77a0dc480669ee99.jpg');
	background-position-y: -5px;
}

/* تصویر کوچیکه */

[name="RP"] section.pos {
	background: #ddd url('https://i.pinimg.com/736x/e0/15/2b/e0152b0dc40929de82965fd206f92388.jpg');
}

/* بخش موزیک لیست */

[name="MU"] {
	background: #dd8e7b url('https://cdn.wallpapersafari.com/63/21/Z0BrJa.jpg');
	background-position-y: center;
}

/* تصویر کوچیکه */

[name="MU"] section.pos {
	background: #ddd url('https://i.pinimg.com/originals/63/87/e6/6387e6f08f0ba24bdc79f71913f29ce3.jpg');
}


/* محبوبترین پست ها */

[name="PP"] {
	background: #dd8e7b url('https://i.pinimg.com/originals/66/c4/c2/66c4c2f2df2d28f570c733ea8f4fb982.jpg');
	background-position-y: -5px;
}

/* تصویر کوچیکه */

[name="PP"] section.pos {
	background: #ddd url('https://i.pinimg.com/564x/28/44/57/284457b763ad7aca39e17a13e2baf979.jpg');
	background-position-y: bottom;
}

/* پر بازدید ترین ها */

[name="VP"] {
	background: #dd8e7b url('https://i.pinimg.com/originals/f5/04/a9/f504a9e5f31fbc006b4aa217c688512e.jpg');
	background-position-y: -5px;
}

/* تصویر کوچیکه */

[name="VP"] section.pos {
	background: #ddd url('https://i.pinimg.com/736x/47/d7/bd/47d7bd9a56efa5f03137046308d67cc0.jpg');
}

/* پر بحث ترین ها */

[name="CP"] {
	background: #dd8e7b url('https://i.pinimg.com/originals/e3/b7/6d/e3b76d80dde07010889d70c1597ecc28.jpg');
	background-position-y: -30px;
}

/* تصویر کوچیکه */

[name="CP"] section.pos {
	background: #ddd url('https://cdn.statically.io/img/fancyodds.com/wp-content/uploads/2021/12/Girl-Wallpaper-Cartoon-9.jpg');
	background-position-y: bottom;
}

/* بخش موضوعات */

[name="CT"] {
	background: #dd8e7b url('https://i.pinimg.com/736x/a4/c8/14/a4c81419802b78f329ef856a17dfe105--grey-hair-white-hair.jpg');
	background-position-y: 0;
}

/* تصویر کوچیکه */

[name="CT"] section.pos {
	background: #ddd url('https://i.pinimg.com/236x/b9/dd/2c/b9dd2c6dde5dee4186286b1d1ae65c87.jpg');
	background-position-y: bottom;
}

/* بخش آرشیو */

[name="AR"] {
	background: #dd8e7b url('https://i.pinimg.com/564x/dd/97/7d/dd977d50dfcda2cefcded8d857898242.jpg');
	background-position-y: 0;
}

[name="AR"] section.pos {
	background: #ddd url('https://wallpaperaccess.com/full/663312.jpg');
	background-position-y: bottom;
}

/* نشونش دادم last comments بخش آخرین نظرات توی وب به اسم   */

.LC-I a img {
	border: 5px solid;
	margin-left: 10px;
}

/* بهتره که هردوی رنگ زیر یکی باشند */

.LC-I a,.LC-I a img {
	background: #fff;
	border-color: #fff;
}

/* بخشی که اسم و کامنت وجود داره */

.LC-I a .ex {
	width: calc(100% - 65px);
	padding: 5px;
	border-radius: 3px;
}

.LC-I a .ex, .LC-I a .ex span {
	background: #f9f9f9;
}

/* کد زیر رو به هیچ وجه تغییر ندهید */

.LC-I a .ex span {
	width: 10px;
	height: 10px;
	right: -5px;
	transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
}


/* اسم کسی که کامنت داده */

.LC-I a .ex b {
	color: #000;
	font-size: 14px;
}

/* رنگ متن کامنت */

.LC-I a .ex section {
	color: #535353;
	font-size: 13px;
	white-space: nowrap;
	text-overflow: ellipsis;
}

/* وقتی ماوس میره روی هر بخش از آخرین کامنت ها یا زمانی که در گوشی روش به اصطلاح کلیک میشه */

.LC-I a:hover {
	background: #e8e8e8;
}

/* در تیکه کد زیر هر دو باید یک رنگ باشند */

.LC-I a:hover > .img {
	border-color: #fff;
	background: #fff;
}

.LC-I a:hover > .ex,
.LC-I a:hover > .ex span {
	background: #f9f9f9;
}

.LC-I a:hover > .ex b {
	color: #000;
}

.LC-I a:hover > .ex section {
	color: #535353;
}

/* recent posts */

.RP-I a {
	background: #fff;
}

.RP-I a .img {
	width: 55px;
	height: 55px;
	border-radius: 4px;
	margin-left: 10px;
	background-size: cover !important;
	background-position: center !important;
}

.RP-I a .ex {
	width: calc(100% - 65px);
}

.RP-I a .ex h4 {
	color: #000;
	font-size: 14px;
}

.RP-I a .ex span {
	font-size: 11.5px;
	color: #535353;
}

.RP-I a:hover {
	background: #e8e8e8;
}

.RP-I a:hover > .img {
	border-radius: 50%;
}

.RP-I a:hover > .ex h4 {
	color: #000000;
	text-shadow: 2px 2px 3px #535353;
}

.RP-I a:hover > .ex span {
	color: #000;
}


/* tab container */

.key-con-tab {
	background: #fff;
	box-shadow: 0 0 3px #e8e8e8;
}

.tab-key {
	padding: 10px 0;
	background: #fff;
	flex-grow: 1;
	text-align: center;
	border: 1px dashed transparent; 
}

.tab-key:hover {
	border-color: #e8e8e8;
}

.tab-key span {
	font-size: 11.5px;
	color: #000;
}

a[href="#View-Visited-Posts"]  i {
	background: #2ecc7126;
	color: #2ECC71;
}

a[href="#View-Commented-Posts"]  i {
	background: #e349ff26;
	color: #E349FF;
}

a[href="#View-Popular-Posts"]  i {
	background: #e74c3c26;
	color: #E74C3C;
}

.tab-key i {
	justify-content: center;
	align-items: center;
	height: 25px;
	display: inline-flex;
	border-radius: 6px;
	width: 25px;
	margin-right: 4px;
}

/* متن کلیک کن روی دکمه ها */

.clickOne {
	margin: 20px;
	padding: 10px;
	font-size: 11.6px;
	color: #000;
	background: #e8e8e8;
	border-radius: 5px;
}

/* dropdowns */

.deta .sum {
	position: relative;
	background: #fff;
	width: 100%;
	box-shadow: 0 0 3px #e8e8e8;
	border-radius: 6px;
	padding-left: 25px;
	color: transparent;
}

.deta .sum:before {
	content: '▦';
	position: absolute;
	left: 8px;
	color:#000;
}

.deta[open] .sum:before {
	content:'⇪';
}

.deta .sum span, .deta .sum i {
	color: #000;
}

/* category list */

.Cat-I a {
	background: #fff;
}

.Cat-I a span {
	font-size: 13.5px;
	color: #000;
	font-weight: 600;
	padding-left: 10px;
}

.Cat-I a i {
	padding: 0 10px;
	font-size: 11.5px;
	background: #e9e9e9;
	border-radius: 100px;
	color: #000;
}

.Cat-I a:hover {
	background: #e74c3c26;
}

.Cat-I a:hover span {
	color: #000;
}

.Cat-I a:hover > i {
	background: #e994a9;
	color: #fbe4da;
}

/* tag cloud */

.tg-I {
	margin-left: 5px;
	margin-bottom: 5px;
}

.tg-I a {
	color: #000;
	font-size: 13.5px;
	padding: 2.5px 10px;
	display: block;
	border-radius: 2px;
	background: #fff;
	border: 1px solid #e8e8e8;
	position: relative;
}

.tg-I a:before {
	content: '#';
}

.tg-I a:hover {
	color: #fff;
	background: #c24c5b;
	border-color: #c24c5b;
}

/* archive */

.arch-I a {
	background:#fff;
}


.arch-I a section {
	padding-left: 10px;
	font-size: 13.5px;
}

.arch-I a section span {
	color:#000;
	padding-left:3px;
}

.arch-I a section i {
	color:#e86f80;
}

.arch-I a div {
	width: 25px;
	height: 25px;
	background-size: 100% 100% !important;
}

.arch-I a:hover {
	background: #fbe4ff;
}

.arch-I a:hover > section span {
	color: #710984;
}

.arch-I a:hover > section i {
	color: crimson;
}

/* بهار */

.arch-I a div[name*="Farvardin"],
.arch-I a div[name*="Ordibehesht"],
.arch-I a div[name*="Khordad"],
.arch-I a div[name*="فروردين"],
.arch-I a div[name*="ارديبهشت"],
.arch-I a div[name*="خرداد"],
.arch-I a div[name*="March"],
.arch-I a div[name*="April"],
.arch-I a div[name*="May"]
{
	background: url('https://www.svgrepo.com/show/99381/spring.svg');
}

/* تابستان */

.arch-I a div[name*="Tir"], 
.arch-I a div[name*="Mordad"], 
.arch-I a div[name*="Shahrivar"],
.arch-I a div[name*="تیر"],
.arch-I a div[name*="مرداد"],
.arch-I a div[name*="شهریور"],
.arch-I a div[name*="June"],
.arch-I a div[name*="July"],
.arch-I a div[name*="August"]
{
	background: url('https://www.svgrepo.com/show/9335/summer.svg');
}


/* پاییز */

.arch-I a div[name*="Mehr"],
.arch-I a div[name*="Ababn"],
.arch-I a div[name*="Azar"],
.arch-I a div[name*="مهر"],
.arch-I a div[name*="آبان"],
.arch-I a div[name*="آذر"],
.arch-I a div[name*="September"],
.arch-I a div[name*="October"],
.arch-I a div[name*="November"]
{
	background: url('https://www.svgrepo.com/show/64198/autumn.svg');
}

/* زمستان */

.arch-I a div[name*="Dey"],
.arch-I a div[name*="Bahman"],
.arch-I a div[name*="Esfand"],
.arch-I a div[name*="دی"],
.arch-I a div[name*="بهمن"],
.arch-I a div[name*="اسفند"],
.arch-I a div[name*="December"],
.arch-I a div[name*="January"],
.arch-I a div[name*="February"]
{
	background: url('https://www.svgrepo.com/show/246278/snowing-winter.svg');
}

/* stats */

.statContainer {
    box-shadow: 0 0 3px #e8e8e8;
    padding: 10px;
    border-radius: 6px;
    margin-top: 15px;
    background: #fff;
}

.stI-I {
    padding: 7px;
    border: 1px solid #e8e8e8;
    border-radius: 3px;
    font-size: 12.12px;
}

.nameStat {
    display: block;
    padding-top: 0;
    margin-bottom: 8px;
}

.stI-I div {
    color: #000;
    padding-left: 10px;
}

.stI-I i.FSt-NOR {
    display: block;
    padding: 0 8px;
    background: #f4f4f4;
    border-radius: 100px;
    color: #000;
}

/* links and daily links */

.link-I a {
	padding: 5px;
	border: 1px solid #e8e8e8;
	font-size: 13.5px;
	color: #000;
	border-radius: 3px;
}

.link-I a:hover {
	background:#e8e8e8;
	border-color:#e8e8e8;
	color:#000;
}


.transIt,
.transall *,
.LC-I a,
.img,
.paginBox a,
.LC-I a .ex,
.LC-I a .ex * {
	transition: all 0.3s ease-in;
	-webkit-transition: all 0.3s ease-in;
	-moz-transition: all 0.3s ease-in;
	-o-transition: all 0.3s ease-in;
}



*:target,
*:target ~ .ssTAB {
	animation: fade-farhan 1s linear 0s 1 !important;
}

#View-Visited-Posts:target ~ .VVP,
#View-Commented-Posts:target ~ .VCP,
#View-Popular-Posts:target ~ .VPP {
	display: block;
}

[id^="View-"]:target ~ .mustHide {
	display: none;
}

.dripicons-exit {
	padding-left: 3px;
}

.sticky {
	position: sticky;
	position: -webkit-sticky;
	top: 15px;
}

/*footer*/

footer {
	background: #fff;
	box-shadow: 1px -3px 3px #e8e8e8;
}

.farhan {
	background: #ffc107;
	width: fit-content;
	margin: 0 auto 5px;
	padding: 6px 30px;
	border-radius: 5px;
	color: #000000;
	font-weight: 600;
	position:relative;
}

footer a {
	color: cadetblue;
}

.farhan i {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 87%;
	width: fit-content;
	padding: 3px 6px;
	background: #f2b600;
	border-radius: 100px;
	color: #000;
	font-size: 11.35px;
	box-shadow: inset 1px 1px 5px 3px #d29d00,
		inset 2px 1px 2px 3px #ffa538;
}

/*music sectios scrollbar*/

.music-part ul.ul.ovf-YS::-webkit-scrollbar {
	width: 5px;
}

.music-part ul.ul.ovf-YS {
	background:#000;
}

.music-part ul.ul.ovf-YS::-webkit-scrollbar-thumb {
	background-color: #b3c316;
}

/*music section*/

.player-music-farhan-container {
	box-shadow: 0 0 3px rgb(169 181 49);
}

.music-I {
	border-color:#acbc0d !important;
}

.player-music-farhan-container, .music-I {
	background: #cddc39; /*این رو میگم .. اگر اینو تغییر بدی رنگ بخش موزیک تغییر میکنه لطفا دیگه کد های پایین این رو اصلا تغییر نده*/
} 

/* 

از این بخش به پایین اصن تغییر ندید اگر میخواید رنگ دکمه موزیک تغییر کنه فقط
رنگ کد بالا رو تغییر بدید حله همین تاکید میکنم تغییر ندید

*/

.music-part .ul.ovf-YS {
	max-height: 180px;
}

.music-I {
	border-bottom: 1px solid;
}

.name-music {
	font-size: 13.5px;
	padding-right: 5px;
}

.player-music-farhan-container {
	width: 30px;
	height: 30px;
}

.player-music-farhan-container *p {
	margin: 0 !important;
	color: transparent !important;
}


.player-music-farhan-container audio{
	position: absolute;
	width: 100px !important;
	min-width: 100px !important;
	max-width: 100px !important;
	height: 35px !important;
	min-height: 35px !important;
	max-height: 35px !important;
	left: -11px;
	top: -2px;
	opacity: 0.3;
	/* for css compatibility i set the transform property to '0' TOO😉 */
	transform: translateX(0);
	-moz-transform: translateX(2px);
}

.music-I:after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	inset: 0;
	opacity: 0.3;
	/* رنگ های پایین رو به هیچ وجه تغییر ندهید */
	background: -webkit-linear-gradient(0deg ,  #f1f3f4 , #f1f3f4);
	background: -moz-linear-gradient(0deg,#3d2626,#3d2626);
}



/*responsive*/

/* responsive */

@media only screen and (max-width:935px) {
    main {
        width: 100%;
    }

    .sEcCont {
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    
    aside {
        width: 610px;
		margin-top:15px;
    }

    .head-inSide-Bar {
        height: 175px;
    }
	
    .search-wrapper {
        width: 250px;
    }
}

@media only screen and (max-width:800px) {
    nav .ul.flW {
        display: none;
    }

    .navBarButton {
        display: flex;
    }

    .navBar-mobile {
        display: block;
    }
}

@media only screen and (max-width:630px) {
    #article-container,
    aside {
        width: 98%;
    }
}

@media only screen and (max-width:350px) {
	.search-wrapper {
        width: 185px;
    }
	
	.navBar-mobile {width:100%;}
	
}

@media only screen and (max-width:315px) {
    .img-forHead {
        width: 200px;
        height: 200px;
    }
	
	.farhan i {
    left: 50%;
    top: 65%;
    transform: translateX(-50%);
}

.farhan {
    padding-bottom: 22px;
}
}

@media only screen and (max-width:260px) {
	.search-wrapper {
        width:110px;
    }
	
}

@media only screen and (max-width:215px) {
    .img-forHead {
        width: 180px;
        height: 180px;
    }
}

@media only screen and (max-width:200px) {
    .img-forHead {
        width: 115px;
        height: 115px;
    }
}