@import "https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;700&display=swap";

/* ================= RESET ================= */

html,body,div,span,applet,object,iframe,
h1,h2,h3,h4,h5,h6,p,blockquote,pre,
a,abbr,acronym,address,big,cite,code,
del,dfn,em,img,ins,kbd,q,s,samp,
small,strike,strong,sub,sup,tt,var,
b,u,i,center,dl,dt,dd,ol,ul,li,
fieldset,form,label,legend,
table,caption,tbody,tfoot,thead,tr,th,td,
article,aside,canvas,details,embed,
figure,figcaption,footer,header,hgroup,
menu,nav,output,ruby,section,summary,
time,mark,audio,video {
  margin:0;
  padding:0;
  border:0;
  font-size:100%;
  vertical-align:baseline;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
  display:block;
}

*,::before,::after {
  box-sizing:border-box;
}

html,body {
  width:100%;
  overflow-x:hidden;
}

/* ================= BASE ================= */

body {
  background-color:#3d3d3d;
  font-size:16px;
  font-weight:300;
  min-width:320px;
  min-height:100vh;
  font-family:"arial",sans-serif;
  color:#e6e6e6;
  line-height:1;
}

ol,ul { list-style:none; }
a {
  text-decoration:none;
  display:inline-block;
  color:inherit;
  transition:all .2s;
}
button {
  font-size:inherit;
  border:none;
  background:transparent;
  cursor:pointer;
  padding:0;
}
input,textarea {
  font-family:inherit;
  background:transparent;
  border:none;
  outline:none;
  width:100%;
}

/* ================= LAYOUT ================= */

.container {
  max-width:1140px;
  padding:0 20px;
  margin:0 auto;
}

