*{border-radius:.4rem;transition:.4s;-ms-overflow-style:none;scrollbar-width:none}*::-webkit-scrollbar{display:none}:root{--black-tr: rgba(100, 100, 100, .6);--blur-10: blur(10px)}html{scroll-behavior:smooth}body{background:black;color:#fff;margin:0;padding:0;font-family:Courgette,sans-serif}h2{margin:.5rem}.formContainer{position:fixed;width:100%;top:10%}form{padding:2.5rem 1rem;background:var(--black-tr);backdrop-filter:var(--blur-10);margin-left:auto;margin-right:2%;display:flex;flex-direction:column;justify-content:center;align-items:center;width:80%;position:relative;box-shadow:0 0 1rem var(--black-tr);z-index:3;outline:4px solid white}form:before{position:absolute;content:"";bottom:-2rem;right:2%;border-left:2rem solid transparent;border-right:2rem solid transparent;border-top:2rem solid white;backdrop-filter:var(--blur-10)}.hideForm{opacity:0}button{border:none;outline:none;cursor:pointer}input,textarea{border:.1rem solid white;padding:.5rem .8rem;margin:.1rem;background:transparent;color:#fff;font-size:1.3rem;max-width:250px;margin:.4rem}input:focus,textarea:focus{outline:3px solid white}input::placeholder,textarea::placeholder{color:#fff}.addButton{background:transparent;color:#fff;padding:.3rem .7rem;border:3px solid rgba(0,255,0,1)}.addButton:hover{color:#0f0}.editButton{padding:.3rem .7rem;background:transparent;color:#fff;border:3px solid yellow}.editButton:hover{color:#ff0}nav{display:flex;justify-content:space-evenly;align-items:space-evenly;backdrop-filter:blur(20px);position:fixed;left:0;top:1rem;right:0;z-index:2}.link{text-decoration:none;padding:.4rem;color:gray}.inputContainer{position:sticky;top:4rem;z-index:2}.author{color:smoke;font-size:1.1rem;text-align:right}.text{margin:auto}li{list-style:none;font-family:Courgette,sans-serif}.quoteList{display:grid;margin:auto .5rem;grid-template-columns:repeat(auto-fit,minmax(10rem,1fr))}.quoteUi{backdrop-filter:var(--blur-10);background:var(--black-tr);color:#fff;margin:.2rem;padding:15% 6% 6%;font-weight:100;position:relative;display:flex;flex-direction:column;justify-content:space-between;overflow:auto}.quoteUi:hover .icon{opacity:1}.icon{background:transparent;border:2px solid gray;position:fixed;width:2rem;margin:auto;display:grid;place-items:center;padding:0;opacity:0}.deleteIcon{top:0;right:0}.deleteIcon:hover{border:2px solid red}.editIcon{top:0;right:2rem}.editIcon:hover{border:2px solid yellow}.showHideFormButtom{width:3rem;height:3rem;border-radius:4rem;position:fixed;right:2rem;bottom:2rem;display:grid;place-items:center;cursor:pointer;background:rgba(0,255,0,1);box-shadow:0 0 .5rem #00000080;padding:0}.hideFormBtton{transform:rotate(225deg);background:rgba(255,0,0,1)}.blueCircle{position:fixed;z-index:-1;background:linear-gradient(220deg,blue,skyblue);height:16rem;width:16rem;border-radius:20rem;top:9rem;animation:move 170s 5s infinite alternate}.redCircle{position:fixed;z-index:-1;background:linear-gradient(100deg,red,orange);height:22rem;width:22rem;border-radius:20rem;top:19rem;left:2rem;animation:move 190s 1s infinite alternate}.yellowCircle{position:fixed;z-index:-1;background:linear-gradient(270deg,yellow,orange);height:8rem;width:8rem;border-radius:20rem;top:19rem;left:17rem;animation:move 220s 1s infinite alternate}.greenCircle{position:fixed;z-index:-2;background:linear-gradient(100deg,darkgreen,lime);height:25rem;width:25rem;border-radius:20rem;top:-5rem;right:-6rem;animation:move 200s 10s infinite alternate}@keyframes move{20%{transform:translate(2rem)}40%{transform:translate(5rem,4rem)}60%{transform:translate(1rem,-4rem)}80%{transform:translate(-10rem,-10rem)}}.loader{display:flex;height:80vh;flex-direction:column;align-items:center;justify-content:center}@keyframes loadingTextVisiable{to{opacity:1}}.loader-text{opacity:0;animation:loadingTextVisiable 3s 2s forwards;transition:1s}@keyframes color-shoot{0%{fill:red}17%{fill:#ff7f00}34%{fill:#ff0}50%{fill:#0f0}67%{fill:#00f}84%{fill:indigo}to{fill:#8f00ff}}.color-changing-box{transition:fill 2s ease-in-out;animation:color-shoot 4s infinite}