@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,700;1,400;1,700&display=swap'); :root { font-family: 'Roboto', sans-serif; } html, body { background-image: url("bg-library-public-domain.jpeg"); background-size: cover; background-repeat: no-repeat; color: #fff; min-height: 100dvh; } header { width: 100%; background-color: #0a0a0ac0; padding: 20px 40px; box-sizing: border-box; text-align: center; h1 { font-size: 2.5rem; font-weight: bold; } } #books { display: grid; grid-template-columns: repeat(auto-fit, minmax(max(20%, 270px), 1fr)); gap: 20px; padding: 20px; .book { background-color: #1d1d1dcc; padding: 30px; border-radius: 20px; font-size: 1.3rem; text-align: center; display: flex; flex-direction: row; .book-details { margin: auto; } .book-actions { display: flex; flex-direction: column; gap: 8px; justify-content: flex-end; i { display: block; font-size: 1.2rem; cursor: pointer; transition: color ease-in-out 0.2s; position: relative; } i::after { position: absolute; right: 25px; opacity: 0; font-family: "Roboto", system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; font-weight: normal; background-color: #00000090; backdrop-filter: blur(8px); top: -5px; padding: 4px 8px; border-radius: 10px; transition: 0.2s opacity ease-in-out, 0.2s z-index ease-in-out; width: max-content; z-index: -2; } i:hover::after { opacity: 1; z-index: 2; } .fa-book:hover { color: rgb(168, 221, 68); } .fa-book::after { content: "toggle read"; } .fa-edit:hover { color: rgb(219, 175, 30); } .fa-edit::after { content: "edit"; } .fa-trash:hover { color: rgb(220, 85, 85); } .fa-trash::after { content: "remove"; } } } }