.list{display:grid;padding:15px;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));grid-auto-rows:330px;text-align:center;gap:18px;margin-top:90px;margin-left:186px}.list.margin{margin-top:145px}.video{transition:all .3s ease-in;padding:14px 10px;border-radius:16px;background-color:#2d2d2d;position:relative}.video i.play{opacity:0;cursor:pointer}.video i.info{left:12px;top:3px;font-size:1rem;color:#e6e6fa}.video i.heart,.video i.info{position:absolute;cursor:pointer}.video i.heart{z-index:5;top:25px;right:16px}.video i.heart:hover{-webkit-animation:fa-beat 3s ease infinite;animation:fa-beat 3s ease infinite}.video i.heart.green{color:#31e25f}.video i.heart.empty{color:#d3d3d3}.video .add{display:block;cursor:pointer;position:absolute;left:17px;z-index:999;top:-28px;background-color:#000;color:#90ee90;padding:5px;font-size:.7rem;border-radius:2px;font-weight:700}.video .add:hover{background-color:#6c737a}.video:hover{transform:scale(1.05);z-index:2;background-color:hsla(0,0%,50.2%,.1803921568627451)}.video:hover i.play{display:flex;justify-content:center;align-items:center;position:absolute;top:60%;padding:15px;border-radius:50%;font-size:.65rem;background-color:#29be3c;left:15px;color:#fff;-webkit-animation:play .3s linear;animation:play .3s linear;box-shadow:0 0 #000;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}.novideos{position:absolute;color:rgba(230,230,250,.5411764705882353);top:27%;left:198px;font-size:1.5rem;transform:translate(10px,10px);font-weight:700}@-webkit-keyframes play{0%,50%{opacity:.4;top:50%}to{top:46%;opacity:1}}@keyframes play{0%,50%{opacity:.4;top:50%}to{top:46%;opacity:1}}@-webkit-keyframes fa-beat{0%{transform:scale(1)}5%{transform:scale(1.15)}20%{transform:scale(1)}30%{transform:scale(1)}35%{transform:scale(1.15)}50%{transform:scale(1)}55%{transform:scale(1.15)}70%{transform:scale(1)}}@keyframes fa-beat{0%{transform:scale(1)}5%{transform:scale(1.15)}20%{transform:scale(1)}30%{transform:scale(1)}35%{transform:scale(1.15)}50%{transform:scale(1)}55%{transform:scale(1.15)}70%{transform:scale(1)}}@media screen and (max-width:550px){.list{margin-left:145px;grid-template-columns:repeat(auto-fill,minmax(155px,1fr));grid-auto-rows:331px;gap:20px}.list.margin{margin-top:225px}.novideos{left:150px;top:41%;font-size:1.3rem}}@media screen and (max-width:350px){.list{padding:12px}}.video-preview{display:flex;justify-content:center;align-items:center;flex-direction:column;width:100%;height:100%;position:relative}.video-preview .time{font-size:.6rem;color:#655f5f;text-align:end;margin-top:5px;width:100%}.video-preview .info{display:flex;justify-content:space-between;align-items:center;font-size:.6rem;color:grey;margin-top:23px;width:100%}.video-preview .info .sub_info1{display:flex;align-items:center;font-size:.5rem;flex-direction:row-reverse;margin-right:15px}.video-preview .info .sub_info1 h4{text-align:initial;height:20px;display:flex;justify-content:center;align-items:center}.video-preview .info .sub_info2{display:flex;font-size:.5rem;color:rgba(236,230,230,.5215686274509804);align-items:center}.video-preview .info .sub_info2 .eye{margin-right:5px;color:#00f}.video-preview .info img{width:15px;height:15px;margin-right:5px}.video-preview h1{font-size:.75rem;margin-top:5px;color:#fff;font-weight:700;text-align:center;height:52px;min-height:52px}.video-preview i.drum{position:absolute;top:10px;left:5px;color:#7fff00;padding:3px;font-size:.6rem;background-color:#000;border-radius:50%;border:1px solid}.video-preview i.playlist{position:absolute;top:50%;right:5px;z-index:2;color:#90ee90;background-color:#000;border:none;padding:5px;box-shadow:0 0 2px 0 #fff;border-radius:50%}.video-preview .img{margin-top:8px;width:100%;height:100%;border-radius:3px;max-height:192px;-o-object-fit:cover;object-fit:cover;filter:drop-shadow(2px 4px 6px black)}@media screen and (max-width:550px){.video-preview h1{font-size:.65rem}.video-preview .info{height:100%;justify-content:center;align-items:center;flex-direction:column}}@media screen and (max-width:550px){.video-preview .info .sub_info1{margin-right:0;margin-top:-15px;align-items:normal}}.player{position:fixed;bottom:10px;right:13px;height:400px;width:500px;background-color:#1d1d1d;padding:20px;border-radius:16px;color:#d3d3d3;border:2px solid #000;z-index:999;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:transform 5s;transform:translateX(150%);left:unset}.player .icons{display:flex;width:100%;justify-content:space-between;margin-bottom:5px}.player.shrink-player{height:65px}.player.shrink-player iframe{display:none}.player h4{margin-bottom:10px;margin-top:8px;text-align:center}.player i{color:#7fff00;cursor:pointer}.player.show{-webkit-animation:moveIn .4s ease-in-out;animation:moveIn .4s ease-in-out;transform:translateX(0)}.player.noshow{-webkit-animation:moveOut .4s ease-in-out;animation:moveOut .4s ease-in-out;transform:translateX(150%)}@-webkit-keyframes moveOut{0%{transform:translateX(0)}to{transform:translateX(100%)}}@keyframes moveOut{0%{transform:translateX(0)}to{transform:translateX(100%)}}@-webkit-keyframes moveIn{0%{transform:translateX(100%)}to{transform:translateX(0)}}@keyframes moveIn{0%{transform:translateX(100%)}to{transform:translateX(0)}}@media screen and (max-width:600px){.player{right:5px;left:5px;height:60%;width:unset}}#content{position:absolute;font-family:Montserrat,sans-serif;height:50px;top:6%;left:203px}#content i{position:absolute;left:80%;color:hsla(0,0%,100%,.3411764705882353);top:10px;font-size:1.3rem}.filter-container input{box-sizing:border-box;width:250px;height:40px;border:none;border-radius:28px;background-color:#000;color:#7fff00;font-size:.8rem;font-weight:400;outline:0;right:unset;font-family:Montserrat,sans-serif}.filter-container input::-moz-placeholder{color:inherit;font-size:inherit;font-family:Montserrat,sans-serif}.filter-container input:-ms-input-placeholder{color:inherit;font-size:inherit;font-family:Montserrat,sans-serif}.filter-container input::placeholder{color:inherit;font-size:inherit;font-family:Montserrat,sans-serif}.square{padding:0 50px 0 15px;width:200px;height:50px;background:#000;font-weight:400;outline:0}@media screen and (max-width:500px){#content{left:162px;right:15px}.filter-container input{width:100%}}@media screen and (max-width:350px){.filter-container input::-moz-placeholder{font-size:.65rem}.filter-container input:-ms-input-placeholder{font-size:.65rem}.filter-container input::placeholder{font-size:.65rem}.square{padding:0 30px 0 15px}}.navbar{padding:20px 10px;position:fixed;left:0;height:100%;display:flex;width:165px;flex-direction:column;justify-content:start;align-items:center;background-color:#000;font-size:1.3rem;color:#d3d3d3;top:0;font-family:Montserrat}.navbar ul{width:100%}.navbar .main-logo{display:flex;flex-direction:row-reverse;align-items:center;justify-content:center;margin-bottom:30px}.navbar .main-logo h1{font-size:1.5rem;margin-left:5px;color:#fff}.navbar input.nameInput{width:155px}.navbar .router-link-active{color:#7fff00}.navbar .noActive{color:#d3d3d3}.navbar .noActive:hover{color:#fff}.navbar i.logo{color:#7fff00;font-size:1.8rem;padding:10px;border:1px solid #d3d3d3;border-radius:50%}.navbar li.playlist{position:relative}.navbar li.playlist .change{right:-23px;font-size:.6rem;position:absolute;background-color:#333;cursor:pointer;color:#d3d3d3;top:-23px;border-radius:3px;padding:5px}.navbar li.playlist i.edit{display:none}.navbar li.playlist:hover i.edit{display:block;position:absolute;top:0;right:-3px;color:#e6e6fa}.navbar i.edit{position:relative;top:-24px;right:-87px;display:none;cursor:pointer;border-radius:50%;font-size:.6rem}.navbar li{padding:10px 0;font-size:.9rem;width:160px;font-weight:700}.navbar li i{margin-right:2px}.navbar li:hover i.edit{display:block}@media (max-width:550px){.navbar{padding:20px 10px;width:128px}.navbar li{padding:8px 0;font-size:.7rem;width:100%}.navbar li i{margin-right:0}.navbar .main-logo{flex-direction:column-reverse}.navbar .main-logo h1{font-size:1.3rem;margin-left:0;color:#fff;margin-top:5px}.navbar input.nameInput{width:120px}}.playlist-header{position:absolute;top:20px;font-size:2rem;left:205px;color:#d3d3d3;display:flex;font-weight:700}.playlist-header .img-edit{position:absolute;background-color:rgba(0,0,0,.47058823529411764);height:110px;width:165px;display:none;justify-content:center;align-items:center}.playlist-header .img-edit.appear{display:flex}.playlist-header .img-edit.none{display:none}.playlist-header .img-edit i.upload{cursor:pointer}.playlist-header .img-edit .loading{width:45px;position:absolute}.playlist-header:hover .img-edit{display:flex}.playlist-header .title-container{display:flex;flex-direction:column;justify-content:flex-end;align-items:end;-webkit-padding-end:5px;padding-inline-end:5px;margin-left:20px}.playlist-header .title-container .title{margin-top:10px;font-size:1.5rem}.playlist-header .title-container h4{font-size:1rem;font-family:Caveat,sans-serif;color:grey;letter-spacing:1px}.playlist-header .title-container .data{font-size:.7rem;color:#e6e6fa;margin-top:8px}.playlist-header .img-container{position:relative;align-self:center;display:flex;box-shadow:0 0 2px grey;transition:all .3s;width:165px}.playlist-header .img-container i.edit{position:absolute;color:#7fff00;font-size:1.5rem;transform:translate(-50%,-50%);top:50%;left:50%;display:block}.playlist-header .img-container i.edit i.circle{cursor:pointer;position:absolute;top:3px;left:3px;font-size:1rem;color:grey}.playlist-header .img-container img{width:100%;height:110px;box-shadow:0 0 1px 0 #d3d3d3;position:relative;-o-object-fit:cover;object-fit:cover}.playlist-header .img-container img:hover{filter:grayscale(1)}@media screen and (max-width:550px){.playlist-header{left:160px;flex-direction:column}.playlist-header .title-container{margin-top:5px;margin-left:0;font-size:1.3rem}.playlist-header .title-container .title{font-size:1.1rem}.playlist-header .img-container{align-self:unset;display:flex;box-shadow:unset}}@media screen and (max-width:350px){.playlist-header .img-container,.playlist-header .img-edit{width:135px}}body{background-color:#191717;overflow-x:hidden}*{padding:0;margin:0;font-family:Montserrat,sans-serif}li{list-style-type:none}a{text-decoration:none;color:#d3d3d3}a:hover{color:inherit}@font-face{font-family:Caveat;src:url(../fonts/Caveat-Regular.b20ff458.ttf)}@font-face{font-family:Montserrat;src:url(../fonts/Montserrat-Regular.ee653992.ttf)}@font-face{font-family:Ubunto;src:url(../fonts/Ubuntu-Regular.2505bfbd.ttf)}