*,:after,:before{box-sizing:border-box}html{text-size-adjust:none}blockquote,body,dd,dl,figure,h1,h2,h3,h4,p{-webkit-margin-after:0;margin-block-end:0}ol[role=list],ul[role=list]{list-style:none}body{min-height:100vh;line-height:1.5}button,h1,h2,h3,h4,input,label{line-height:1.1}h1,h2,h3,h4{text-wrap:balance}a:not([class]){-webkit-text-decoration-skip:ink;text-decoration-skip-ink:auto;color:currentColor}img,picture{max-width:100%;display:block}button,input,select,textarea{font:inherit}textarea:not([rows]){min-height:10em}:target{scroll-margin-block:5ex}body{background:#121212;color:#fff;min-height:100svh;margin:0;font-size:calc(15px + .390625vw)}.container{padding:calc(8px + 1.5625vw)}#home{height:100svh;display:grid;place-items:center}#todos{display:flex;flex-wrap:wrap}#todos .todo{transition:all .5s ease;list-style-type:none;cursor:pointer;border:.5px solid rgba(0,0,0,.5);padding:25px;min-height:250px;min-width:250px;width:25%;box-shadow:2px 2px 10px #555;margin:25px;display:grid}#todos .todo input{position:static;background-color:#121212;color:#fff;margin:10px 0 0;display:inline-block;width:100%;min-height:2em;max-height:3em;border:none}#todos .todo .details{font-size:.85rem;display:flex;justify-content:space-between}#todos .todo.completed{position:relative;overflow:hidden;cursor:pointer}#todos .todo.completed:after{content:"DONE";text-transform:uppercase;-webkit-text-decoration:underline overline red;text-decoration:underline overline red;text-underline-offset:10px;display:flex;justify-content:center;align-items:center;padding:5%;transform-origin:left center;rotate:45deg;color:red;font-weight:900;letter-spacing:2px;transition:all .5s ease-out .6s;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);height:25%;min-width:50%;border-radius:10%;border:5px ridge red}#todos .todo.completed:before{content:"";overflow:hidden;position:absolute;top:0;left:0;height:100%;width:90%;filter:blur(5px);rotate:-180deg;transform:translateX(-15%);transition:all .5s ease-in;background:hsla(0,0%,7%,.91);border-radius:16px;box-shadow:0 4px 30px rgba(0,0,0,.1);backdrop-filter:blur(1.5px);-webkit-backdrop-filter:blur(1.5px);border-right:2px solid #fff}#todos .todo.active,#todos .todo:hover{border:1px solid #ccc;box-shadow:0 10px 25px #555;transform:scale(1.05)}#todos .todo.active:before,#todos .todo:hover:before{transition:all .5s ease-out .3s;transform:translateX(-115%)}#todos .todo.active:after,#todos .todo:hover:after{transition:all .25s ease-out;opacity:0}