:root{--clr-primary-1:#063251;--clr-primary-2:#104e7a;--clr-primary-3:#1a6aa2;--clr-primary-4:#2d87c8;--clr-primary-5:#49a6e9;--clr-primary-6:#6ebef7;--clr-primary-7:#8bcbf9;--clr-primary-8:#a5d5f8;--clr-primary-9:#c5e5fc;--clr-primary-10:#ebf7ff;--clr-grey-1:#102a42;--clr-grey-2:#243a52;--clr-grey-3:#324d67;--clr-grey-4:#48647f;--clr-grey-5:#617d98;--clr-grey-6:#829ab0;--clr-grey-7:#9eb2c7;--clr-grey-8:#bcccdc;--clr-grey-9:#dae2ec;--clr-grey-10:#f1f5f8;--clr-white:#fff;--clr-red-dark:#bb2525;--clr-red-light:#e66b6b;--clr-green-dark:#25bb32;--clr-green-light:#6be675;--clr-black:#222;--transition:all 0.3s linear;--spacing:0.1rem;--radius:0.25rem;--light-shadow:0 5px 15px rgba(0,0,0,0.1);--dark-shadow:0 5px 15px rgba(0,0,0,0.2);--max-width:1170px;--fixed-width:620px}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#000}code{font-family:source-code-pro,Menlo,Monaco,Consolas,"Courier New",monospace}body{background-color:var(--clr-primary-10);height:100vh}.container{background-color:var(--clr-white);width:70%;margin:0 auto;position:relative;height:425px;min-width:270px;top:20vh;max-width:800px;box-shadow:var(--light-shadow);padding:1px}.container:hover{box-shadow:var(--dark-shadow)}.container h2{color:var(--clr-primary-1);margin-bottom:1.5rem;text-align:center;font-size:26px;font-weight:700;letter-spacing:3px}.badge{background-color:var(--clr-primary-2);color:#fff;width:36px;height:36px;margin-left:20px;display:inline-block;text-align:center;border-radius:10px;letter-spacing:0}.input{position:relative;margin:0 auto;width:80%;height:30px}.input input[type=text]{width:75%;height:30px;background-color:var(--clr-primary-10);outline:none;padding-left:20px;z-index:100;font-size:18px}.input button,.input input[type=text]{position:relative;border:none;letter-spacing:1px}.input button{width:18%;height:33px;background-color:var(--clr-primary-7);border-radius:2px;top:-1px;cursor:pointer;font-size:15px;font-weight:500}.input input[type=text]:focus{outline:3px groove var(--clr-primary-6)}.clear{color:var(--clr-red-dark);border:none;background-color:transparent;position:relative;font-size:18px;width:50%;letter-spacing:1.5px;cursor:pointer;left:25%;font-weight:500;height:40px;-webkit-align-items:flex-end;align-items:flex-end;background-attachment:fixed;top:40px;text-transform:capitalize}.btndwnld{position:absolute;bottom:0;right:10px}.btndwnld button{border:none;background-color:inherit;font-size:30px;color:#000;cursor:pointer}@media screen and (max-width:1025px){.container{width:60%}}@media screen and (max-width:930px){.input input[type=text]{width:72%}.input button{width:20%}}@media screen and (max-width:845px){.input input[type=text]{width:70%}.input button{width:22%}.container{height:500px;width:80%}}@media screen and (max-width:765px){.input input[type=text]{width:70%}.input button{width:22%}.input{width:90%}.container h2{font-size:22px}.clear{top:55px}}@media screen and (max-width:680px){.input input[type=text]{width:65%}.input button{width:28%}.container{min-width:none;max-width:none;width:80%}}@media screen and (max-width:580px){.input input[type=text]{width:93%;margin-bottom:10px;height:35px}.container h2{font-size:24px}.input button{width:40%;position:relative;left:30%}.input{height:80px}.container{min-width:none;max-width:none;width:80%;top:15vh}.clear{top:15px}}.output{width:75%;margin:0 auto;position:relative;height:220px;top:30px;overflow-y:scroll}.item{text-transform:capitalize;padding:5px;font-weight:400}.item,.item button{position:relative;font-size:20px}.item button{float:right;margin:0 6px;padding:0;border:none;background-color:inherit;cursor:pointer}.delete{color:#fd2020}.delete,.edit{position:relative;left:-10px}.edit{color:#20ff20}::-webkit-scrollbar{width:15px}::-webkit-scrollbar-thumb{background:#aaa;border-radius:10px}.zero{text-align:center;color:rgba(255,0,0,.719);font-size:15px;letter-spacing:1px;word-spacing:2px;line-height:30px}@media screen and (max-width:845px){.output{height:295px}.delete,.edit{left:0}}@media screen and (max-width:680px){.output{width:80%}.delete,.edit{left:-10px}}@media screen and (max-width:580px){.output{top:10px;height:285px}}
/*# sourceMappingURL=main.95da44eb.chunk.css.map */