@import "https://fonts.googleapis.com/css2?family=RocknRoll+One&display=swap";body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}html{line-height:1.15}*{box-sizing:border-box;margin:0;padding:0;font-family:RocknRoll One,sans-serif}body{color:#222;background:linear-gradient(190deg,#867bcd 0%,#6a5aab 100%) 0 0/cover no-repeat fixed;overflow:hidden}.App{flex-direction:column;margin-top:3rem;display:flex}.App h1{text-align:center;color:#e1ebfd;text-shadow:0 0 5px #433aa8,3px -1px 5px #271c6c;margin-bottom:2rem;display:inline}.addTodos{justify-content:center;display:flex}.todo-input{background-color:#e1ebfd;border:none;border-radius:5px;align-self:center;width:40vw;min-width:15rem;max-height:2.5rem;padding:.5rem 1rem}.todo-input:focus{border:2px solid #433aa8;outline:none}.add-btn{color:#e1ebfd;cursor:pointer;background-color:#271c6c;border:2px solid #e1ebfd;border-radius:50%;justify-content:center;align-items:center;width:3.2rem;height:3.2rem;margin-left:1rem;font-size:1.5rem;display:flex;box-shadow:2px 4px 10px #271c6c}.add-btn:focus{outline:none}.displaytodos{flex-direction:column;align-items:center;margin-top:3rem;display:flex}.displaytodos .buttons{margin-bottom:2rem}.displaytodos .buttons button{cursor:pointer;border:none;border-radius:20px;padding:.5rem 1.2rem}.displaytodos .buttons button:focus{outline:none}.displaytodos .buttons button:not(:last-child){margin-right:1rem}.displaytodos ul{flex-wrap:wrap;align-self:flex-start;margin-left:5%;list-style:none;display:flex}.card{background:radial-gradient(circle,#b4b6dae6 0%,#e2ecfde6 100%);border-radius:.5rem;flex-direction:column;width:18rem;height:8rem;margin:0 1rem 1rem 0;padding:1rem;display:flex;position:relative}.card textarea{color:#271c6c;background-color:#e1ebfd;border:none;border-radius:8px;height:70%;padding:.5rem}.card textarea:disabled{background-color:#0000}.card .btns{position:absolute;bottom:1rem;right:1rem}.card .btns button{cursor:pointer;color:#271c6c;background-color:#0000;border:none;border-radius:20%;margin:0 .6rem;font-size:1.4rem}.card .btns button:focus{outline:none}.completed{color:#e1ebfd;background-color:#867bcd;border:2px solid #272727;border-radius:20px;padding:.3rem 1rem;font-size:.8rem;position:absolute;top:.3rem;right:.3rem}@media screen and (max-width:640px){.displaytodos{margin-top:2rem;overflow:hidden}.displaytodos ul{flex-direction:column;align-self:center;align-items:center;margin-left:0;display:flex}.card{margin-right:0}}