@import"https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap";*{margin:0%;padding:0%;box-sizing:border-box;line-height:1.5;font-family:Roboto,sans-serif}img{height:20px}body{background-color:#b9b6b6}.App{height:100vh}.head{background-color:orange;padding:2%;color:#fff;border-bottom:2px solid white;box-shadow:0 0 6px gray;display:flex;justify-content:space-between}.note{height:fit-content;width:300px;margin:2%;background:#f5f5f5;padding:1.8%;border-radius:5px}.footer{text-align:center;font-weight:500;color:gray}.noteTitle{font-weight:500;padding:1%;margin-bottom:10px;border-bottom:.5px solid gray;font-size:x-large}#note{display:flex;justify-content:center;flex-wrap:wrap}.text{font-weight:400;font-size:larger;margin-bottom:1%}.time{margin-top:2%;font-size:smaller}.addNote>.addForm{background-color:#fff;display:flex;flex-direction:column;width:70%;border-radius:5px;padding:1.5%}.addNote{display:flex;justify-content:center;padding:1rem;margin-bottom:1em}.addForm>input[type=text],textarea{border:none;padding:1%;color:#000;resize:none}.addForm>input[type=text]:focus,textarea:focus{border:none;outline:none;padding:1%}input[type=text]::placeholder,textarea::placeholder{color:#000}.add{width:fit-content;padding:2%;position:absolute;left:80%;right:50%;border-radius:50%;background-color:orange!important;border:none;transform:translate(-70%,120%);color:#fff;cursor:pointer;display:flex;transition:.2s background-color linear}.add:hover{background-color:#ff4500!important}.editForm>input{display:flex;width:100%;gap:10px}.editForm>input:first-child{border-bottom:1px solid black!important}.edit{margin-bottom:10px;border:none;font-size:large;background:transparent;padding:1%;width:100%;resize:none}.edit:focus{outline:none}.items{display:flex;justify-content:space-between}.delete{color:red;border:none;background-color:transparent;line-height:2.5;cursor:pointer}.edited{color:green;font-weight:500}.pen{line-height:1.5}.icon{display:flex;gap:20px;align-items:flex-start}.theme{height:fit-content;line-height:4;background:transparent;border:none;cursor:pointer}.dark{background-color:#202035}.dark .head{background-color:#fff;color:#000;border-bottom:2px solid rgb(0,0,0);box-shadow:0 0 6px #fff}.dark .addForm{border:1px solid white}.dark .addForm>input[type=text]{border:none;padding:1%;color:#000}.dark input[type=text]::placeholder,.dark textarea::placeholder{color:#000;font-weight:600}.dark .add{background-color:#202035!important;border:1px solid white}.dark footer{color:#fff}@media (max-width: 700px){.addNote>.addForm{width:90%}.add{transform:translate(10%,170%)}}@media (max-width: 500px){#note{flex-wrap:wrap}.head{padding:4%;gap:30px}header>h1{text-align:center}}@media (max-width: 400px){.add{transform:translate(-40%,200%)}}