#interactive.viewport { position: relative; width: 100%; height: 400px; overflow: hidden; border: 2px solid #000; background-color: #c0c0c0; } canvas.drawing, canvas.drawingBuffer { position: absolute; top: 0; left: 0; } #book-info { margin-top: 20px; font-family: 'Courier New', Courier, monospace; background-color: #f0f0f0; border: 1px solid #000; padding: 10px; } #prompt { display: none; margin-top: 20px; font-family: 'Courier New', Courier, monospace; background-color: #f0f0f0; border: 1px solid #000; padding: 10px; } #prompt-message { font-weight: bold; font-family: 'Courier New', Courier, monospace; color: #800000; } #book-title, #book-author, #book-desc { margin-top: 10px; font-size: 16px; font-family: 'Courier New', Courier, monospace; color: #800000; } body { font-family: 'Courier New', Courier, monospace; background-color: #ddd4b0; color: #000; margin: 0; padding: 0; } h1 { text-align: center; color: #800000; font-size: 24px; margin-top: 20px; } #search-bar { display: block; margin: 20px auto; width: 80%; padding: 10px; font-size: 16px; border: 2px solid #000; background-color: #f0f0f0; } table { width: 90%; margin: 20px auto; border-collapse: collapse; background-color: #fff; } th, td { border: 1px solid #000; padding: 10px; text-align: left; font-size: 14px; } th { background-color: #c0c0c0; cursor: pointer; } th:hover { background-color: #a0a0a0; } a { color: #800000; text-decoration: none; } a:hover { text-decoration: underline; } #book-table-body tr:nth-child(even) { background-color: #f0f0f0; } #book-table-body tr:nth-child(odd) { background-color: #e0e0e0; } #book-table-body tr:hover { background-color: #d0d0d0; } #book-info, #prompt, #book-title, #book-author, #book-desc, th, td, body { font-size: 18px; font-weight: bold; } #search-bar:focus { outline-color: #800000; outline-style: solid; outline-width: 2px; }