@import url(https://fonts.googleapis.com/css2?family=Jura:wght@300;400;500;600;700&display=swap);.card-container{border:1px solid #000;text-align:center;width:420px}.card-image{cursor:pointer;height:420px;overflow:hidden;position:relative;width:420px}.card-image:hover img{-webkit-transform:scale(1.02);transform:scale(1.02)}.card-image img{height:100%;object-fit:cover;transition:all .3s ease-in-out;width:100%}.card-image img:hover{-webkit-transform:scale(1.02);transform:scale(1.02)}.card-image .play-pause{color:beige;font-size:5rem;left:50%;opacity:.8;position:absolute;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.card-text{background-color:beige;border-top:1px solid #000;line-height:20px;padding:15px;text-transform:uppercase}.card-text .card-genre{display:flex;flex-wrap:wrap;gap:5px;justify-content:center;margin-top:10px}.card-text .genre-item{background-color:beige;border:1px solid #000!important;color:#000;cursor:pointer;font-size:.6rem;font-weight:200;padding:1px 10px}.card-text .genre-item:hover{background-color:#000;color:beige}@media only screen and (max-width:600px){.card{display:flex;flex-wrap:wrap;justify-content:flex-start}.card-container{height:auto;margin-bottom:50px;width:80%}.card-image{height:350px;width:100%}.card-image .play-pause{font-size:65px;opacity:.5}}.cards-container{flex-wrap:wrap;gap:70px;margin-top:40px;padding:15vh 50px}.cards-container,.genre-filter{align-items:center;display:flex;justify-content:center}.genre-filter{background-color:beige;border:1px solid #000;cursor:pointer;gap:10px;padding:5px 10px;position:fixed;top:12vh;width:auto;z-index:999}.genre-filter:hover{background-color:#000;color:beige}.genre-filter h4{font-weight:100}@media only screen and (max-width:600px){.cards-container{align-items:flex-start;border:none;flex-direction:row;flex-wrap:wrap;gap:0;justify-content:flex-start;margin-top:12vh;padding:0 0 8vh}.genre-filter{margin-bottom:-250px;margin-left:0;margin-top:-300px;position:static;width:150px}}@media only screen and (max-width:1700px){.cards-container{justify-content:center!important}}.open-canvas{border:1px solid #000;bottom:120px;cursor:pointer;left:10px;padding:10px;position:fixed;-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}.open-canvas:hover{background-color:#000;border-color:beige;color:beige}.canvas-container{align-items:center;display:flex;height:70vh;justify-content:center;left:50%;position:fixed;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:80vw;z-index:10}.canvas-container,.canvas-container canvas{background-color:beige;border:1px solid #000}.icon{align-items:center;background-color:beige;cursor:pointer;display:flex;height:15px;justify-content:center;padding:8px;position:absolute;width:15px;z-index:20}.icon svg{fill:#000}.icon:hover{background-color:#000}.icon:hover svg{fill:beige}.close-canvas{border-left:1px solid #000;right:0}.close-canvas,.menu-icons{border-bottom:1px solid #000;top:0}.clear-canvas,.menu-icons{border-right:1px solid #000;left:0}.clear-canvas,.download-canvas{border-top:1px solid #000;bottom:0}.download-canvas{border-left:1px solid #000;right:0}.menu-container{align-items:center;background-color:beige;border-bottom:1px solid #000;border-right:1px solid #000;display:flex;flex-direction:column;gap:10px;justify-content:center;left:0;padding:40px;position:absolute;top:0;z-index:15}.menu-container>div{align-items:center;display:flex;gap:30px;height:40px;margin:0 auto;width:250px}.menu-container>div input,.menu-container>div svg{cursor:pointer}.menu-container>div h4{font-size:.8rem;width:100px}.menu-container>div input[type=color]{height:20px;width:20px}.menu-container>div input[type=range]{-webkit-appearance:none;background:transparent;cursor:pointer}.menu-container>div input[type=range]::-webkit-slider-runnable-track{background:beige;border:1px solid #000;border-radius:8px;height:16px;padding:3px}.menu-container>div input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background-color:#000;border-radius:50px;height:8px;width:8px}@media only screen and (max-width:800px){.open-canvas{display:none}}.music-player-container{align-items:center;background-color:beige;border-top:1px solid #000;bottom:0;color:#000;display:flex;font-size:1.2rem;height:8vh;justify-content:space-around;position:fixed;text-transform:uppercase;width:100vw;z-index:3}.music-player-container p{font-size:1rem}.music-player-container .audio-player{display:none}.music-player-container .title{padding-left:20px;width:400px}.music-player-container .buttons{align-items:center;cursor:pointer;display:flex;gap:40px;justify-content:flex-start}.music-player-container .progress{align-items:center;display:flex;gap:20px;justify-content:center}.music-player-container .progress .progress-control{width:30vw}.music-player-container .progress .time-duration{text-align:center;width:50px}.music-player-container .volume{align-items:center;display:flex;gap:20px;justify-content:center;padding-right:20px}.music-player-container input[type=range]{-webkit-appearance:none;background:transparent;cursor:pointer}.music-player-container input[type=range]::-webkit-slider-runnable-track{background:beige;border:1px solid #000;border-radius:8px;height:16px;padding:3px}.music-player-container input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background-color:#000;border-radius:50px;height:8px;width:8px}@media only screen and (max-width:1200px){.music-player-container{font-size:2.5rem;height:8vh;padding-left:5vw;padding-right:5vw}.music-player-container .title{order:2;padding-left:20px;padding-right:60px;text-align:left;width:90%}.music-player-container .progress,.music-player-container .volume{display:none}.music-player-container .buttons{order:1;width:10%}.music-player-container .buttons .skip{display:none}}.navbar-container{background-color:beige;height:12vh;position:fixed;top:0;width:100%;z-index:100}.navbar-logo{align-items:center;cursor:pointer;display:flex;gap:30px;height:100%;justify-content:center}.navbar-logo img{height:50px;width:auto}.navbar-logo h1{letter-spacing:3px}*{font-family:Jura,sans-serif;margin:0;padding:0}html{background-color:beige;color:#000;scroll-behavior:smooth}html ::-webkit-scrollbar{display:none}h1{font-size:30px;font-weight:400}h5{font-size:14px}p{font-size:12px}
/*# sourceMappingURL=main.0580a706.css.map*/