@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";*{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:55%}}.container{width:100%;height:100vh;background-image:linear-gradient(to right,#ffac24,#ffd789);display:grid;place-items:center}.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 .4rem 2rem rgba(27,155,150,.4)}.fav-icon:active{transform:translateY(.2rem)}.quote{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;row-gap:1rem}.quote-text{font-size:clamp(1.2rem,4cqi,2rem);color:#ddd;line-height:3rem;text-align:center;letter-spacing:.1rem;width:clamp(20rem,35cqi,40rem)}.quote-author{font-family:Briem Hand,cursive;font-size:1.4rem;color:#888;text-align:right}.quote i{font-size:3rem;color:#ddd}.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:Confortaa,sans-serif;font-size:1.2rem;font-weight:700;color:#fff;text-transform:uppercase;letter-spacing:.1rem;cursor:pointer;box-shadow:3rem 1rem 4rem #0000004d;box-shadow:-.3rem .5rem 1rem #0000004d}.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,15rem);background-image:linear-gradient(to left,#ffac24,#ffd780);top:-6cqi;left:50%}.circle-2{width:clamp(2rem,4cqi,3rem);background-image:linear-gradient(to left,#ffac24,#ffd780);bottom:13rem;left:5.5rem}.circle-3{width:clamp(5rem,10cqi,11rem);background-image:linear-gradient(to left,#553ddd,#7f69e8);top:40%;right:-5cqi}.circle-4{width:clamp(.4rem,1cqi,.8rem);background-image:linear-gradient(to left,#dd133f,#fd4069);top:30%}.favourites{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}.favourites::-webkit-scrollbar{width:.8rem}.favourites::-webkit-scrollbar-track{background:#f1f1f1}.favourites::-webkit-scrollbar-thumb{background:#888;border-radius:.4rem}.favourites::-webkit-scrollbar-thumb:hover{background:#555}.btn-close{position:absolute;top:3rem;right:2rem;background:transparent;border:none;cursor:pointer}.fav-quote{display:flex;column-gap:1rem;margin-bottom:2rem}.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,sans-serif;text-align:right;color:#ddd}@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}}