*{box-sizing:border-box;margin:0;padding:0;font-family:kelly slab,serif}#root{flex-direction:column;min-height:100vh;display:flex}.header{background-color:#1f295f;justify-content:space-between;align-items:center;width:100%;height:5%;padding:5px;display:flex}.Logo{display:inline-flex}.Logo img{width:25%;height:14%}nav{margin-right:8%}nav ul{justify-content:space-around;align-items:baseline;gap:15%;display:flex}nav ul li{color:#b6b3f7;justify-content:space-between;list-style:none}.Titile{text-align:center;color:#1f295f;margin-top:10%}.Titile h1{margin-bottom:3%;font-size:40px}.Titile p{font-size:20px}.btn-one{text-align:center;margin-top:20px}.btn-home{color:#fff8e7;cursor:pointer;background-color:#4c568b;border:none;border-radius:5px;padding:10px 20px;transition:all .3s}.btn-home:hover{background-color:#7986cb;transform:translateY(-2px);box-shadow:0 4px 12px #5c6bc066}.footer{color:#b6b3f7;background-color:#1f295f;justify-content:space-between;align-items:center;margin-top:auto;padding:20px;font-size:14px;display:flex}.footer-links{gap:15px;display:flex}.footer-links a{color:#c9cff3;text-decoration:none;transition:color .3s}.footer-links a:hover{color:#fff}.about-us{margin-top:10%;margin-bottom:10%;padding:80px 20px}.about-us h2{text-align:center;color:#1f295f;margin-bottom:10px;font-size:3rem}.about-us p{text-align:center;color:#1f295f;opacity:.8;margin-bottom:15%;font-size:1.2rem}.extra-links-contianer{flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:30px;max-width:1200px;margin:0 auto;display:flex}.extra-links{text-align:center;background-color:#fff;border:1px solid #1f295f14;border-radius:24px;flex-direction:column;align-items:center;width:300px;min-height:250px;padding:40px 30px;transition:all .4s cubic-bezier(.175,.885,.32,1.275);display:flex;box-shadow:0 10px 40px #1f295f0d}.extra-links:hover{border-color:#7986cb;transform:translateY(-15px);box-shadow:0 25px 50px #1f295f1f}.extra-links .icon{margin-bottom:20px;font-size:48px}.extra-links h3{color:#1f295f;margin-bottom:15px;font-size:1.5rem}.extra-links p{opacity:.7;margin:0;font-size:1rem;line-height:1.6}#extra-links-down{margin-top:50px}@media (width<=950px){#extra-links-down{margin-top:0}.extra-links{width:90%}}body{color:#000;background-color:#f0f8ff}.mood-selection h2{text-align:center;margin-top:4%}.emotions-btn{justify-content:space-around;align-items:center;margin-top:10%;display:flex}.emotions-btn button{color:#1f295f;cursor:pointer;background-color:#fff;border:1px solid #c9cff3;border-radius:5px;padding:10px 15px;font-weight:700;transition:all .3s;animation:3s ease-in-out infinite float}.emotions-btn button:hover{animation-play-state:paused;transform:translateY(-8px)scale(1.05);box-shadow:0 8px 20px #1f295f26}.emotions-btn button:first-child{animation-delay:0s}.emotions-btn button:nth-child(2){animation-delay:.3s}.emotions-btn button:nth-child(3){animation-delay:.6s}.emotions-btn button:nth-child(4){animation-delay:.9s}@keyframes float{0%{transform:translateY(0)}50%{transform:translateY(-5px)}to{transform:translateY(0)}}.mood-form{background-color:#dee2f8;border-radius:12px;flex-direction:column;gap:15px;width:60%;max-width:400px;margin:2% auto 15%;padding:30px;display:flex;box-shadow:0 4px 6px #0000001a}.mood-form h3{text-align:center;color:#1f295f;margin-bottom:20px}.form-group{flex-direction:column;gap:5px;display:flex}.form-group label{color:#1f295f;font-weight:700}.form-group input{border:1px solid #c9cff3;border-radius:5px;padding:10px;font-size:16px}.form-group input[readOnly]{color:#555;cursor:not-allowed;background-color:#e8ebfc}.submit-btn{color:#fff;cursor:pointer;background-color:#1f295f;border:none;border-radius:5px;margin-top:10px;padding:12px;font-size:16px;font-weight:700;transition:background-color .3s}.submit-btn:hover{background-color:#2a3780}.back-btn{color:#666;cursor:pointer;background-color:#0000;border:none;padding:10px;font-size:14px;text-decoration:underline}.back-btn:hover{color:#333}.results-container{text-align:center;color:#000;flex-direction:column;align-items:center;margin-top:5vmin;padding:40px 20px;display:flex}.results-container h2{color:#1f295f;margin-bottom:10px;font-size:2.5rem}.results-container p{margin-bottom:40px;font-size:1.2rem}.playlists-grid{flex-wrap:wrap;justify-content:center;gap:20px;margin-bottom:40px;display:flex}.playlist-card{background-color:#fff;border-radius:12px;flex-direction:column;align-items:center;width:250px;padding:20px;transition:transform .3s;display:flex;box-shadow:0 4px 15px #0000000d}.playlist-card:hover{transform:translateY(-5px)}.playlist-cover{aspect-ratio:1;background-color:#dfe3f8;border-radius:8px;justify-content:center;align-items:center;width:100%;margin-bottom:15px;font-size:80px;display:flex}.playlist-card h3{color:#1f295f;margin-bottom:5px}.playlist-card p{color:#888;margin-bottom:15px;font-size:.9rem}.playlist-card button{color:#fff;cursor:pointer;background-color:#1f295f;border:none;border-radius:20px;padding:8px 20px;font-weight:700;transition:background .3s}.playlist-card button:hover{background-color:#2a3780}.back-to-mood-btn{color:#1f295f;cursor:pointer;background-color:#0000;border:2px solid #1f295f;border-radius:5px;padding:10px 20px;font-weight:700;transition:all .3s}.back-to-mood-btn:hover{color:#fff;background-color:#1f295f}.about-container{color:#1f295f;max-width:1000px;margin:0 auto;padding:60px 20px}.about-hero{text-align:center;margin-bottom:60px}.about-hero h1{background:linear-gradient(135deg,#1f295f 0%,#6e8efb 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;margin-bottom:20px;font-size:3rem}.about-hero p{opacity:.8;font-size:1.4rem}.about-content{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:30px;display:grid}.about-card{background:#fff;border-radius:20px;padding:40px;transition:transform .3s;box-shadow:0 10px 30px #0000000d}.about-card:hover{transform:translateY(-10px)}.about-card h2{color:#1f295f;margin-bottom:20px}.about-card p{font-size:1.1rem;line-height:1.6}.about-card ul{padding:0;list-style:none}.about-card li{margin-bottom:10px;padding-left:20px;position:relative}.about-card li:before{content:"⚡";position:absolute;left:0}.contact-container{grid-template-columns:1fr 1.5fr;align-items:center;gap:60px;max-width:1100px;margin:0 auto;padding:80px 20px;display:grid}.contact-info h1{color:#1f295f;margin-bottom:20px;font-size:3.5rem}.contact-info p{margin-bottom:40px;font-size:1.2rem}.info-item{align-items:center;gap:15px;margin-bottom:20px;display:flex}.info-item span{font-size:1.8rem;line-height:1}.info-item p{color:#1f295f;margin:0;font-size:1.2rem;font-weight:500}.contact-form-card{background:#fff;border-radius:30px;padding:50px;box-shadow:0 20px 50px #0000001a}.contact-form h2{color:#1f295f;margin-bottom:30px}.form-group{text-align:left;margin-bottom:25px}.form-group label{color:#1f295f;margin-bottom:8px;font-weight:600;display:block}.form-group input,.form-group textarea{border:1px solid #ddd;border-radius:12px;width:100%;padding:15px;font-size:1rem;transition:border .3s}.form-group input:focus,.form-group textarea:focus{border-color:#1f295f;outline:none}.contact-btn{color:#fff;cursor:pointer;background-color:#1f295f;border:none;border-radius:12px;width:100%;padding:18px;font-size:1.1rem;font-weight:700;transition:background .3s}.contact-btn:hover{background-color:#2a3780}.success-message{text-align:center}.success-message h2{color:#4caf50;margin-bottom:15px;font-size:2.5rem}@media (width<=800px){.contact-container{text-align:center;grid-template-columns:1fr}.info-item{justify-content:center}}