@import"https://fonts.googleapis.com/css2?family=Madimi+One&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Patrick+Hand&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Rubik+Mono+One&display=swap";*{margin:0;padding:0;box-sizing:border-box;font-family:Poppins,sans-serif}.container{max-width:1200px;margin:auto;padding:0 10px}header{background-color:#74abb9;box-shadow:1px 1px 5px gray}header .container{display:flex;align-items:center;justify-content:space-between}header .container .logo-img{width:90px}header .container .welcome{color:#49406b;font-weight:600;font-size:1.4rem;letter-spacing:2px}header .container .welcome p{position:relative;font-family:Madimi One,sans-serif;color:#fff;background-color:#0000001a;border-radius:20px;padding:1rem 2rem}header .container .welcome p span{content:"|";position:absolute;right:-6px;font-size:2rem}section#joke .container{background-color:#74abb9;transition:.6s all ease;display:grid;place-items:center;padding:3rem;color:#6a2b2a;font-weight:600;gap:1rem}section#joke .container #joke-btn{border:none;font-size:1.3rem;padding:.7rem 2rem;background-color:#74abb9;border-radius:15px;cursor:pointer;transition:.6s all ease;background-color:#fff;color:#74abb9;border:1px solid #74abb9}section#joke .container #joke-btn:hover{opacity:.8}section#joke .container #joke-btn:active{color:#fff}section#joke .container p{font-size:1.3rem;padding:2rem;color:#fff;text-shadow:1px 1px 5px white;text-align:center;border-radius:20px;background-color:#0000001a}section#count-time .container{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;padding:1rem;border:10px solid #74abb9}section#count-time .container .time-container{padding:1rem}section#count-time .container .time-container span{font-size:2rem;font-family:Rubik Mono One,monospace;font-weight:700;color:#0f1c1f}section#count-time .container .active-task p{color:#5e949c;padding:10px 1rem;border-top:1px solid;border-bottom:1px solid;text-transform:capitalize;font-weight:600;text-align:center;min-width:300px;width:80%;margin:auto;display:flex;align-items:center;justify-content:center;background-color:#0000001a;white-space:wrap;position:relative}section#count-time .container .active-task p:before{content:"Active Task:";position:absolute;top:-23px;font-size:.8rem;white-space:nowrap}section#count-time .container .time-buttons{display:flex;align-items:center;justify-content:center;gap:5px}section#count-time .container .time-buttons button{border:none;font-size:1.3rem;padding:.7rem 2rem;background-color:#74abb9;border-radius:15px;cursor:pointer;transition:.6s all ease;text-shadow:2px 2px 7px #fff;border:1px solid gray}section#count-time .container .time-buttons button:hover{opacity:.8}section#count-time .container .time-buttons button:active{color:#fff}@media screen and (max-width: 500px){section#count-time .container .active-task p{white-space:wrap}section#count-time .time-buttons{flex-wrap:wrap}}section#tasks .container{padding:1rem;display:flex;flex-direction:column;justify-content:start;align-items:center;border:10px solid #74abb9;min-height:400px}section#tasks .container .task-add-container{width:400px;padding:1rem;display:flex;align-items:center;justify-content:center;gap:15px}section#tasks .container .task-add-container input{padding:10px 1rem 10px 1.6rem;font-size:1.2rem;background-color:#93c2cd;border:none;border-radius:15px;transition:.5s all ease}section#tasks .container .task-add-container input:hover{opacity:.9}section#tasks .container .task-add-container input:focus{outline:none;background-color:#8faeb5}section#tasks .container .task-add-container button{text-shadow:1px 1px 5px white;border:none;font-size:1.3rem;padding:.7rem 2rem;background-color:#74abb9;border-radius:15px;cursor:pointer;transition:.6s all ease}section#tasks .container .task-add-container button:hover{opacity:.8}section#tasks .container .task-add-container button:active{color:#fff}section#tasks .container ul#task-container{width:400px;list-style:none;display:flex;flex-direction:column-reverse;align-items:stretch;justify-self:start;gap:5px}section#tasks .container ul#task-container li{font-size:.8rem;padding:8px 8px 1.7rem 2rem;position:relative;cursor:pointer;border-left:5px solid transparent;border-radius:4px;background-color:#dce0e1;cursor:move}section#tasks .container ul#task-container li p{width:85%;white-space:wrap;max-height:80px;overflow:auto;text-transform:capitalize}section#tasks .container ul#task-container li.checked{text-decoration:line-through;color:#686565;background-color:#b3d4b3;order:-1}section#tasks .container ul#task-container li.active{border-color:#588513;background-color:#adc1c4}section#tasks .container ul#task-container li span.checkbox{position:absolute;width:20px;height:20px;left:3px;top:13%;background-color:#c3c3d3;object-fit:contain;border-radius:50%;border:2px solid black;cursor:pointer}section#tasks .container ul#task-container li.checked .checkbox{font-size:.9rem;color:#000;display:flex;justify-content:center;align-items:center;position:absolute;width:20px;height:20px;left:3px;top:13%;background-color:#28b328;object-fit:contain;border-radius:50%;border:2px solid rgb(36,127,132)}section#tasks .container ul#task-container li span.delete{font-size:1.3rem;position:absolute;color:#f50;cursor:pointer;right:10px;top:1px}section#tasks .container ul#task-container li span.edit-span{font-size:1.2rem;position:absolute;cursor:pointer;right:33px;top:1px}section#tasks .container ul#task-container li .task-time{content:"11123";font-size:.8rem;position:absolute;color:#247f84;opacity:.8;left:32px;bottom:5px}section#tasks .container ul#task-container li .pomo-span{font-size:.8rem;position:absolute;color:#247f84;opacity:.8;left:70px;bottom:5px}section#tasks .container ul#task-container li .pomo-span:before{content:" //  "}section#tasks .container ul#task-container li .pomo-span:after{content:" pomo"}section#tasks .container ul#task-container li .color-span{width:60px;height:20px;position:absolute;right:10px;bottom:3px}section#tasks .container ul#task-container li .color-span input{width:100%;height:100%;cursor:crosshair}section#tasks .container ul#task-container li .color-span:before{content:"Theme: ";position:absolute;left:-55px;top:1px;color:#74abb9}section#tasks .container ul#task-container li.dragging{opacity:.5}section#tasks .container ul#task-container li.over{background-color:#a9a9a9}@media screen and (max-width: 500px){section#tasks .container .task-add-container{width:99%;flex-direction:column;align-items:stretch}section#tasks .container ul#task-container{width:98%}section#tasks .container ul#task-container li p{width:65%}}main section .container{transition:.6s all ease}button,input{text-shadow:1px 1px 5px white}