@import"https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Briem+Hand:wght@100..900&family=Comfortaa:wght@300..700&family=Dosis:wght@200..800&display=swap";.container{width:100%;height:100vh;background:linear-gradient(135deg,#020617,#020617,#020617);display:grid;place-items:center}.bg-glow{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:0}.glow{position:absolute;border-radius:9999px;filter:blur(48px)}.glow-1{top:-96px;left:-96px;width:256px;height:256px;background:#10b98126}.glow-2{top:33%;right:-64px;width:288px;height:288px;background:#06b6d426}.glow-3{bottom:0;left:25%;width:256px;height:256px;background:#4f46e526}.quotes-app{width:90vmin;aspect-ratio:3 / 2;background-color:#212226;border-radius:3rem;padding:4rem;box-shadow:-2rem 2rem 6rem #0009;position:relative;overflow:hidden}.app-heading{font-family:Bebas Neue,sans-serif;font-size:5rem;color:#ddd}.fav-icon{position:absolute;top:5rem;right:5rem;font-size:4rem;background-image:linear-gradient(to left,#2e6f79,#1b9b96);-webkit-background-clip:text;-webkit-text-fill-color:transparent;cursor:pointer;text-shadow:-.3rem .5rem 2rem rgba(27,155,150,.3)}.fav-icon:active{transform:translateY(.1rem)}.quote{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;row-gap:1rem}.quote i{font-size:3rem;color:#ddd}.quote-text{font-size:clamp(1.6rem,2cqi,2.5rem);color:#ddd;line-height:3rem;text-align:center;letter-spacing:.1rem;width:clamp(25rem,35cqi,50rem)}.quote-author{font-family:Briem Hand,cursive;font-size:1.4rem;color:#888;text-align:right}.right-quote{text-align:right}.buttons{position:absolute;bottom:6rem;left:50%;transform:translate(-50%);display:flex;column-gap:2rem}.btn{width:18rem;height:4rem;border-radius:2rem;border:none;font-family:Comfortaa,sans-serif;font-size:1.2rem;font-weight:700;text-transform:uppercase;letter-spacing:.1rem;color:#fff;cursor:pointer;box-shadow:3rem 1rem 4rem #0000004d;text-shadow:-.3rem .5rem 1rem rgba(0,0,0,.3)}.btn:active{transform:translateY(.2rem)}.btn-new{background-image:linear-gradient(to left,#553ddd,#7f69e8)}.btn-fav{background-image:linear-gradient(to left,#2e6f79,#1b9b96)}.circles div{position:absolute;border-radius:50%;aspect-ratio:1}.circle-1{width:clamp(5rem,10cqi,16rem);background-image:linear-gradient(to top,#ffac24,#ffd780);top:-6cqi;left:50%}.circle-2{width:clamp(2rem,4cqi,6rem);background-image:linear-gradient(to top,#ffac24,#ffd780);bottom:15rem;left:7rem}.circle-3{width:clamp(5rem,10cqi,16rem);background-image:linear-gradient(to right,#553ddd,#7f69e8);top:50%;right:-5cqi}.circle-4{width:clamp(1rem,1cqi,2rem);background-image:linear-gradient(to left,#dd133f,#fd4069);top:30%}.favorites{width:100%;height:100%;position:absolute;top:0;right:0;bottom:0;left:0;background-image:linear-gradient(to left,#1b9b96,#2e6f79);padding:3rem 7rem 3rem 3rem;overflow-y:auto}.favorites::-webkit-scrollbar{width:.8rem}.favorites::-webkit-scrollbar-track{background:#f1f1f1}.favorites::-webkit-scrollbar-thumb{background:#888;border-radius:.4rem}.favorites::-webkit-scrollbar-thumb:hover{background:#555}.fav-quote{display:flex;column-gap:1rem;margin-bottom:2rem}.btn-close{position:absolute;top:3rem;right:2rem;background-color:transparent;border:none;cursor:pointer}.btn-close i{font-size:3rem;color:#fff}.fav-quote-delete{font-size:2.5rem;color:#f06b5f;cursor:pointer}.fav-quote-text{font-size:1.6rem;color:#fff}.fav-quote-author{font-family:Briem Hand,cursive;text-align:right;color:#ddd}.language-switch button{margin:5px;padding:6px 12px;border-radius:6px;background:#1e293b;color:#fff;border:1px solid #334155;cursor:pointer}.language-switch .active{background:#10b981;border-color:#10b981}.main-site-link{display:block;font-size:2rem;letter-spacing:.05em;text-align:center;color:#9ca3af;text-decoration:none;opacity:.85;transition:.2s ease}.main-site-link:hover{color:#e5e7eb;opacity:1;text-decoration:underline}.brand-subtitle{text-align:center;margin-top:4px;margin-bottom:10px;font-size:1.5rem;letter-spacing:.04em;color:#6b7280;opacity:.75}@media (max-width: 850px){.quotes-app{width:75vmin;aspect-ratio:2 / 3}}@media (max-width: 550px){.quotes-app{aspect-ratio:1 / 2}.buttons{flex-direction:column;row-gap:2rem}}*{margin:0;padding:0;box-sizing:border-box;font-family:Dosis,sans-serif}html{font-size:62.5%}@media (max-width: 550px){html{font-size:50%}}
