@import"https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap";:root{--clr-primary: #fff;--clr-primary-300: rgba(255, 255, 255, .8);--clr-button: #9474cc;--clr-secondary-200: #434956;--clr-secondary-300: #272a2e;--clr-secondary-400: #222529;--clr-secondary-500: #1d1e20}html{scroll-behavior:smooth}*{margin:0;padding:0;font-family:Inter,sans-serif;box-sizing:border-box}*::selection{background-color:var(--clr-secondary-400);color:var(--clr-accent-500)}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:var(--clr-secondary-500)}::-webkit-scrollbar-thumb{background-color:var(--clr-secondary-300);border-radius:5px}::-webkit-scrollbar-thumb:hover{background-color:var(--clr-secondary-200)}body,#root{width:100%;min-height:100svh;font-size:18px;color:var(--clr-primary-300);background-color:var(--clr-secondary-300);display:flex;align-items:center;justify-content:center}main{width:max(90%,300px);max-width:500px;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:20px 0;margin:0 auto}main>h2{color:var(--clr-primary);font-size:35px}.wrapper{width:100%;height:100%;padding:20px;display:flex;flex-direction:column;gap:20px}.wrapper ol{width:100%;height:100%}.add-panel{height:100px;flex-direction:row;justify-content:center;align-items:center;column-gap:20px}button{padding:10px;background-color:var(--clr-button);color:var(--clr-primary);border:none;border-radius:5px;font-weight:700}button:active{box-shadow:0 0 4px var(--clr-button)}input{height:36px;background-color:var(--clr-secondary-500);border:1px solid var(--clr-secondary-500);border-radius:5px;padding:8px 14px;outline:none;color:var(--clr-primary)}input:is(:focus,:active){border-color:var(--clr-button)}.item{width:90%;height:50px;background-color:var(--clr-secondary-400);border:1px solid var(--clr-secondary-400);border-radius:8px;display:flex;align-items:center;justify-content:space-between;padding:0 20px;font-size:17px;margin:0 auto 15px}.item button{padding:1px;width:30px;height:30px;background-color:transparent}.item img{width:28px;height:28px}ol{list-style-type:none}
