@import"https://fonts.googleapis.com/css2?family=Winky+Sans:ital,wght@0,300..900;1,300..900&display=swap";:root{color-scheme:light dark;--font: "Winky Sans", Arial;--font-color: light-dark(black, white);--submit: light-dark(url(../assets/submit-dark.svg), url(../assets/submit-light.svg));--input-bg: light-dark(white, #121212);--scrollbar-color: grey}::-webkit-scrollbar{width:12px}::-webkit-scrollbar-track{background:var(--input-bg)}::-webkit-scrollbar-thumb{background:var(--scrollbar-color);border:2px solid var(--input-bg);border-radius:999999px}::-webkit-scrollbar-button:single-button:vertical:increment{border-width:8px 8px 0 8px;border-color:#555555 transparent transparent transparent}*{padding:0;margin:0;box-sizing:border-box}body{height:100vh;width:100%;font-family:var(--font);display:flex;flex-direction:column;justify-content:center;align-items:center;gap:100px;animation:appear .5s}.app{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5vh}header{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:50px}.title{display:flex;flex-direction:column;justify-content:center;align-items:center}.input{border-radius:999999px;padding:7px;border:2px solid var(--font-color);width:450px;display:flex;justify-content:space-between;align-items:center}.input img{transition:scale .5s;cursor:pointer}.input img:hover{scale:120%}input{flex:1;font-family:var(--font);font-size:large;border:0;padding:3px;background-color:var(--input-bg)}input:active,input:focus{outline:0;background-color:var(--input-bg)}#tasks{display:block;max-height:400px}@keyframes appear{0%{opacity:0%}to{opacity:100%}}.task{animation:appear .5s;display:flex;justify-content:space-between;padding:10px;align-items:center;border:2px solid var(--font-color);width:450px;border-radius:10px;margin-bottom:10px}.task button{width:30px;height:30px;border:0;background-color:transparent;cursor:pointer;opacity:0%;transition:all .5s;display:flex;justify-content:center;align-items:center;border-radius:5px}h3{position:relative;max-width:300px;font-weight:400;padding:3px;cursor:text;transition:all .35s ease;outline:none;cursor:pointer;border-bottom:2px solid transparent}h3:focus{cursor:text;border-bottom:2px solid var(--font-color)}.task:hover button{opacity:100%}.task button:hover{background-color:#c57d7d}@media (max-width: 1250px){.input,.task{width:350px}}