@charset "UTF-8";
/*
Theme Name: دیوان
Author: آرمین امیری نسب
Author URI: https://www.zhaket.com/store/web/novatheme
Description: قالب موسیقی دیوان یک قالب مینیمال و تاثیر گرفته از پلتفرم های اشتراک موسیقی مانند اسپاتیفای ، اپل موزیک و ... است که سعی می کند تمام امکانات یک پلتفرم موسیقی را داشته باشد. دیوان به صورت خاص برای وبسایت های مدرن و ترجیحا با موسیقی رپ جدید طراحی شده است و با مرور زمان به قالب کامل تری تبدیل می شود :)
Version: 1.0.0
Text Domain: matarsak
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/
.music-widget figure {
  position: relative;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

/* Shine */
.music-widget figure::before {
  position: absolute;
  top: 0;
  left: -75%;
  z-index: 2;
  display: block;
  content: "";
  width: 50%;
  height: 100%;
  background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%);
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%);
  -webkit-transform: skewX(-25deg);
  transform: skewX(-25deg);
}

.music-widget figure:hover::before {
  -webkit-animation: shine 1s;
  animation: shine 1s;
}

@-webkit-keyframes shine {
  100% {
    left: 125%;
  }
}
@keyframes shine {
  100% {
    left: 125%;
  }
}
/* Rotate */
* {
  text-decoration: none !important;
  transition: all 0.3s;
  color: var(--color4);
}

.border-bottom,
.border,
.border-top {
  border-color: var(--color2) !important;
}

.rank-math-breadcrumb,
#breadcrumbs {
  padding: 5px 0;
}
.rank-math-breadcrumb a,
#breadcrumbs a {
  background: var(--color2);
  padding: 3px 15px;
  border-radius: 5px;
  font-size: 12px;
}

.small {
  font-size: 12px;
}

body {
  font-family: "IranSans";
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
  padding-bottom: 100px;
}
body ul,
body ol {
  list-style: none;
}
body p {
  margin: 0;
  line-height: 2;
  text-align: justify;
}
body input {
  background-color: transparent;
}
body button,
body .button,
body input[type=submit] {
  border: none;
  text-align: center;
  border-radius: 5px;
  background-color: var(--color2);
  border: 1px solid var(--color2);
  padding: 8px 15px;
}
body button:hover,
body .button:hover,
body input[type=submit]:hover {
  border-color: var(--color3);
  background-color: var(--color1);
}
body input[type=text],
body textarea {
  background-color: var(--color2);
  padding: 7px 12px;
  color: var(--color4);
  border: 1px solid var(--color1);
  border-radius: 10px;
}
body input[type=text]:focus,
body textarea:focus {
  background-color: var(--color2);
  outline: none;
}
body a {
  color: var(--color4);
}

img {
  border-radius: 5px;
}

b,
h1,
h2,
h3,
h4,
h5,
h6,
.bold {
  font-weight: bold;
  line-height: 1.5rem;
}

#commentform input[type=text],
#commentform textarea {
  width: 100%;
}
#commentform * {
  margin: 5px 0;
}

#loader {
  z-index: 999;
  width: 100%;
  height: 100%;
}

.comment {
  margin: 30px 0;
  padding: 15px;
  border-radius: 10px;
  background-color: var(--color1);
  filter: contrast(1.1);
}
.comment .comment-author {
  margin: 0 0 10px 0;
}
.comment .comment-author img {
  border-radius: 30px;
}
.comment .reply {
  margin: 10px 0;
}
.comment .reply a {
  border: none;
  text-align: center;
  border-radius: 5px;
  background-color: var(--color2);
  border: 1px solid var(--color2);
  padding: 5px 15px;
}
.comment .reply a:hover {
  border-color: var(--color3);
  background-color: var(--color1);
}

.nav-links {
  margin: 30px auto;
}
.nav-links * {
  font-size: 17px !important;
  margin: 5px;
}
.nav-links .current {
  font-weight: bold;
  background-color: var(--color2);
  border-radius: 20px;
  padding: 5px 15px;
  margin: 0;
}

.blur-header {
  background-color: rgba(0, 0, 0, 0);
  -webkit-backdrop-filter: blur(10px);
  z-index: 1021;
  backdrop-filter: blur(10px);
}

header.header-top img {
  width: 100%;
  height: 55px;
}
header.header-top i {
  font-size: 22px;
  cursor: pointer;
}

.headeroff {
  width: 350px !important;
}
.headeroff .offcanvas-header {
  position: relative;
}
.headeroff .offcanvas-header img {
  width: 100%;
  height: 100%;
  padding: 10px 50px 0 50px;
}
.headeroff .offcanvas-header .close {
  position: absolute;
  top: 20px;
  right: 10px;
  font-size: 20px;
}

