:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#root{max-width:1280px;margin:0 auto;padding:2rem;text-align:center}body{background-image:url(/assets/pexels-pixabay-209831-By5CwTMt.jpg);background-size:cover;background-position:center;background-repeat:no-repeat;background-attachment:fixed;height:100vh;margin:0;align-items:center;justify-content:center}menu{width:100%;height:10%;background-color:#4645458a;position:fixed;top:0;left:0;z-index:1000;margin:0;padding:0;display:flex;align-items:center}.name{padding:10px 20px;color:#f8f9fa;font-style:normal;font-weight:700;font-size:2rem;text-transform:uppercase;font-family:Poppins,sans-serif;text-shadow:2px 2px 6px rgba(0,0,0,.6);background:linear-gradient(135deg,#152a51,#2a5298);border-radius:8px;display:inline-block;margin-left:10px}a{text-decoration:none;color:#fff;padding:10px 20px;border-radius:25px;display:inline-block;transition:all .3s ease-in-out}a:hover{color:#000}.book-container{width:400px;height:250px;background-color:#000000ab;position:absolute;top:35%;left:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;border-radius:15px}.input1{width:300px;padding:10px;margin-top:30px;border-radius:15px;background-color:#ffffff70;border:0 solid rgba(255,255,255,.441);font-size:20px;color:#fff}.book-title{margin-right:230px;color:#0ff}.book-title2{margin-right:260px}.add-button{width:200px;height:50px;background-color:#828181;color:#fff;padding:15px 30px;border:none;border-radius:5px;font-size:16px;font-weight:700;cursor:pointer;transition:all .5s ease;box-shadow:0 4px 6px #0000001a;margin-top:30px}.add-button:hover{transform:scale(1.1);box-shadow:0 8px 15px #000;background-color:#000}.notes-container{display:flex;flex-wrap:wrap;gap:35px;justify-content:center;align-items:center;padding:20px;top:90%;position:relative;gap:50px;margin-top:400px}.note-container{width:400px;height:400px;border-radius:15px;background-color:#595858c4;align-items:center;justify-content:flext-start;gap:20px;transition:all .5s ease}.note-container:hover{transform:scale(1.1);box-shadow:0 8px 15px #000;background-color:#000;color:#fff}.note-container:hover .delete-button{background-color:#fff;color:#000}.delete-button{width:150px;height:30px;background-color:#000;color:#fff;border:0 solid black;border-radius:5px;transition:all .5s ease;font-size:20px}.delete-button:hover{background-color:#000;color:#fff;transform:scale(1.1);box-shadow:0 8px 15px #000}