:root{--checkboxBackgroundColor:linear-gradient(135deg,#57ddff,#c058f3);--textHoverColor:#3a7bfd;--bodyBackgroundColor:#e4e5f1;--todoBackgroundColor:#fafafa;--lineThroughTextColor:#d2d3db;--textColor:#9394a5;--todoTextColor:#484b6a;--jumbotronBackground:url(../img/bg-desktop-light.988cb74c.jpg);--mobilejumbotronBackground:url(../img/bg-mobile-light.266f20c7.jpg);--themeImage:url(../img/icon-moon.e66b8c62.svg)}.darkTheme{--bodyBackgroundColor:#161722;--todoBackgroundColor:#25273c;--lineThroughTextColor:#8d90aa;--todoTextColor:#cacde8;--jumbotronBackground:url(../img/bg-desktop-dark.02105f02.jpg);--mobilejumbotronBackground:url(../img/bg-mobile-dark.b0112ea5.jpg);--themeImage:url(../img/icon-sun.b3182f3b.svg)}::-webkit-scrollbar{width:5px}::-webkit-scrollbar-thumb{background-color:var(--todoBackgroundColor);border-radius:10px}#theme{height:100vh;overflow:auto;background-color:var(--bodyBackgroundColor);transition:background-color .5s}*{font-family:Josefin Sans,sans-serif!important;transition:all .5s}.jumbotron{height:18em;background-image:var(--jumbotronBackground)!important;background-size:cover;transition:background-image .5s}.container{width:500px;padding-top:5em;padding-bottom:5em}.logoTheme{display:flex;justify-content:space-between}.error-message{position:absolute;background-color:var(--bodyBackgroundColor);color:var(--todoTextColor);width:480px;top:-6%;transform:rotateX(180deg);text-align:center;border-radius:5px;box-shadow:0 0 15px 1px rgba(0,0,0,.3)}.error-message-display{-webkit-animation:slide-down .55s ease-out forwards;animation:slide-down .55s ease-out forwards}.h1{font-size:2.5rem;font-weight:900;letter-spacing:1rem;color:#fff}.themeImage{background:var(--themeImage) no-repeat;background-size:contain;transition:background .5s;width:6%;cursor:pointer}.newTodo{margin:3em 0 1.2em 0}.newTodo,.newTodoBtn{display:flex;align-items:center}.newTodoBtn{font-size:1.5rem;margin-left:5px;border-radius:5px;cursor:pointer;justify-content:center;width:32px;height:35px}.newTodoBtn,.newTodo input{background-color:var(--todoBackgroundColor);color:var(--todoTextColor)}.newTodo input{width:100%;padding:.8em 1em;border-radius:7px;border:none;font-weight:600;opacity:.8}.newTodo input:focus{outline:none;transition:box-shadow .5s;box-shadow:0 0 15px 1px rgba(0,0,0,.3)}.newTodo input::-moz-placeholder{font-weight:600;opacity:.6}.newTodo input:-ms-input-placeholder{font-weight:600;opacity:.6}.newTodo input::placeholder{font-weight:600;opacity:.6}.todoList{border-radius:7px;background-color:var(--todoBackgroundColor);box-shadow:0 0 15px 1px rgba(0,0,0,.3)}.individualTodoList{border-bottom:1px solid var(--textColor);display:flex;justify-content:space-between;padding:.7em 1em;position:relative;cursor:-webkit-grabbing;cursor:grabbing}.individualTodoList:hover .deleteTodo{opacity:1}.individualTodoList span:first-child{display:flex;justify-content:flex-start;align-items:center;width:100%;margin-left:40px}.individualTodoList span:first-child input{margin-left:5px;visibility:hidden}.todoText{display:inline-block;font-weight:500;font-size:20px;cursor:text;color:var(--todoTextColor);width:90%}#todoTextEdit{display:inline-block;visibility:visible}.todoText.completed{color:var(--lineThroughTextColor);text-decoration:line-through;pointer-events:none}.checkbox{width:22px;height:22px;border-radius:50%;text-align:center;border:1px solid var(--lineThroughTextColor);position:absolute;left:18px;top:14px;z-index:1;display:flex;align-items:center;justify-content:center;background:transparent;cursor:pointer}.checkbox:hover{border-radius:50%;border:1px solid transparent;background:var(--checkboxBackgroundColor) border-box;-webkit-mask:linear-gradient(#fff 0 0) padding-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) padding-box,linear-gradient(#fff 0 0);-webkit-mask-composite:destination-out;mask-composite:exclude}.checkbox.completed,.checkbox.completed:hover{background:var(--checkboxBackgroundColor);border:none}.checkbox.completed:hover{-webkit-mask-composite:destination-over;mask-composite:destination-over}.checkbox img{width:50%;opacity:0}.completed img{opacity:1}.deleteTodo{opacity:0;transition:opacity .2s;cursor:pointer}.todoFootLinks{display:flex;justify-content:space-between;padding:10px}.clearComplete,.numOfItems{display:flex;justify-content:center;align-items:center;margin:0;font-size:.9rem;font-weight:500;color:var(--textColor)}.clearComplete{cursor:pointer}.clearComplete:hover{color:var(--todoTextColor)}.mobileLinks{display:none}.links{display:flex;justify-content:space-between;width:35%;text-transform:capitalize;font-size:.9rem;font-weight:500;color:var(--textColor)}.links span{cursor:pointer;transition:color .2s}.links span:hover{color:var(--todoTextColor)}.active{color:var(--textHoverColor)}.dragInfo{margin:2em;text-align:center;opacity:.7;color:var(--textColor)}.list-enter-active,.list-leave-active{transition:all .5s ease}.list-enter-from{opacity:0;transform:translateX(-30px)}.list-leave-to{opacity:0;transform:translateX(30px)}@media screen and (max-width:550px){.container{width:100%}.error-message{width:95%}.jumbotron{background-image:var(--mobilejumbotronBackground)!important}.logoTheme{width:90%;margin:auto}.newTodo{width:90%;margin:4em auto 1.2em auto}.deleteTodo{opacity:1}.todoList{width:90%;margin:auto}.h1{font-size:calc(1.375rem + 1.5vw)}.links{display:none}.mobileLinks{width:90%;text-transform:capitalize;font-size:.9rem;font-weight:500;color:var(--textColor);display:flex;justify-content:space-evenly;align-items:center;background:var(--todoBackgroundColor);margin:15px auto;border-radius:7px;padding:.8em 4em}.mobileLinks span{transition:color .2s;cursor:pointer}.mobileLinks span:hover{color:var(--todoTextColor)}}@-webkit-keyframes slide-down{to{top:2%;transform:rotateX(0deg)}}@keyframes slide-down{to{top:2%;transform:rotateX(0deg)}}