@import"https://fonts.googleapis.com/css2?family=Inter&display=swap";*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}.App{width:100vw;min-height:100vh;display:flex;flex-direction:column;align-items:center;background-color:#2f74c0;font-family:Inter,sans-serif}.title{text-transform:uppercase;font-size:40px;margin:30px 0;color:#fff;z-index:1;text-align:center}@media (max-width: 800px){.heading{margin:15px 0;font-size:35px}}.input{display:flex;width:95%;position:relative;align-items:center}.input--box{width:100%;border-radius:50px;padding:20px 30px;font-size:25px;border:none;transition:.2s;box-shadow:inset 0 0 5px #000}.input--box:focus{box-shadow:0 0 10px 1000px #00000080;outline:none}.input--button{position:absolute;width:50px;height:50px;margin:12px;border-radius:50px;right:0px;border:none;font-size:15px;background-color:#2f74c0;color:#fff;transition:.2s all;box-shadow:0 0 10px #000}.input--button:hover{background-color:#388ae2}.input--button:active{transform:scale(.8);box-shadow:0 0 5px #000}.todos{border-radius:5px;display:flex;flex-direction:column;width:47.5%;padding:15px}.todos--single{display:flex;border-radius:5px;padding:20px;margin-top:15px;background-image:url(https://img.freepik.com/free-photo/crumpled-yellow-paper-background-close-up_60487-2390.jpg?size=626&ext=jpg);transition:.2s}.todos--single:hover{box-shadow:0 0 5px #000;transform:scale(1.03)}.todos--single--text{flex:1;padding:5px;border:none;font-size:20px}.todos--single--text:focus{outline:none}.icon{margin-left:10px;font-size:25px;cursor:pointer}@media (max-width: 1100px){.todos{width:45%}}@media (max-width: 700px){.input{width:95%}.container{width:95%;flex-direction:column}.todos{width:95%;margin-bottom:10px}}