@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap");.recommendation-card{font-family:Poppins,sans-serif;background:#30154b;width:300px;border-radius:15px;box-shadow:0 8px 15px rgba(0,0,0,.1);padding:20px;position:absolute;right:5%;z-index:10;color:#fff;text-align:center}.card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.mood-title{font-size:20px;font-weight:600;color:pink;margin:0}.close-btn{background:none;border:none;font-size:18px;cursor:pointer}.emoji-circle{background:linear-gradient(145deg,#b3e5fc,#4fc3f7);width:80px;height:80px;margin:0 auto;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:40px}.books-section,.songs-section{margin-top:20px}.books-section h3,.songs-section h3{font-size:16px;margin-bottom:10px;color:#e6b515}.books-section ul,.songs-section ul{list-style:none;padding:0}.books-section li,.songs-section li{margin-bottom:10px;font-size:14px;color:#fff}iframe{margin-left:25px;border-radius:8px;box-shadow:0 2px 5px rgba(0,0,0,.1)}ul li iframe{margin-top:5px}.container{display:flex;margin:auto;justify-content:center;align-items:center;overflow:hidden}.background-shapesk:before{background:hsla(0,100%,70%,.169);top:-150px}.background-shapesk:before,.background3:before{content:"";position:absolute;width:300px;height:300px;clip-path:polygon(60% 50%,100% 100%,0 100%);left:-150px;filter:blur(60px)}.background3:before{background:rgba(83,175,245,.228);top:50px}.background2:before{background:hsla(0,100%,70%,.176);top:-150px}.background1:before,.background2:before{content:"";position:absolute;width:300px;height:300px;clip-path:polygon(60% 50%,100% 100%,0 100%);left:-150px;filter:blur(60px)}.background1:before{background:rgba(134,48,121,.205);top:250px}.background-shapek:after{background:rgba(134,48,121,.114);top:-150px}.background-shapek:after,.background-shapesk:after{content:"";position:absolute;width:250px;height:300px;clip-path:polygon(60% 50%,100% 100%,0 100%);right:-80px;filter:blur(80px)}.background-shapesk:after{background:rgba(100,100,255,.226);top:50px}.background-shapk:after{content:"";position:absolute;width:250px;height:300px;background:hsla(0,100%,70%,.148);clip-path:polygon(60% 50%,100% 100%,0 100%);top:250px;right:-80px;filter:blur(80px)}.content{display:flex;flex-direction:column;align-items:center;padding:10px;border-radius:20px;background:#fff;box-shadow:0 1px 0 rgba(9,9,237,.1),0 8px 24px rgba(3,3,253,.1),0 16px 48px rgba(2,2,243,.1);width:400px;text-align:center;z-index:1}.title{font-size:2.5rem;font-weight:800;color:#9b9797;margin-bottom:10px;text-transform:uppercase}.subtitle{font-size:1rem;color:#7a7a7a;margin-bottom:20px}.visual-wrapper{position:relative;width:300px;height:300px;align-items:center}.circular-element,.visual-wrapper{display:flex;justify-content:center}.circular-element{flex-direction:column;margin-bottom:10px;position:absolute;width:200px;height:200px;border-radius:50%;background:radial-gradient(circle,hsla(0,0%,100%,.8) 0,#c2e9fb 60%,#97b9db 100%);box-shadow:0 0 60px rgba(155,173,186,.5)}.spn{color:#3a5adb}.graph-lines{position:absolute;bottom:1px;width:100%;height:60px;display:flex;justify-content:space-between;align-items:flex-end}.graph-dot{width:25px;height:25px;border-radius:50%;background-color:#a0afe9;box-shadow:0 0 10px rgba(72,177,255,.6);position:absolute;transition:background-color .3s}.graph-dot:hover{background-color:#3a5adb;transform:scale(1.2)}@keyframes upDown{0%{transform:translateY(0)}25%{transform:translateY(-90px)}50%{transform:translateY(0)}75%{transform:translateY(90px)}to{transform:translateY(0)}}.emoji{display:flex;gap:20px;margin-left:-45%;position:absolute;width:30%}.emo{animation:upDown 5s ease-in-out infinite;font-size:55px}.emoj{display:flex;gap:20px;position:absolute;margin-left:60%}@keyframes upDowns{0%{transform:translateY(0)}25%{transform:translateY(90px)}50%{transform:translateY(0)}75%{transform:translateY(-90px)}to{transform:translateY(0)}}.emk{animation:upDowns 5s ease-in-out infinite;font-size:55px}.selectedemoji{font-size:70px}@media (max-width:768px){.container{margin-top:30px;flex-direction:column;height:70vh;padding:20px}.content{margin-bottom:10%;width:88%;height:auto;margin-top:0}.title{font-size:2rem}.subtitle{font-size:.9rem}.visual-wrapper{width:200px;height:240px}.circular-element{width:150px;height:150px}.graph-lines{height:50px}.graph-dot{width:20px;height:20px}.emoji{gap:10px;margin-left:-20%;width:50%}.emk,.emo{font-size:40px}.emoj{margin-left:40%}.selectedemoji{font-size:55px}}