@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}.container{width:100%;height:100vh;background-image:linear-gradient(to right,#ffac24,#ffd780);display:grid;place-items:center}.quotes-app{width:clamp(19.375rem,80vw,38rem);aspect-ratio:3/2;background-color:#212226;border-radius:1.8rem;padding:2.5rem;box-shadow:-1.25rem 1.25rem 3.75rem #0009;position:relative;overflow:hidden}.app-heading{font-family:Bebas Neue,sans-serif;font-size:clamp(2rem,1.8rem + 1vw,3rem);color:#ddd}.fav-icon{position:absolute;top:3rem;right:3rem;font-size:clamp(2rem,1.8rem + 1vw,3rem);background-image:linear-gradient(to left,#2e6f79,#1b9b96)!important;color:transparent;-webkit-background-clip:text;-webkit-text-fill-color:transparent;cursor:pointer;text-shadow:-.2rem .3rem 1.25rem rgba(27,155,150,.6)}.fav-icon:active{transform:translateY(2px)}.quote{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;row-gap:.625rem}.quote i{font-size:1.6rem;color:#ddd}.quote-text{font-size:clamp(1rem,1.8cqi,1.2rem);color:#ddd;line-height:1.875rem;text-align:center;letter-spacing:1px;width:clamp(15.625rem,35cqi,31.25rem)}.quote-author{font-family:Briem Hand,cursive;font-size:.875rem;color:#888;text-align:right}.right-quote{text-align:right}.buttons{position:absolute;bottom:3.75rem;left:50%;transform:translate(-50%);display:flex;column-gap:1.25rem}.btn{width:12rem;height:2.5rem;border-radius:1.25rem;border:none;font-family:Comfortaa,sans-serif;font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:#fff;cursor:pointer;box-shadow:1.875rem .625rem 2.5rem #0000004d;text-shadow:-.2rem .3rem .6rem 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(3.125rem,10cqi,10rem);background-image:linear-gradient(to top,#ffac24,#ffd780);opacity:.8;top:-6cqi;left:50%}.circle-2{width:clamp(1.25rem,4cqi,3.75rem);background-image:linear-gradient(to top,#ffac24,#ffd780);opacity:.8;bottom:9rem;left:4rem}.circle-3{width:clamp(3.125rem,10cqi,10rem);background-image:linear-gradient(to right,#553ddd,#7f69e8);opacity:.6;top:50%;right:-5cqi}.circle-4{width:clamp(.625rem,1cqi,1.25rem);background-image:linear-gradient(to left,#dd133f,#fd4069);opacity:.6;top:25%}.favourites{width:100%;height:100%;position:absolute;inset:0;background-image:linear-gradient(to left,#1b9b96,#2e6f79);padding:2rem 4rem 2rem 2rem}.favourites-inner{overflow-y:auto;max-height:100%;padding-bottom:2rem}.favourites-inner::-webkit-scrollbar{width:0}.fav-quote{display:flex;column-gap:.625rem;margin-bottom:1.25rem}.btn-close{position:absolute;top:1.875rem;right:1.25rem;background-color:transparent;border:none;cursor:pointer}.btn-close i{font-size:1.6rem;color:#fff}.fav-quote-delete{font-size:1.6rem;color:#f06b5f;cursor:pointer}.fav-quote-content{flex:1}.fav-quote-text{font-size:1rem;color:#fff}.fav-quote-author{font-size:.8rem;font-family:Briem Hand,cursive;text-align:right;color:#ddd}@media (max-width: 768px){.quotes-app{aspect-ratio:2/3;aspect-ratio:4/5;aspect-ratio:5/6}}@media (max-width: 640px){.quotes-app{aspect-ratio:1/2;aspect-ratio:2/3}.buttons{flex-direction:column;row-gap:1.25rem}}