body{background-color:#000;color:#fff;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;text-transform:uppercase}.topbar__form{display:flex;flex-direction:column}.form__group{position:relative;padding:15px 0 0;margin-top:10px;margin-left:12.5%;width:75%}.form__field{width:100%;border:0;border-bottom:2px solid #9b9b9b;outline:0;font-size:1.3rem;color:#fff;padding:7px 0;background:transparent;transition:border-color .2s}.form__field::placeholder{color:transparent}.form__field:placeholder-shown~.form__label{font-size:1.3rem;cursor:text;top:20px}.form__label{position:absolute;top:0;display:block;transition:.2s;font-size:1rem;color:#9b9b9b}.form__field:focus{padding-bottom:6px;font-weight:700;border-width:3px;border-image:linear-gradient(to right,#11998e,#38ef7d);border-image-slice:1}.form__field:focus~.form__label{position:absolute;top:0;display:block;transition:.2s;font-size:1rem;color:#11998e;font-weight:700}.form__field:required,.form__field:invalid{box-shadow:none}.form__button{padding:1vh 5vw;align-self:center;margin-top:7.5%;margin-bottom:4%;width:25%;background:linear-gradient(to right,#11998e,#38ef7d);border:0;border-radius:8%}@media screen and (min-width: 700px){.form__button{width:15%}}@media screen and (min-width: 1100px){.form__button{width:10%;margin-top:4%;margin-bottom:3%}}@media screen and (min-width: 1600px){.form__button{width:5%;margin-top:3%;margin-bottom:1%}}.form__button:hover{cursor:pointer}.todo{display:grid;grid-template:1fr/80% 1fr;height:10vh;font-size:18px}@media screen and (min-width: 700px){.todo{height:9vh;font-size:25px}}@media screen and (min-width: 1100px){.todo{height:10vh;font-size:20px}}@media screen and (min-width: 1600px){.todo{height:12vh;font-size:30px}}.todo__info{margin-left:4%;display:flex;flex-direction:column;justify-content:center}.todo__info:hover{cursor:pointer}.todo__info-done{margin-left:4%;display:flex;flex-direction:column;justify-content:center;text-decoration:line-through;text-decoration-thickness:5%;text-decoration-color:#38ef7d;opacity:40%}.todo__info-done:hover{cursor:pointer}.todo__description{font-size:70%;margin-left:2%;color:#9b9b9b}.todo__button{justify-self:flex-end;align-self:center;margin-right:5%;height:40px;width:45px;border-radius:100%;background:linear-gradient(to right,#11998e,#38ef7d);border:0}@media screen and (min-width: 700px){.todo__button{height:60px;width:65px}}@media screen and (min-width: 1100px){.todo__button{height:40px;width:45px}}@media screen and (min-width: 1600px){.todo__button{height:70px;width:75px}}