:root{--text:#6b6375;--text-h:#08060d;--bg:#fff;--border:#5d1ae2;--code-bg:#f4f3ec;--accent:#aa3bff;--accent-bg:#edddf8d6;--accent-border:#aa3bff80;--social-bg:#f4f3ec80;--shadow:#0000001a 0 10px 15px -3px, #0000000d 0 4px 6px -2px;--sans:system-ui, "Segoe UI", Roboto, sans-serif;--heading:system-ui, "Segoe UI", Roboto, sans-serif;--mono:ui-monospace, Consolas, monospace;font-family:var(--sans);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*,:before,:after{box-sizing:border-box;margin:0;padding:0}#root{box-sizing:border-box;text-align:center;background-image:url(/react_assignments/week14/exercise14/assets/pexels-olenkabohovyk-3646105-DC3roQwX.jpg);background-attachment:no-repeat;background-position:top;background-size:cover;flex-direction:column;min-height:100svh;margin:0 auto;display:flex}body{background:#fff}h1,h2,h3,h4{text-transform:uppercase}h1{font-size:620%;font-weight:800}a{color:#4b566e;font-weight:700}a:hover{color:#ebc831;background-color:#000;text-decoration:none}.header-div{background:#3271eb;width:100%}.header{text-align:left;width:1024px;height:auto;margin:auto;line-height:3.5rem}.navbar-div{z-index:1000;background:#3271eb;width:100%;margin:2rem auto 0;position:sticky;top:0}.navbar{text-align:left;flex-direction:row;justify-content:space-between;gap:3rem;width:1024px;height:auto;margin:auto;padding:0 1rem;display:flex}.navbar h3{color:#fff;font-size:200%;font-weight:800;line-height:auto;background:#000}.navbar__brand{color:#fff;background-color:#000;align-self:center;width:100%}.navbar__brand h4{font-size:200%;font-weight:800}.navbar__links{text-wrap:nowrap;gap:1.5rem;display:flex}.navbar a{color:#000;text-transform:uppercase;background-color:#f5a033;padding:1rem;text-decoration:none}.navbar a:hover{color:#ebc831;filter:drop-shadow(0 0 10px #f5a033);background-color:#000}.book-list{text-align:left;grid-template-rows:repeat(6,auto);grid-template-columns:repeat(1,auto);gap:1rem;max-width:1024px;margin:auto;padding:2rem 1rem;display:grid}.book-card{width:800px;max-height:auto;background:#ffffffe6;border:.25rem solid #190601;border-radius:5px;flex-direction:row;margin:auto;padding:1rem;display:flex}.book-card h3{color:#fff;font-size:180%;font-weight:800;line-height:auto;background:#000}.book-image{filter:drop-shadow(10px 10px 4px #f5a033);flex-grow:1;max-width:200px;max-height:300px;margin:auto}.book-featured{writing-mode:vertical-rl;text-transform:uppercase;background-color:#f56333;border-radius:8px;padding:6rem .3rem;font-size:1.2rem;font-weight:600;display:block}.book-card-flex{flex-direction:column;flex-grow:1;align-content:space-between;gap:.5rem;margin:0 1rem 0 2rem;display:flex}.book-card-flex p:nth-child(2){font-style:italic}.book-card__buttons{justify-content:space-around;display:flex}.book-card__description-button{color:#fff;cursor:pointer;background-color:#f5a033;border:none;border-radius:.5rem;width:200px;padding:.3rem;font-weight:800}.book-card__description-button:hover{background-color:#3271eb}.book-card__status-button{color:#fff;cursor:pointer;background-color:#f5a033;border:none;border-radius:.5rem;width:200px;padding:.3rem;font-weight:800}.book-card__status-button:hover{background-color:#3271eb}.book-card__status{font-weight:700}.about-div{width:800px;max-height:auto;text-align:left;background:#ffffffe6;border:.25rem solid #190601;border-radius:5px;flex-direction:column;gap:1rem;margin:2rem auto;padding:1rem;display:flex}.about-div img{width:auto}.about p{margin:.5rem auto}.footer-div{background:#4b566ecc;width:100%}.footer{text-align:left;color:#f5a033;width:1024px;margin:auto;padding:1rem}@media (width<=700px){h1{font-size:15vw;font-weight:800}.header{width:auto}.navbar{flex-direction:column;gap:1rem;width:auto}.navbar__links{flex-direction:column;gap:1rem;margin-bottom:1rem}.book-card{flex-direction:column;width:100%}.book-card-flex{gap:.5rem;width:100%;margin:1rem auto 0}.book-card__buttons{flex-direction:column;gap:.5rem;margin:auto;display:flex}.book-featured{writing-mode:horizontal-tb;text-align:center;margin-top:1rem;padding:.2rem}.about-div{width:100%}.footer{width:auto}}