.header-menu ul {
  width: 100%;
  z-index: 20;
  padding: 0;
}
.header-menu ul ul.sub-menu {
  backdrop-filter: contrast(1.2);
  border-radius: 5px;
  display: none;
}
.header-menu a {
  display: inline-block;
  padding: 7px 20px;
  margin: 5px 0;
}
.header-menu li {
  cursor: pointer;
  border-radius: 5px;
  z-index: 20;
  transition: all 1s;
  width: 100%;
}
.header-menu li:hover {
  background-color: var(--color1);
  filter: contrast(1.1);
  display: block;
}
.header-menu li:hover::after {
  display: none;
}
.header-menu li:hover ul.sub-menu {
  display: block;
  z-index: -5;
  animation: fadeIn; /* referring directly to the animation's @keyframe declaration */
  animation-duration: 1.5s; /* don't forget to set a duration! */
}

.menu-item-has-children {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.menu-item-has-children::after {
  content: "\f078";
  font-family: "Font Awesome 5 Free";
  display: inline-block;
  padding-left: 10px;
  vertical-align: middle;
  font-weight: 900;
}

footer p {
  font-size: 14px;
}
footer a {
  font-size: 18px;
  margin: 0 5px;
}
.play {
  line-height: 1 !important;
  width: 40px;
  height: 40px;
  background-color: var(--color2);
  cursor: pointer;
}
.play:hover {
  opacity: 0.9;
  background-color: var(--color4);
  color: var(--color1);
}

.music-widget h2 {
  font-weight: bold;
  font-size: 22px;
}
.music-widget h1 {
  font-size: 30px;
}
.music-widget span {
  font-size: 14px;
  margin-top: -16px;
  color: var(--color3);
}
.music-widget .music-widget-title a {
  font-size: 14px;
  display: flex;
  align-items: center;
}
.music-widget .music-widget-title i {
  font-size: 18px;
  margin-right: 10px;
}

.music-widget.track h5 {
  font-size: 16px;
  margin-top: 5px;
  margin-bottom: 3px;
}
.music-widget.track span {
  font-size: 12px;
}

.music-story {
  height: 300px;
  background-size: cover;
  background-position: center center;
}

.music-widget.artists h5 {
  font-size: 15px;
  text-align: center;
}

.music-widget.albums h5 {
  font-size: 18px;
  margin-bottom: 3px;
}
.music-widget.albums span {
  font-size: 13px;
  margin-top: -5px;
}

#post * {
  margin: 25px 0;
}

#n404 {
  color: rgb(220, 220, 220);
}
#n404 h1 {
  font-size: 6rem;
}
#n404 span {
  color: rgb(144, 144, 144);
}
#n404 p {
  font-size: 20px;
}

@media (min-width: 576px) {
  #n404 h1 {
    font-size: 9rem;
  }
  #n404 p {
    font-size: 25px;
  }
}
input[type=range] {
  height: 24px;
  -webkit-appearance: none;
  margin: 10px 0;
  width: 100%;
}

input[type=range]:focus {
  outline: none;
}

input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 4px;
  cursor: pointer;
  animate: 0.2s;
  background: var(--color3);
  border-radius: 5px;
  border: 0px solid var(--color3);
}

input[type=range]::-webkit-slider-thumb {
  height: 18px;
  width: 18px;
  border-radius: 50px;
  background: var(--color4);
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -7px;
}

input[type=range]::-moz-range-track {
  width: 100%;
  height: 4px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: 1px 1px 1px var(--color2);
  background: var(--color3);
  border-radius: 5px;
  border: 0px solid var(--color2);
}

input[type=range]::-moz-range-thumb {
  height: 18px;
  width: 18px;
  border-radius: 50px;
  background: var(--color4);
  border: none;
  cursor: pointer;
}

input[type=range]::-ms-track {
  width: 100%;
  height: 4px;
  cursor: pointer;
  animate: 0.2s;
  background: transparent;
  border-color: transparent;
  color: transparent;
}

input[type=range]::-ms-fill-lower {
  background: var(--color2);
  border-radius: 10px;
  box-shadow: 1px 1px 1px var(--color2);
}

input[type=range]::-ms-fill-upper {
  background: var(--color2);
  border-radius: 10px;
  box-shadow: 1px 1px 1px var(--color2);
}

input[type=range]::-ms-thumb {
  margin-top: 1px;
  border: 0px solid var(--color3);
  height: 18px;
  width: 18px;
  border-radius: 50px;
  background: #ffffff;
  cursor: pointer;
}

.comment-meta + p {
  padding: 15px;
}

.mejs-controls span {
  color: white;
}

.mejs-controls button:hover {
  background-color: inherit;
}/*# sourceMappingURL=style.css.map */