body{background-color:#a9a9a9;font-family:Arial,Helvetica,sans-serif;margin:2rem}.add-note{display:flex;align-items:center;width:70vh;background-color:bisque;justify-content:space-between;border-radius:10px;border:none;box-shadow:1px 1px 2px 1px bisque}.add-note h2{margin-left:30px}.add-note button{margin-right:30px}.plus-btn{width:auto;height:auto;background:none;border:none;padding:0;margin:0 0 0 10px;cursor:pointer}.plus-btn:active{background-color:#fff;box-shadow:1px 1px 20px 10px #fff}.plus-btn img{width:20px;height:auto}.existing-notes{display:flex;flex-wrap:wrap;row-gap:1px;column-gap:30px}.note{display:flex;flex-direction:column;width:450px;height:200px;background-color:#fff;border:none;border-radius:10px;box-shadow:1px 1px 2px 1px #fff;margin-top:3rem;padding-bottom:1rem}.note h3{margin-top:30px;margin-left:30px}.note p{margin-top:0;margin-left:30px;margin-right:30px}.note button{width:20%;height:2rem;border:none;border-radius:10px;margin-top:10px;cursor:pointer;font-family:Arial,Helvetica,sans-serif;font-size:.8rem;font-weight:700;transition:opacity .2s}.note button:active{opacity:.5}.note button:nth-child(1){background-color:#73ff3c}.note button:nth-child(2){background-color:#ff3636}.add-note-details{flex-direction:column;background-color:gray;width:40%;min-height:25vh;max-height:100vh;border-radius:10px;position:absolute;left:30rem;top:8rem;align-items:center;display:flex;padding-bottom:20px}.add-note-details .note-content{background-color:#fffefe;border:none;border-radius:10px;margin:10px;height:20rem;width:95%}.add-note-details .note-title{background-color:#fffefe;border-radius:10px;border:none;margin:10px;height:40px;width:95%}.add-note-button{width:7rem;min-width:7rem;max-width:7rem;height:2.5rem;border:none;border-radius:10px;margin-top:10px;cursor:pointer;font-family:Arial,Helvetica,sans-serif;font-size:.95rem;font-weight:700;transition:opacity .2s;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.add-note-button:active{opacity:.4}.add-note-button:nth-child(1){background-color:#ff3636}.add-note-button:nth-child(2){background-color:#73ff3c}.buttons{width:70%;display:flex;justify-content:space-around}.btn{display:flex;justify-content:flex-end;gap:20px;margin-bottom:1rem;margin-right:20px}.btn button{width:5rem}.btn button:nth-child(1){background-color:#4f9e4f}@media (max-width: 1366px) and (min-width: 750px){.add-note{min-width:80vw;max-width:900px;margin-left:auto;margin-right:auto;font-size:1.2rem}.existing-notes{column-gap:2rem;row-gap:2rem;justify-content:center;width:90vw;max-width:1100px;margin-left:auto;margin-right:auto}.note{width:350px;min-height:220px;margin-top:2rem;margin-bottom:2rem;padding-bottom:2rem;font-size:1rem}.add-note-details{width:70vw;min-width:320px;max-width:600px;left:50%;transform:translate(-50%);top:10vh;padding:2rem 1rem}.add-note-details .note-content{width:95%;font-size:1rem;height:300px}.add-note-details .note-title{width:95%;font-size:1rem;height:40px}.btn{gap:16px;margin-bottom:1.5rem;margin-right:1.5rem}.btn button{width:5rem;font-size:1rem}.add-note-button{width:auto}}@media (min-width: 300px) and (max-width: 750px){.add-note{max-width:220px;min-width:150px;font-size:1rem;flex-direction:row;align-items:center}.add-note h2{font-size:1.1rem;margin-left:1rem}.add-note button{margin-right:1rem}.existing-notes{flex-direction:column;gap:1rem}.note{max-width:220px;min-width:150px;min-height:140px;margin-top:1rem;margin-bottom:1.5rem;padding:1rem .5rem 2rem;font-size:.95rem;margin-right:1rem}.note h3{font-size:1rem;margin-left:.5rem;margin-top:.5rem}.note p{font-size:.9rem;margin-left:.5rem;margin-right:.5rem}.add-note-details{width:70vw;min-width:260px;max-width:99vw;left:50%;transform:translate(-50%);top:8vh;padding:.5rem .2rem}.add-note-details .note-content,.add-note-details .note-title{width:95vw;font-size:.95rem;margin:5px 0;padding:.3rem}.btn{gap:8px;margin-bottom:1rem;margin-right:.5rem}.btn button{width:4rem;font-size:.85rem}}@media (max-width: 480px){.add-note-details{width:80vw;min-width:180px;max-width:99vw;left:50%;transform:translate(-50%);padding:.5rem .2rem}.add-note-details .note-title{width:74vw;font-size:.85rem;margin:4px 0;min-height:60px;max-height:120px}.add-note-details .note-content{width:74vw;font-size:.85rem;margin:4px 0;min-height:60px;height:200px;max-height:200px}.buttons{width:80vw;flex-direction:row;align-items:center;justify-content:center;gap:20px}.add-note-button{width:5rem;min-width:5rem;max-width:5rem;height:2rem;font-size:.8rem;margin-top:6px;padding:.2rem .5rem}}