:root{color-scheme:light dark;color:#ffffffde;background-color:#242424}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh;background-image:repeating-linear-gradient(to top left,#ff000064,#beaf0870,#00ff005a,#00ffff4d,#ff00ff50);background-size:200% 200%;animation:abstract 55s linear infinite;position:relative;overflow:hidden;-webkit-animation:abstract 55s linear infinite}@keyframes abstract{0%{background-position:left top}25%{background-position:top right}50%{background-position:right bottom}75%{background-position:bottom left}to{background-position:left top}}button{border-radius:8px;border:1px solid transparent;padding:.4em 1em;font-size:1em;font-weight:500;opacity:.9;color:#257ca5;font-family:inherit;background-color:#1a1a1a;background:linear-gradient(to right,#bdbdbd89,#d8d8d851,#bdbdbd89);cursor:pointer;border:1px solid rgb(138,138,138);transition:background-color .35s;-webkit-transition:background-color .35s;-moz-transition:background-color .35s;-ms-transition:background-color .35s;-o-transition:background-color .35s}button:hover{background-color:#257ca5;border:1px solid #ffffff;color:#fff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}.title{font-size:100px;font-weight:700;color:#fff;opacity:.4;z-index:0;position:absolute;top:0;text-shadow:#1a1a1a 5px 5px 1px;cursor:default;transform:scaleY(.8);-webkit-transform:scaleY(.8);-moz-transform:scaleY(.8);-ms-transform:scaleY(.8);-o-transform:scaleY(.8)}.container{background-color:#257ca5cc;position:absolute;left:0;right:0;top:0;bottom:0;display:flex;justify-content:center;align-items:center;flex-direction:column;background:repeating-linear-gradient(to left,#ffffff60,#00000051 2px)}.input{width:85%;display:flex;justify-content:space-between;align-items:center;font-weight:700;gap:1vw}.list{background-color:#d5d5d599;width:85%;display:flex;flex-direction:column;gap:5px;transition:color .3s ease-in-out,transform .3s ease-in-out;padding:10px;border:1px solid rgb(138,138,138);border-radius:10px;margin-top:10px}.task{border:1px solid rgb(138,138,138);background-color:#d5d5d580;border-radius:10px;font-weight:700;font-size:17px;display:flex;padding-left:13px;justify-content:space-between;align-items:center}.text:first-letter{text-transform:uppercase}.add{width:150px}.text{font-weight:700;filter:blur(.3px);text-stroke:.35px rgb(0,0,0);-webkit-text-stroke:.35px rgb(0,0,0);color:#fff;text-transform:capitalize;font-family:Lucida Sans,Lucida Sans Regular,Lucida Grande,Lucida Sans Unicode,Geneva,Verdana,sans-serif;-webkit-filter:blur(.3px)}.false{cursor:pointer;transition:background-color .5s ease-in-out;-webkit-transition:background-color .5s ease-in-out;-moz-transition:background-color .5s ease-in-out;-ms-transition:background-color .5s ease-in-out;-o-transition:background-color .5s ease-in-out}.task:focus-within{background:linear-gradient(to left,#ffffff00,#e8e8e8,#ffffff00)}.duration{width:66px}.notation{width:56px}@media screen and (max-width: 760px){.task{font-size:15px;gap:20px}.input{display:block;justify-content:center}.add{margin-left:200px;margin-top:10px;margin-bottom:7px}}@media screen and (max-width: 700px){.add{margin-left:180px}}@media screen and (max-width: 650px){.add{margin-left:160px}}@media screen and (max-width: 600px){.add{margin-left:140px}}@media screen and (max-width: 550px){.add{margin-left:120px}}@media screen and (max-width: 430px){.container{width:100%}.task{font-size:14px;padding-left:3px;gap:0}.list{padding:10px 2px}button{padding-left:5px;padding-right:5px;width:77px}.add{margin-left:135.5px}.list,.input{width:98%}span{width:90px;word-wrap:break-word}.duration{flex-basis:9%;width:60px;word-wrap:break-word}.notation{width:56px}}@media screen and (max-width: 414px){.add{margin-left:128.5px}}@media screen and (max-width: 390px){.add{margin-left:116px}}@media screen and (max-width: 376px){.add{margin-left:101.5px}}@media screen and (max-width: 320px){.title{font-size:80px}.task{font-size:12px}.add{margin-left:82px}}