.page {
  padding:40px 40px 0;
  background:linear-gradient(to bottom,#212a33,#212a33);
}
@media (max-width:992px){.page{padding:25px}}
@media (max-width:550px){.page{padding:15px}}

.main {
  display:flex;
  padding-top:70px;
}
.main__inner {
  width:calc(100% - 310px);
  padding-bottom:80px;
}
@media (max-width:1400px){
  .main__inner{width:100%}
}

/* ================= UI ================= */

.btn {
  color:#fff;
  font-size:12px;
  padding:7px 33px;
  border-radius:20px;
  border:1px solid #fff;
  background:#151729;
  white-space:nowrap;
}
.btn:hover{opacity:.9}

.icon-change {
  transition:all .2s;
}

/* ================= HEADER ================= */

.header {
  background:#23313e;
  height:70px;
  padding:22px 55px 22px 85px;
  display:flex;
  align-items:center;
  position:fixed;
  width:100%;
  z-index:200;
}
@media (max-width:1600px){.header{padding:20px}}

.header__inner {
  display:flex;
  align-items:center;
  width:100%;
}

.header__logo img {
  max-width:200px;
  max-height:50px;
}
@media (max-width:500px){
  .header__logo img{max-width:130px}
}

.header__list {
  display:flex;
  align-items:center;
}
.header__list-item + .header__list-item {
  margin-left:20px;
}

/* ================= ASIDE ================= */

.aside {
  width:310px;
  padding:25px;
  background:#23313e;
  color:#fff;
}
@media (max-width:1400px){
  .aside{
    position:fixed;
    left:0;
    transform:translateX(-100%);
    transition:.2s;
    height:calc(100vh - 60px);
    overflow:auto;
    z-index:100;
  }
  .aside--active{
    transform:translateX(0);
  }
}

.aside__title {
  font-size:18px;
  font-weight:700;
  margin-bottom:20px;
}

.aside__categories-link {
  padding:5px 15px 5px 40px;
  border-radius:20px;
  display:block;
  font-size:15px;
  color:rgba(255,255,255,.5);
}
.aside__categories-link:hover {
  color:#5c65ac;
}
/* ================= RECOM ================= */

.recom {
  margin-bottom:20px;
}
.recom__inner {
  position:relative;
  width:calc(100% + 40px);
  padding:0 20px;
}
.recom__swiper {
  margin-left:-20px;
}
.recom__item {
  border-radius:15px;
  overflow:hidden;
  background:#fff;
}
.recom__item-img {
  width:100%;
  height:190px;
  object-fit:cover;
}
@media (max-width:550px){
  .recom__item-img{height:150px}
}
.recom__item-inner {
  display:flex;
  justify-content:space-between;
  padding:5px 15px;
}
.recom__item-name {
  font-size:18px;
  font-weight:300;
  color:#1c1c32;
}
.recom__item-name span {
  font-weight:700;
}
.recom__item-actions {
  display:flex;
}
.recom__item-action {
  width:20px;
  height:20px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.recom__item-action + .recom__item-action {
  margin-left:10px;
}

/* ================= NEW ================= */

.new {
  margin-bottom:20px;
}
.new__inner {
  display:flex;
  flex-wrap:wrap;
  padding:0 30px;
  margin-left:-30px;
  width:calc(100% + 60px);
}
.new__item-wrapper {
  margin:15px;
  width:calc(16.666% - 30px);
  text-align:center;
}
@media (max-width:850px){
  .new__item-wrapper{width:calc(33.333% - 14px);margin:7px}
}
@media (max-width:600px){
  .new__item-wrapper{width:calc(50% - 14px)}
}
.new__img-wrapper {
  width:180px;
  height:180px;
  border-radius:5px;
  overflow:hidden;
  margin:0 auto 10px;
  position:relative;
}
.new__img {
  width:100%;
  height:100%;
  object-fit:cover;
}
.new__play {
  opacity:0;
  width:78px;
  height:78px;
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
}
.new__img-wrapper::after {
  content:'';
  position:absolute;
  inset:0;
  background:rgba(38,34,91,.75);
  opacity:0;
  transition:.2s;
}
.new__img-wrapper:hover::after,
.new__img-wrapper:hover .new__play {
  opacity:1;
}
.new__singer {
  font-size:14px;
  font-weight:700;
}
.new__name {
  font-weight:300;
}

/* ================= TOP ================= */

.top {
  margin-bottom:50px;
}
.top__inner {
  display:flex;
  flex-wrap:wrap;
  margin-left:-10px;
  width:calc(100% + 20px);
}
.top__item {
  width:calc(50% - 20px);
  margin:10px;
  padding:10px 20px;
  border-radius:5px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  position:relative;
  box-shadow:0 2px 10px rgba(0,0,0,.4);
}
@media (max-width:850px){
  .top__item{width:100%}
}
.top__item-left {
  display:flex;
  align-items:center;
}
.top__img-wrapper {
  width:50px;
  height:50px;
  border-radius:30px;
  overflow:hidden;
  position:relative;
  margin-right:10px;
}
.top__img {
  width:100%;
  height:100%;
  object-fit:cover;
}
.top__play {
  width:40px;
  height:40px;
  position:absolute;
  inset:0;
  margin:auto;
  opacity:0;
}
.top__item:hover .top__play {
  opacity:1;
}
.top__singer {
  font-size:14px;
  font-weight:700;
}
.top__name {
  font-size:14px;
  font-weight:300;
}
.top__time {
  font-size:14px;
  margin-right:20px;
}

/* ================= SINGERS ================= */

.singers {
  padding-bottom:25px;
}
.singers__inner {
  display:flex;
  flex-wrap:wrap;
  margin-left:-20px;
  width:calc(100% + 40px);
}
.singers__item {
  margin:20px;
  width:calc(16.666% - 40px);
  text-align:center;
}
@media (max-width:768px){
  .singers__item{width:calc(33.333% - 20px)}
}
@media (max-width:450px){
  .singers__item{width:calc(50% - 20px)}
}
.singers__img-wrapper {
  height:230px;
  border-radius:15px;
  overflow:hidden;
  margin-bottom:20px;
}
.singers__img {
  width:100%;
  height:100%;
  object-fit:cover;
}
.singers__name {
  font-size:12px;
  font-weight:700;
}

/* ================= ALBUMS ================= */

.albums {
  margin-bottom:60px;
}
.albums__inner {
  display:flex;
  flex-wrap:wrap;
  margin-left:-20px;
  width:calc(100% + 40px);
}
.albums__item {
  margin:20px;
  width:calc(20% - 40px);
  text-align:center;
}
@media (max-width:992px){
  .albums__item{width:calc(33.333% - 30px)}
}
@media (max-width:450px){
  .albums__item{width:100%;margin:15px 0}
}
.albums__img-wrapper {
  height:260px;
  border-radius:10px;
  overflow:hidden;
  margin-bottom:20px;
}
.albums__img {
  width:100%;
  height:100%;
  object-fit:cover;
}
.albums__name {
  font-size:36px;
  font-weight:700;
}
.albums__singer {
  font-size:16px;
  font-weight:300;
}
/* ================= TRACK ================= */

.track {
  position:relative;
  padding:30px 40px;
  border-radius:10px;
  margin-bottom:20px;
  background:#3d566e;
  overflow:hidden;
}
.track::after {
  content:'';
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.5);
  z-index:-1;
}

@media (max-width:500px){
  .track{padding:15px}
}

/* -------- INNER -------- */

.track__inner {
  display:flex;
  align-items:flex-start;
  gap:20px;
}
@media (max-width:850px){
  .track__inner{flex-direction:column}
}

/* ================= TRACK CARD ================= */

.track__card {
  background:rgb(255 255 255 / 4%);
  border-radius:20px;
  padding:25px;
  flex-shrink:0;
  max-width:320px;
}
@media (max-width:850px){
  .track__card{
    width:100%;
    max-width:none;
    padding:15px;
  }
}

/* -------- IMAGE -------- */

.track__img-wrapper {
  width:250px;
  aspect-ratio:1/1;
  border-radius:15px;
  overflow:hidden;
  margin:0 auto 15px;
  position:relative;
  border:1px solid #000;
}
@media (max-width:850px){
  .track__img-wrapper{width:200px}
}

.track__img-wrapper-in,
.track__img {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}

/* -------- ACTIONS -------- */

.track__card-actions {
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:20px;
  flex-wrap:wrap;
  justify-content:center;
}

.track__card-action {
  display:flex;
  align-items:center;
  justify-content:center;
}

/* listen button */
.track__card-listen {
  height:30px;
  width:120px;
  border-radius:20px;
  font-size:12px;
  font-weight:500;
}
.track__card-listen span {
  margin-right:5px;
}

/* download */
.track__card-download img {
  width:32px;
  height:32px;
}

/* like */
.track__card-action.like svg {
  width:26px;
  height:26px;
}

/* ================= PLAY BUTTON ================= */

.play {
  position:relative;
  border-radius:50%;
  border:1px solid #fff;
  transition:.2s;
}
.play svg {
  position:absolute;
  inset:0;
  margin:auto;
  width:40%;
  height:40%;
}
.play__pause {
  transform:scale(0);
}
.play--paused {
  background:#1d213f;
}
.play--paused .play__go {
  transform:scale(0);
}
.play--paused .play__pause {
  transform:scale(1);
}

/* ================= TRACK INFO ================= */

.track__info {
  flex:1;
  display:flex;
  flex-direction:column;
  color:#fff;
  min-height:100%;
}

/* -------- TOP -------- */

.track__info-top {
  margin-bottom:15px;
}
.track__info-name {
  font-size:48px;
  font-weight:700;
  line-height:1.1;
}
@media (max-width:1200px){
  .track__info-name{font-size:32px}
}
@media (max-width:500px){
  .track__info-name{text-align:center}
}

.track__info-singer {
  font-size:16px;
  font-weight:500;
  margin-bottom:5px;
}

/* categories */
.cat__link {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:10px;
}
.track__info-link {
  font-size:13px;
  border:1px solid #fff;
  border-radius:10px;
  padding:0 10px;
  height:20px;
  display:flex;
  align-items:center;
}

/* -------- BOTTOM -------- */

.track__info-bottom {
  margin-top:10px;
}
.track__bottom-singers {
  font-size:14px;
  margin-bottom:10px;
}
.track__bottom-img-wrapper {
  width:60px;
  height:60px;
  border-radius:50%;
  overflow:hidden;
  box-shadow:0 0 0 1px #fff;
}
.track__bottom-img {
  width:100%;
  height:100%;
  object-fit:cover;
}

/* ================= INFO BLOCKS ================= */

.track__card-info {
  display:flex;
  align-items:center;
  font-size:12px;
  margin-top:8px;
  gap:7px;
}
.track__card-info svg {
  width:13px;
  height:13px;
}

/* ================= TEXT / LYRICS ================= */

.track__text-wrap {
  margin-top:20px;
}
.track__text {
  max-width:340px;
  max-height:380px;
  overflow-y:auto;
  font-size:14px;
  line-height:1.3;
}
@media (max-width:1200px){
  .track__text{
    max-width:none;
    max-height:250px;
  }
}

/* ================= OFFER TEXT ================= */

.sound_text_offer {
  margin-top:20px;
  font-size:14px;
  text-align:center;
  cursor:pointer;
  text-decoration:underline;
}

/* ================= PLAYER BAR ================= */

.song {
  position:fixed;
  bottom:0;
  left:0;
  width:100%;
  height:70px;
  display:flex;
  align-items:center;
  background:rgba(1,9,30,.66);
  backdrop-filter:blur(30px);
  transform:translateY(100%);
  transition:.2s;
  z-index:90;
}
.song--active {
  transform:translateY(0);
}

/* ================= COMMENTS ================= */

.comment {
  border:1px solid #747474;
  border-radius:3px;
  padding:15px;
  margin-top:10px;
  font-size:14px;
}
.comment-name {
  font-weight:600;
}
.comment-date {
  font-size:12px;
  color:#596572;
  margin-left:auto;
}

/* ================= FOOTER ================= */

.c-footer {
  color:#fff;
}
.l-body__footer {
  height:70px;
  display:flex;
  align-items:center;
  padding:0 45px;
  background:#23313e;
}
@media (max-width:480px){
  .l-body__footer{
    height:auto;
    padding:10px;
  }
}