@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;600&family=Playfair+Display:wght@500;600&display=swap');:root{--p:#fffaf4;--ink:#2a1a12;--b:#0756d7;--o:#ff593e;--l:#eadfd3}*{box-sizing:border-box}body{margin:0;background:var(--p);font:15px Manrope;color:var(--ink)}a{text-decoration:none;color:inherit}header,main,.bottom{max-width:1390px;margin:auto}header{height:80px;border-bottom:1px solid var(--l);display:flex;align-items:center;gap:48px}.brand{font:italic 38px 'Playfair Display'}.brand i{font:27px Arial;background:var(--b);color:#fff;border-radius:50%;padding:5px 10px;font-style:normal}.actions{margin-left:auto}.actions b{background:var(--o);color:#fff;padding:14px 26px;border-radius:7px;margin-left:24px;font-weight:400}.hero{height:371px;position:relative;padding:43px 8px}.hero h1{font:600 64px/.98 'Playfair Display';margin:0}.hero h1 span,.title a{color:var(--b)}.hero p{line-height:1.8}.hero form{width:686px;height:66px;border:2px solid #1263ff;background:#fff;border-radius:16px;display:flex;align-items:center;padding-left:18px;box-shadow:0 7px 16px #1155cb33}.hero input{flex:1;border:0;outline:0;padding:16px;font:16px Manrope}.hero button{background:var(--o);color:#fff;border:0;border-radius:7px;padding:14px 28px;margin-right:8px;font:16px Manrope}.pick{position:absolute;left:56%;top:87px;width:155px;height:190px;border-radius:48% 48% 50% 50%;background:#f3e7d8;display:grid;place-items:center;font-size:75px;color:var(--b);box-shadow:0 12px 25px #b48f6544}.hero>em{position:absolute;right:50px;top:170px;font:italic 27px 'Playfair Display';color:#806149}.hero u{display:block;border-top:3px solid var(--b);width:85px;margin:18px auto}.moods{border:1px solid var(--l);border-radius:11px;padding:17px 26px;display:flex;gap:27px;align-items:center}.moods h2{font:23px 'Playfair Display';margin:0}.moods a{border:1px solid #dfcdb9;border-radius:11px;min-width:195px;padding:10px 18px}.moods small{display:block;color:#81756e;font-size:11px}.moods>b{margin-left:auto;font-size:27px}.layout{display:grid;grid-template-columns:2fr 1fr;gap:32px;margin-top:14px}.title{display:flex;justify-content:space-between;align-items:center}.title h2,aside h2{font:24px 'Playfair Display'}.songs{display:grid;grid-template-columns:1fr 1.1fr;gap:15px}.feature{height:280px;padding:40px 31px;color:#fff;border-radius:9px;display:flex;flex-direction:column;background:linear-gradient(0deg,#00101dcc,#00367155),radial-gradient(circle at 40% 100%,#ec7552,transparent 25%),#04274a}.feature h3{font:28px 'Playfair Display';margin:4px 0 15px}.feature span{margin-top:2px}.feature footer{margin-top:auto;font-size:12px}.row{height:88px;border:1px solid #eee4da;background:#fff;border-radius:8px;display:flex;align-items:center;margin-bottom:7px;gap:14px}.row i{height:86px;width:94px;background:linear-gradient(145deg,#e28745,#192e4f)}.row b,.row small,.row em{display:block}.row em{font:10px Manrope}.row>span{flex:1}.layout aside{border:1px solid var(--l);border-radius:14px;padding:19px;background:#fffdf9}.keys{display:flex;justify-content:space-between;align-items:center}.keys span{text-align:center;font-size:12px}.layout hr{border:0;border-top:1px dashed #d9c9b6;margin:17px 0}.layout aside p span{float:right}.chords{font:13px/1.9 Manrope}.chords b{color:var(--b)}.read{display:flex;align-items:center;gap:12px;background:#eaf2ff;color:var(--b);padding:12px;border-radius:13px;font-size:28px;margin-top:20px}.read span{font-size:12px}.read small{display:block;font-size:10px}.bottom{border-top:1px solid var(--l);margin-top:16px;padding:26px 0;text-align:center}@media(max-width:900px){header{padding:16px;height:auto}.actions,nav{display:none}.hero{height:470px;padding:40px 18px}.hero h1{font-size:47px}.hero form{width:100%}.pick{opacity:.25;left:auto;right:20px}.hero>em{display:none}.moods{overflow:auto;margin:0 15px}.moods a{min-width:190px}.layout{grid-template-columns:1fr;margin:16px}.songs{grid-template-columns:1fr}.bottom{display:none}}