@import"https://fonts.googleapis.com/css2?family=Neucha&display=swap";.input{display:flex;width:95%;position:relative;align-items:center;margin-bottom:10px}.input__box{width:100%;border-radius:50px;padding:25px;border:none;transition:.2s;box-shadow:inset 0 0 5px var(--bg-grey-100);background-color:var(--bg-white);backdrop-filter:blur(20px);color:#fff}.input__box::placeholder{color:#cdcdcd}.input__box:focus{box-shadow:0 0 10px 1000px #00000080;outline:none}.input__submit{position:absolute;width:50px;height:50px;margin:12px;border-radius:50px;right:0px;border:none;font-size:15px;background-color:var(--bg-white);backdrop-filter:blur(20px);color:#fff;transition:.2s all;box-shadow:0 0 10px #000;cursor:pointer}.input__submit:hover{background-color:var(--bg-grey-100);backdrop-filter:blur(20px)}.input__submit:active{transform:scale(.8);box-shadow:0 0 5px #000}@media screen and (mind-width: 700px){.input{width:95%}}.App{width:100vw;min-height:100vh;display:flex;flex-direction:column;align-items:center;background:url(https://i.postimg.cc/Hn8V64wV/david-schultz.jpg);background-size:cover;font-family:Neucha,cursive}.heading{text-transform:uppercase;font-size:2.25rem;margin:15px 0;color:#fff;z-index:1}@media screen and (min-width: 800px){.heading{font-size:2.75rem;margin:30px 0}}.todos__item{display:flex;align-items:center;border-radius:5px;padding:20px;margin-top:15px;background-color:var(--bg-grey-100);backdrop-filter:blur(20px);transition:.3s}.todos__item:hover{box-shadow:0 0 5px #000;transform:scale(1.02)}.todos-text{font-family:inherit;flex:1;padding:5px;border:none;font-size:20px}.todos-text:focus{outline:none}.todo-text--done{text-decoration:line-through}.icon{margin-left:10px;font-size:25px;cursor:pointer}.todos{padding:15px;border-radius:5px;margin-bottom:10px;height:min-content;background-color:var(--bg-white);backdrop-filter:blur(20px)}.todos__heading{font-size:30px;color:#fff}.container{margin:10px;width:95%;display:flex;flex-direction:column}.completed{background-color:var(--bg-grey-200);backdrop-filter:blur(20px)}@media screen and (min-width: 700px){.todos{width:100%}.container{gap:10px;flex-direction:row}}:root{--bg-white: rgba(255, 255, 255, .1);--bg-grey-100: rgba(255, 255, 255, .3)}*,*:after,*:before{box-sizing:border-box}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}