@import"https://fonts.googleapis.com/css2?family=Noto+Sans:wght@300;400&display=swap";*{box-sizing:border-box;margin:0;padding:0}body{font-family:Noto Sans,sans-serif;font-size:16px;height:100vh}#root{height:100%}#root{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:0px}.background{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;width:100%;height:100%}.quote-container{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;max-width:550px;min-height:248px;padding:32px;border-radius:4px;background-color:#f5f5f5;box-shadow:0 2px 8px -2px #e8e8e8}.quote-container .quote-text{font-size:26px;font-weight:400;text-align:center}.quote-container .quote-icon{margin-right:8px}.quote-container .quote-author{font-size:18px;align-self:flex-end;font-weight:300}.quote-container .quote-actions{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:4px;width:100%;margin-top:16px}.quote-container .quote-actions .quote-button{width:auto;height:40px;padding:8px 18px;border:none;border-radius:4px;cursor:pointer;font-family:Noto Sans,sans-serif;margin-left:auto;font-size:14px;color:#f5f5f5}.quote-container .quote-actions .icon{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:0px;width:40px;height:40px;padding:0;border:none;border-radius:4px;cursor:pointer;font-family:Noto Sans,sans-serif}.fade-in{animation:fade-in .5s ease-in-out}.fade-out{animation:fade-out .5s ease-in-out 0s 1 normal forwards}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes fade-out{0%{opacity:1}to{opacity:0}}@media screen and (max-width: 500px){.quote-container{width:100%}.quote-container .quote-text{font-size:20px}.quote-container .quote-author{font-size:16px}}.theme-1{color:#f29e4c;background-color:#f29e4c;transition:background-color .5s}.theme-1 .quote-button,.theme-1 .icon{background-color:#f29e4c;box-shadow:0 2px 8px -2px #f09134}.theme-1 .quote-button:hover,.theme-1 .icon:hover{background-color:#f4ab64}.theme-2{color:#f1c453;background-color:#f1c453;transition:background-color .5s}.theme-2 .quote-button,.theme-2 .icon{background-color:#f1c453;box-shadow:0 2px 8px -2px #efbc3b}.theme-2 .quote-button:hover,.theme-2 .icon:hover{background-color:#f3cc6b}.theme-3{color:#ff5c8a;background-color:#ff5c8a;transition:background-color .5s}.theme-3 .quote-button,.theme-3 .icon{background-color:#ff5c8a;box-shadow:0 2px 8px -2px #ff4378}.theme-3 .quote-button:hover,.theme-3 .icon:hover{background-color:#ff769c}.theme-4{color:#b9e769;background-color:#b9e769;transition:background-color .5s}.theme-4 .quote-button,.theme-4 .icon{background-color:#b9e769;box-shadow:0 2px 8px -2px #afe353}.theme-4 .quote-button:hover,.theme-4 .icon:hover{background-color:#c3eb7f}.theme-5{color:#83e377;background-color:#83e377;transition:background-color .5s}.theme-5 .quote-button,.theme-5 .icon{background-color:#83e377;box-shadow:0 2px 8px -2px #70df62}.theme-5 .quote-button:hover,.theme-5 .icon:hover{background-color:#96e78c}.theme-6{color:#16db93;background-color:#16db93;transition:background-color .5s}.theme-6 .quote-button,.theme-6 .icon{background-color:#16db93;box-shadow:0 2px 8px -2px #14c483}.theme-6 .quote-button:hover,.theme-6 .icon:hover{background-color:#22e9a0}.theme-7{color:#0db39e;background-color:#0db39e;transition:background-color .5s}.theme-7 .quote-button,.theme-7 .icon{background-color:#0db39e;box-shadow:0 2px 8px -2px #0b9b89}.theme-7 .quote-button:hover,.theme-7 .icon:hover{background-color:#0fcbb3}.theme-8{color:#048ba8;background-color:#048ba8;transition:background-color .5s}.theme-8 .quote-button,.theme-8 .icon{background-color:#048ba8;box-shadow:0 2px 8px -2px #03768f}.theme-8 .quote-button:hover,.theme-8 .icon:hover{background-color:#05a0c1}.theme-9{color:#2c699a;background-color:#2c699a;transition:background-color .5s}.theme-9 .quote-button,.theme-9 .icon{background-color:#2c699a;box-shadow:0 2px 8px -2px #265b86}.theme-9 .quote-button:hover,.theme-9 .icon:hover{background-color:#3277ae}.theme-10{color:#54478c;background-color:#54478c;transition:background-color .5s}.theme-10 .quote-button,.theme-10 .icon{background-color:#54478c;box-shadow:0 2px 8px -2px #4a3e7b}.theme-10 .quote-button:hover,.theme-10 .icon:hover{background-color:#5e509d}