@import"https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;0,900;1,400&display=swap";*{padding:0px;margin:0px;box-sizing:border-box;list-style:none;text-decoration:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}input,textarea,select,button{font-family:"Roboto",sans-serif;font-size:16px;font-weight:400}body{font-family:"Roboto",sans-serif;font-size:16px;line-height:1.5;color:#111;background:#f9f9f8}strong{font-weight:700}p{margin-bottom:15px}a{color:#111;transition:color .3s ease}a:hover{color:#226752}.hidden{display:none}::-webkit-scrollbar{width:8px}@media(max-width: 600px){::-webkit-scrollbar{width:3px}}::-webkit-scrollbar-track{background:#eee}::-webkit-scrollbar-thumb{background:#d4d4d4;border-radius:8px;transition:all .3s ease}@media(max-width: 600px){::-webkit-scrollbar-thumb{border-radius:3px}}::-webkit-scrollbar-thumb:hover{background:#cbcbcb}.button-fav{padding:15px;border-radius:8px;border:1px solid #d9d9d8;background:rgba(0,0,0,0);transition:all .3s ease;display:flex;align-items:center;gap:10px}@media(max-width: 600px){.button-fav span{display:none}}.button-fav:hover{border:1px solid #5efb8c;background:#82eda1;color:#226752}.button-fav:hover i{color:#226752}.button-fav i{color:#82eda1;transition:all .3s ease}.button-nav{padding:15px;border-radius:8px;border:1px solid #5efb8c;background:#82eda1;transition:all .3s ease;display:none;align-items:center;gap:10px}@media(max-width: 600px){.button-nav{display:flex}.button-nav span{display:none}}.button-nav i{color:#226752;transition:all .3s ease}.button-hero{width:max-content;padding:15px;border-radius:8px;border:1px solid #5efb8c;background:#82eda1;transition:all .3s ease;display:flex;align-items:center;gap:10px}.button-hero:hover{background:#5efb8c}.button-play{padding:15px;border-radius:8px;border:1px solid #5efb8c;background:#82eda1;transition:all .3s ease;display:flex;align-items:center;gap:10px}.button-play:hover{background:#5efb8c}.button-download{padding:15px;border-radius:8px;border:1px solid #5efb8c;background:#82eda1;transition:all .3s ease;display:flex;align-items:center;gap:10px;flex-grow:1;justify-content:center}@media(max-width: 600px){.button-download{justify-content:flex-start}}.button-download:hover{background:#5efb8c}.button-download small{background:#b2ffc8;font-size:12px;padding:3px 8px;border-radius:20px}.button-fav-add{padding:15px;border-radius:8px;border:1px solid #5efb8c;background:#82eda1;transition:all .3s ease;display:flex;align-items:center;gap:10px}.button-fav-add:hover{background:#5efb8c}.button-all{padding:10px 15px;display:flex;align-items:center;gap:10px;border-radius:35px;border:1px solid #d9d9d8;color:#226752;transition:all .3s ease}.button-all:hover{border:1px solid #5efb8c;background:#82eda1;color:#226752}.button-all:hover i{color:#226752;opacity:1}.button-all i{opacity:.5;transition:all .3s ease}.button-contact{padding:10px 15px;display:flex;align-items:center;gap:10px;border-radius:35px;border:1px solid #d9d9d8;color:#226752;transition:all .3s ease}@media(max-width: 600px){.button-contact{font-size:14px;padding:8px 10px}}.button-contact:hover{border:1px solid #5efb8c;background:#82eda1;color:#226752}.button-contact:hover i{color:#226752;opacity:1}.button-contact i{opacity:.5;transition:all .3s ease}.button-reset{width:max-content;padding:10px 20px;border-radius:8px;border:1px solid #d9d9d8;color:#226752;background:rgba(0,0,0,0);transition:all .3s ease;display:flex;align-items:center;gap:10px}.button-reset:hover{background:#effff4;border:1px solid #5efb8c}.button-send{width:max-content;padding:10px 20px;border-radius:8px;border:1px solid #5efb8c;background:#82eda1;transition:all .3s ease;display:flex;align-items:center;gap:10px}.button-send:hover{background:#5efb8c}.alert{margin:0 10px;width:calc(100% - 20px);max-width:1200px;display:flex;align-items:center;gap:10px;padding:20px;border-radius:10px;background:#f3f8f4;border:1px solid #dcf6e3;font-weight:300;font-size:18px}@media(max-width: 600px){.alert{margin:0 5px;width:calc(100% - 10px);padding:10px;font-size:16px}}.alert-red{margin:0 10px;width:calc(100% - 20px);max-width:1200px;display:flex;align-items:center;gap:10px;padding:20px;border-radius:10px;background:#f9f0ed;border:1px solid #f8d5cf;font-weight:300;font-size:18px}@media(max-width: 600px){.alert-red{margin:0 5px;width:calc(100% - 10px);padding:10px;font-size:16px}}.alert-red i{color:#f63d26}.alert-green{margin:0 10px;width:calc(100% - 20px);max-width:1200px;display:flex;align-items:center;gap:10px;padding:20px;border-radius:10px;background:#f3f8f4;border:1px solid #dcf6e3;font-weight:300;font-size:18px}@media(max-width: 600px){.alert-green{margin:0 5px;width:calc(100% - 10px);padding:10px;font-size:16px}}.alert-green i{color:#5efb8c}.alert-blue{margin:0 10px;width:calc(100% - 20px);max-width:1200px;display:flex;align-items:center;gap:10px;padding:20px;border-radius:10px;background:#eef4f8;border:1px solid #c6e3f8;font-weight:300;font-size:18px}@media(max-width: 600px){.alert-blue{margin:0 5px;width:calc(100% - 10px);padding:10px;font-size:16px}}.alert-blue i{color:#269ff6}.alert-purple{margin:0 10px;width:calc(100% - 20px);max-width:1200px;display:flex;align-items:center;gap:10px;padding:20px;border-radius:10px;background:#f3f0f8;border:1px solid #e3d6f8;font-weight:300;font-size:18px}@media(max-width: 600px){.alert-purple{margin:0 5px;width:calc(100% - 10px);padding:10px;font-size:16px}}.alert-purple i{color:#9f26f6}#sidebar{width:240px;height:100vh;padding:10px;position:fixed;top:0px;left:0px;border-right:1px solid rgba(34,34,34,.1019607843);display:flex;flex-direction:column;gap:30px;overflow:auto;background:#f9f9f8;transition:all .3s ease}@media(max-width: 600px){#sidebar{width:100%;height:auto;top:66px;position:fixed;border-right:none;border-bottom:1px solid rgba(34,34,34,.1019607843);transform:translateY(-100%)}#sidebar.active{transform:translateY(0%)}#sidebar .logo{display:none}#sidebar .populars{display:none}}.logo{display:flex;align-items:center;gap:10px;padding:10px}.logo img{max-height:45px;max-width:45px}.logo h1{font-size:36px;font-weight:700;color:#111}nav#main{width:100%;display:flex;flex-direction:column}nav#main ul{display:flex;flex-direction:column;width:100%}nav#main ul li{display:flex;width:100%}nav#main ul a{display:flex;align-items:center;gap:10px;width:100%;padding:15px 10px;border-radius:8px;transition:all .3s ease}nav#main ul a i{transition:all .3s ease}nav#main ul a:hover,nav#main ul a.active{border-radius:8px;background:rgba(130,237,161,.1019607843)}nav#main ul a:hover i,nav#main ul a.active i{color:#82eda1}nav#moods{width:100%;display:flex;flex-direction:column;gap:10px}nav#moods h5{font-size:14px;font-weight:400;opacity:.4;padding:0 10px}nav#moods ul{display:flex;flex-direction:column;width:100%}nav#moods ul li{display:flex;width:100%}nav#moods ul a{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;padding:15px 10px;border-radius:8px;transition:all .3s ease}nav#moods ul a i{transition:all .3s ease;opacity:.1}nav#moods ul a:hover,nav#moods ul a.active{border-radius:8px;background:rgba(130,237,161,.1019607843)}nav#moods ul a:hover i,nav#moods ul a.active i{color:#82eda1;opacity:1}.populars{width:100%;display:flex;flex-direction:column;gap:10px}.populars h5{font-size:14px;font-weight:400;opacity:.4;padding:0 10px}.populars-wrapper{width:100%;display:flex;flex-direction:column;gap:1px}.populars-wrapper .mp3-sm{flex-shrink:initial;flex-grow:initial;flex-basis:initial;min-width:100%;background:rgba(0,0,0,0)}#app{width:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:20px;padding-left:240px}@media(max-width: 600px){#app{padding-left:0px}}#header{width:100%;position:sticky;z-index:9;top:0px;border-bottom:1px solid rgba(34,34,34,.1019607843);background:rgba(249,249,248,.5843137255);backdrop-filter:blur(10px);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px 0}@media(max-width: 600px){#header{padding:10px 0}}#header-logo{display:none}@media(max-width: 600px){#header-logo{display:flex}}#header-logo img{max-height:45px;max-width:45px}#header-wrapper{margin:0 10px;width:calc(100% - 20px);max-width:1200px;height:45px;display:flex;align-items:flex-start;justify-content:space-between;gap:10px}@media(max-width: 600px){#header-wrapper{gap:5px;margin:0 5px;width:calc(100% - 10px)}#header-wrapper .button-fav{display:none}}#search{width:100%;display:flex;flex-direction:column;background:#f3f3f2;border:1px solid #d9d9d8;border-radius:8px;position:relative;overflow:hidden}#search form{width:100%;display:flex;flex-direction:column}#search-input{height:45px;border:none;border-radius:8px;background:rgba(0,0,0,0);padding:0 35px 0 10px}#search-input:focus{outline:none}#search-button{border:none;background:rgba(0,0,0,0);position:absolute;top:13px;right:10px;font-size:18px;opacity:.5;transition:all .3s ease;cursor:pointer}#search-button:hover{opacity:1}#suggestions{width:100%;display:flex;flex-direction:column;border-top:1px solid rgba(34,34,34,.1019607843)}.suggestion{width:100%;padding:10px;display:flex;justify-content:space-between;align-items:center;transition:all .3s ease;cursor:pointer}.suggestion:hover{background:#e8e8e7}.suggestion i{opacity:.1}.mp3{flex:1 0 320px;min-width:320px;display:flex;align-items:center;justify-content:space-between;border-radius:10px;padding:5px;background:#f3f8f4;transition:all .3s ease}@media(max-width: 600px){.mp3{flex:1 0 100%;min-width:100%}}.mp3:hover{background:#edf8ef}.mp3:hover .mp3-img img{transform:scale(1.5)}.mp3:hover .playground{background:#82eda1}.mp3-file{display:flex;align-items:center;gap:10px}.mp3-img{display:flex;flex-shrink:0;width:70px;height:70px;overflow:hidden;border-radius:5px}.mp3-img img{width:100%;height:100%;object-fit:cover;transition:all .9s ease}.mp3-text{display:flex;flex-direction:column;gap:5px}.mp3-text span:first-child{font-size:18px;font-weight:600;max-height:36px;overflow:hidden}.mp3-text span:last-child{font-size:14px;font-weight:300;max-height:28px;overflow:hidden}.mp3-play{display:flex;align-items:center;padding:5px;gap:10px}.mp3-play>span{font-size:14px;opacity:.4}.playground{width:45px;height:45px;display:flex;align-items:center;justify-content:center;border-radius:50%;color:#226752;background:#dcf6e3;transition:all .3s ease}.mp3-sm{flex:1 0 230px;min-width:230px;display:flex;align-items:center;gap:10px;padding:10px;border-radius:8px;background:rgba(130,237,161,.0509803922);transition:all .3s ease}.mp3-sm:hover{background:rgba(130,237,161,.1019607843)}.mp3-sm:hover .mp3-sm-img img{transform:scale(1.5)}.mp3-sm:hover .mp3-sm-img::before{opacity:1}.mp3-sm:hover .mp3-sm-img i{opacity:1}.mp3-sm-img{display:flex;flex-shrink:0;width:40px;height:40px;border-radius:5px;overflow:hidden;position:relative;color:#226752}.mp3-sm-img img{width:100%;height:100%;object-fit:cover;transition:all .9s ease}.mp3-sm-img::before{content:"";position:absolute;top:0px;left:0px;width:100%;height:100%;border-radius:5px;background:rgba(130,237,161,.8);opacity:0;transition:all .3s ease;z-index:2}.mp3-sm-img i{position:absolute;left:50%;top:50%;transform:translate(-50%, -50%);opacity:0;transition:all .6s ease;z-index:3}.mp3-sm>span{max-height:32px;overflow:hidden}.mp3-mood{flex:1 0 230px;min-width:230px;display:flex;align-items:center;gap:10px;padding:10px;border-radius:8px;background:rgba(130,237,161,.0509803922);transition:all .3s ease}.mp3-mood:hover{background:rgba(130,237,161,.1019607843)}.mp3-mood>i{width:35px;height:35px;display:flex;align-items:center;justify-content:center;border-radius:50%;color:#226752;background:#dcf6e3;transition:all .3s ease}.mp3-mood>span{max-height:32px;overflow:hidden}.mp3-m{flex:1 0 280px;min-width:280px;display:flex;gap:5px;padding:5px;border-radius:8px;background:rgba(130,237,161,.0509803922);transition:all .3s ease}.mp3-m:hover{background:rgba(130,237,161,.1019607843)}.mp3-m:hover .mp3-m-img img{transform:scale(1.5)}.mp3-m:hover .mp3-m-img::before{opacity:1}.mp3-m:hover .mp3-m-img i{opacity:1}.mp3-m-img{width:90px;height:90px;display:flex;flex-shrink:0;border-radius:5px;overflow:hidden;position:relative}.mp3-m-img img{width:100%;height:100%;object-fit:cover;transition:all .9s ease}.mp3-m-img::before{content:"";position:absolute;top:0px;left:0px;width:100%;height:100%;border-radius:5px;background:rgba(130,237,161,.8);opacity:0;transition:all .3s ease;z-index:2}.mp3-m-img i{position:absolute;left:50%;top:50%;transform:translate(-50%, -50%);opacity:0;transition:all .6s ease;z-index:3;font-size:24px}.mp3-m-text{width:100%;display:flex;flex-direction:column;justify-content:space-between;padding:5px}.mp3-m-artist{display:flex;flex-direction:column;gap:5px}.mp3-m-artist span:first-child{font-weight:600;max-height:32px;overflow:hidden}.mp3-m-artist span:last-child{font-size:14px;font-weight:300;max-height:28px;overflow:hidden}.mp3-m-stats{display:flex;justify-content:space-between;font-size:14px;opacity:.5}.mp3-m-stats>div{display:flex;gap:5px}.hero{margin:0 10px;width:calc(100% - 20px);max-width:1200px;min-height:400px;display:flex;align-items:center;gap:30px;padding:40px;border-radius:10px;background:linear-gradient(280deg, rgba(130, 237, 161, 0.2117647059) 0%, rgba(130, 237, 161, 0.0705882353) 100%)}@media(max-width: 600px){.hero{margin:0 5px;width:calc(100% - 10px);flex-direction:column;padding:10px}}.hero-text{display:flex;flex-direction:column}.hero-text h1{margin-bottom:10px;font-size:26px;font-weight:700;color:#226752}.hero-content{margin-bottom:15px}.hero-content p{line-height:1.5}.hero-content p:last-child{margin-bottom:0px}.hero-img{max-width:345px;max-height:345px;object-fit:contain}@media(max-width: 600px){.hero-img{order:-1;max-width:100%;max-height:auto}}#mp3{display:flex;flex-direction:column;margin:0 10px;width:calc(100% - 20px);max-width:1200px;gap:15px}@media(max-width: 600px){#mp3{margin:0 5px;width:calc(100% - 10px);gap:5px}}#mp3>h1{font-size:32px}@media(max-width: 600px){#mp3>h1{font-size:26px}}#mp3-wrapper{display:flex;align-items:center;gap:20px;padding:30px;border-radius:10px;background:#f3f8f4}@media(max-width: 600px){#mp3-wrapper{flex-direction:column;padding:10px}}#mp3-img{width:250px;height:250px;aspect-ratio:1/1;border-radius:8px;object-fit:cover}@media(max-width: 600px){#mp3-img{width:100%;height:auto}}#mp3-text{width:100%;display:flex;flex-direction:column;gap:20px}@media(max-width: 600px){#mp3-text{gap:10px}}#mp3-artist{display:flex;flex-direction:column;gap:5px}#mp3-artist>h2{font-size:26px;font-weight:700;color:#226752}#mp3-artist>h3{font-size:18px;font-weight:300}#mp3-info{display:flex;align-items:center;justify-content:space-between}@media(max-width: 600px){#mp3-info{flex-direction:column;gap:10px}}#mp3-stats{display:flex;gap:10px;font-size:14px;opacity:.8}@media(max-width: 600px){#mp3-stats{width:100%;justify-content:space-between}}#mp3-stats>div{display:flex;gap:5px}#mp3-share{display:flex;gap:10px;align-items:center}@media(max-width: 600px){#mp3-share{width:100%;justify-content:space-between}}#mp3-share>span{font-size:14px;opacity:.8}#mp3-share>ul{display:flex;gap:10px;background:#dff0e4;padding:10px;border-radius:8px}#mp3-share>ul li{display:flex}#mp3-share>ul{display:flex;font-size:18px;color:#226752}#mp3-share>ul a:hover{color:#82eda1}#mp3-buttons{width:100%;display:flex;gap:10px}@media(max-width: 600px){#mp3-buttons{flex-direction:column}}.title{width:100%;display:flex;align-items:center;justify-content:space-between}@media(max-width: 600px){.title .button-all{display:none}}.title>h3{font-size:28px;color:#226752}@media(max-width: 600px){.title>h3{font-size:24px}}.mp3-files{display:flex;flex-direction:column;gap:10px;margin:0 10px;width:calc(100% - 20px);max-width:1200px}.mp3-files-container{width:100%;display:flex;flex-wrap:wrap;gap:10px}#footer-content{width:100%;border-top:1px solid rgba(34,34,34,.1019607843);padding:40px 0;display:flex;align-items:center;justify-content:center}@media(max-width: 600px){#footer-content{padding:20px 0}}#footer-content-wrapper{margin:0 10px;width:calc(100% - 20px);max-width:1200px;display:flex;flex-direction:column;gap:15px}#footer-content-wrapper>h2{font-size:26px;font-weight:700;color:#226752}@media(max-width: 600px){#footer-content-wrapper>h2{font-size:22px}}#footer-content-description{width:100%;font-weight:300}#footer-content-description p{line-height:1.5}#footer-content-description p:last-child{margin-bottom:0px}.page{width:100%;display:flex;flex-direction:column;gap:15px;margin:0 10px;width:calc(100% - 20px);max-width:1200px}@media(max-width: 600px){.page{margin:0 5px;width:calc(100% - 10px);flex-direction:column}}.page>h1{font-size:32px;font-weight:700;color:#226752}@media(max-width: 600px){.page>h1{font-size:26px}}.page-content{width:100%;line-height:1.5}.page-content p{line-height:1.5}.form{width:100%;display:flex;gap:20px;flex-direction:column}@media(max-width: 600px){.form{gap:15px}}.form-buttons{display:flex;gap:10px;align-items:center;justify-content:end}.form-row{display:flex;width:100%;gap:20px}@media(max-width: 600px){.form-row{flex-direction:column}}.form-item{width:100%;position:relative}.form-item input,.form-item select,.form-item textarea{width:100%;padding:15px 10px;border:1px solid #eee;border-radius:8px}.form-item input:focus,.form-item select:focus,.form-item textarea:focus{border:1px solid #82eda1;outline:none}.form-item input:not(:placeholder-shown):not(:focus):valid+label,.form-item input:focus+label,.form-item select:not(:placeholder-shown):not(:focus):valid+label,.form-item select:focus+label,.form-item textarea:not(:placeholder-shown):not(:focus):valid+label,.form-item textarea:focus+label{top:-6px;left:10px;font-size:12px;font-weight:300;padding:0px 10px}.form-item textarea{height:200px}.form-item label{position:absolute;left:2px;top:8px;font-weight:400;transition:all .3s ease;padding:f10px;border-radius:5px;background:#fff;pointer-events:none;transition:all .3s ease}#footer{width:100%;border-top:1px solid rgba(34,34,34,.1019607843);padding:40px 0;display:flex;align-items:center;justify-content:center}@media(max-width: 600px){#footer{padding:20px 0}}#footer-wrapper{margin:0 10px;width:calc(100% - 20px);max-width:1200px;display:flex;justify-content:space-between;align-items:center}@media(max-width: 600px){#footer-wrapper{flex-direction:column;gap:10px}}#footer-wrapper>span{font-weight:300}@media(max-width: 600px){#footer-wrapper>span{text-align:center;line-height:1.5}}#footer-buttons{display:flex;gap:15px}/*# sourceMappingURL=app.css.map */


#player-container { position: fixed; bottom: 0; left: 0; right: 0; height: 53px; z-index: 1000; background-color: #ffffff; box-shadow: 0 -2px 5px rgba(0,0,0,0.1); margin-left: auto; margin-right: auto; display: flex; justify-content: center; align-items: center; } .plyr--audio .plyr__control--overlaid { background: rgba(0, 0, 0, 0.5) !important; } .plyr__progress--played { background: #ff0000 !important; } .plyr__progress--buffer { background: #00ff00 !important; } .plyr__volume--display { background: #0000ff !important; } .spinner-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.5); z-index: 1000; display: flex; justify-content: center; align-items: center; } .spinner { border: 4px solid rgba(0, 0, 0, .1); width: 36px; height: 36px; border-radius: 50%; border-left-color: #09f; animation: spin 1s ease infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .fa-spinner { animation: spin 2s linear infinite; } #showButton, #hideButton { background-color: #ffea1d; color: #000; border: none; padding: 10px 20px; margin-top: 10px; cursor: pointer; }

@media(max-width: 600px) {
  #sidebar.active {
    z-index: 1100;
    position: fixed;
  }
}

#header {
  background-color: #f9f9f8;
}

@media (min-width: 900px) {
  .mp3-sm {
    flex: 1 0 32%;
    min-width: 32%;
  }
}

.hero.hero--slim {
  min-height: auto;
  padding: 20px 30px;
  align-items: flex-start;
}

.about-image img {
  width: 20%;
  height: auto;
  max-height: 20%;
  object-fit: cover;
  display: block;
  border-radius: 20px; /* скругление углов */
}

@media (max-width: 768px) {
  .about-image img {
    max-height: 220px;
  }
}

#search-button i {
  color: #2e7d32 !important; /* или #000 если хочешь чёрный */
}

.dropdown-content {
    display: none !important;
    padding-left: 10px;
}

.dropdown-content.open {
    display: block !important;
}

.dropdown-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.dropdown-toggle.opened i {
    transform: rotate(180deg);
    transition: transform .2s ease;
}

/* Показываем меню, если на <ul> есть класс .keep-open */

.dropdown-content.keep-open {
display: block !important;

}