@import url(https://fonts.googleapis.com/css?family=Lato:400,700&display=swap);:root{--clr-primary-1:#044e53;--clr-primary-2:#0a6c75;--clr-primary-3:#0e7c86;--clr-primary-4:#149199;--clr-primary-5:#2caeba;--clr-primary-6:#37bcc8;--clr-primary-7:#52d1da;--clr-primary-8:#88ebf2;--clr-primary-9:#bff8fd;--clr-primary-10:#e0fcff;--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;--ff-primary:"Lato",sans-serif;--transition:all 0.3s linear;--spacing:0.25rem;--radius:0.2rem;--light-shadow:0 5px 15px rgba(0,0,0,.1);--dark-shadow:0 5px 15px rgba(0,0,0,.2);--fixed-width:500px;--max-width:800px;--clr-red-dark:#7e0505;--clr-red-light:#f0b4b4;--clr-yellow-dark:#a4a404;--clr-yellow-light:#fcfc79;--clr-green-dark:#0a4d10;--clr-green-light:#aaeba8}*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{background:#f1f5f8;background:var(--clr-grey-10);color:#102a42;color:var(--clr-grey-1);font-family:Lato,sans-serif;font-family:var(--ff-primary);font-size:.875rem;line-height:1.5}ul{list-style-type:none}a{text-decoration:none}img:not(.nav-logo){display:block;width:100%}h1,h2,h3,h4{letter-spacing:.25rem;letter-spacing:var(--spacing);line-height:1.25;margin-bottom:.75rem;text-transform:capitalize}h1{font-size:3rem}h2{font-size:2rem}h3{font-size:1.25rem}h4{font-size:.875rem}p{color:#617d98;color:var(--clr-grey-5);margin-bottom:1.25rem}@media screen and (min-width:800px){h1{font-size:4rem}h2{font-size:2.5rem}h3{font-size:1.75rem}body,h4{font-size:1rem}h1,h2,h3,h4{line-height:1}}.btn{background:#2caeba;background:var(--clr-primary-5);border:2px solid transparent;box-shadow:0 1px 3px rgba(0,0,0,.2);color:#fff;color:var(--clr-white);cursor:pointer;display:inline-block;font-size:.875rem;letter-spacing:.25rem;letter-spacing:var(--spacing);padding:.375rem .75rem;text-transform:uppercase;transition:all .3s linear;transition:var(--transition)}.btn:hover{background:#88ebf2;background:var(--clr-primary-8);color:#044e53;color:var(--clr-primary-1)}.section{padding:5rem 0}.section-title{margin-bottom:4rem;text-align:center}.section-title h2{text-transform:uppercase}.section-title span{color:#2caeba;color:var(--clr-primary-5)}.section-center{margin:0 auto;max-width:768px;width:90vw}@media screen and (min-width:992px){.section-center{width:95vw}}main{align-items:flex-start;display:grid;justify-items:center}.main-container{grid-gap:1rem;background-color:#fff;background-color:var(--clr-white);border-radius:.2rem;border-radius:var(--radius);box-shadow:0 5px 15px rgba(0,0,0,.1);box-shadow:var(--light-shadow);display:grid;gap:1rem;grid-template-columns:1fr;padding:2rem 1rem}.title{margin-bottom:2rem;text-align:center}.title .underline{background-color:#2caeba;background-color:var(--clr-primary-5);height:3px;margin-left:auto;margin-right:auto;width:6rem}.alert,.title .underline{border-radius:.2rem;border-radius:var(--radius)}.alert{padding:.4rem .5rem;text-align:center}.alert.success{background-color:#aaeba8;background-color:var(--clr-green-light);color:#0a4d10;color:var(--clr-green-dark)}.alert.danger{background-color:#f0b4b4;background-color:var(--clr-red-light);color:#7e0505;color:var(--clr-red-dark)}.form-container form{display:grid;grid-template-columns:1fr auto}.form-container .form-input,.form-container .submit-btn{font-size:1rem;padding:.6rem .5rem}.form-container .form-input{background-color:#f1f5f8;background-color:var(--clr-grey-10);border:2px solid transparent;border-radius:0;border-bottom-left-radius:.2rem;border-bottom-left-radius:var(--radius);border-top-left-radius:.2rem;border-top-left-radius:var(--radius)}.form-container .form-input:focus{outline-color:#2caeba;outline-color:var(--clr-primary-5)}.form-container .submit-btn{background-color:#0e7c86;background-color:var(--clr-primary-3);border:2px solid transparent;border-bottom-right-radius:.2rem;border-bottom-right-radius:var(--radius);border-top-right-radius:.2rem;border-top-right-radius:var(--radius);color:#fff;color:var(--clr-white);cursor:pointer;letter-spacing:.25rem;letter-spacing:var(--spacing);text-transform:capitalize;transition:all .3s linear;transition:var(--transition)}.form-container .submit-btn:hover{background-color:#52d1da;background-color:var(--clr-primary-7);color:#044e53;color:var(--clr-primary-1)}.form-container .submit-btn:focus{outline-color:#149199;outline-color:var(--clr-primary-4)}.todolist-container{grid-gap:1rem;display:grid;gap:1rem;grid-template-columns:1fr}.todolist-container .todo{align-items:center;background-color:#f1f5f8;background-color:var(--clr-grey-10);border-radius:.2rem;border-radius:var(--radius);box-shadow:0 5px 15px rgba(0,0,0,.1);box-shadow:var(--light-shadow);display:grid;grid-template-columns:1fr auto;justify-items:flex-start;padding:.7rem .5rem;text-transform:capitalize;transition:all .3s linear;transition:var(--transition)}.todolist-container .todo:hover{box-shadow:0 5px 15px rgba(0,0,0,.2);box-shadow:var(--dark-shadow)}.todolist-container .todo .message{font-size:1rem;letter-spacing:calc(.25rem - 2px);letter-spacing:calc(var(--spacing) - 2px)}.todolist-container .todo .button-container{grid-gap:1rem;display:grid;gap:1rem;grid-template-columns:1fr 1fr}.todolist-container .todo .button-container button{background:transparent;border:transparent;cursor:pointer;font-size:1.5rem}.edit-btn{color:green;transition:all .3s linear;transition:var(--transition)}.edit-btn:hover{color:#0a4d10;color:var(--clr-green-dark)}.delete-btn{color:red;transition:all .3s linear;transition:var(--transition)}.delete-btn:hover{color:#7e0505;color:var(--clr-red-dark)}.clear-items{margin-top:1rem;text-align:center}.clear-items .clear-btn{background:#0e7c86;background:var(--clr-primary-3);border:2px solid transparent;border-radius:.2rem;border-radius:var(--radius);color:#fff;color:var(--clr-white);cursor:pointer;letter-spacing:.25rem;letter-spacing:var(--spacing);padding:.4rem .5rem;text-transform:capitalize;transition:all .3s linear;transition:var(--transition)}.clear-items .clear-btn:hover{background:transparent;border-color:red;color:red}@media screen and (min-width:768px){.main-container{padding:3rem}}
/*# sourceMappingURL=main.3ba53cfe.css.map*/