:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box;transition:all .4s}body{margin:0}.app{--app-bg: rgb(252, 236, 220);--font1: rgb(252, 231, 156);--font2: rgb(59, 37, 11);--font3: rgb(236, 220, 201);--cat1: rgb(222, 219, 207);--cat2: rgb(201, 198, 187);--cat3: rgb(244, 207, 168);--cat4: rgb(229, 190, 149);background-color:var(--app-bg);padding:0;font-size:1.1rem;min-height:100vh}.app header{position:relative}.app header h1{position:absolute;font-size:3.3rem;color:var(--font1);-webkit-text-stroke:2px var(--font2);top:0;width:100%;text-align:center;margin:0}.app header nav{position:absolute;bottom:0;padding-left:.5em;padding-bottom:.5em;display:flex;gap:.75em}.app header nav button{color:var(--font2);background-color:var(--font1);border:none;box-shadow:0 0 .3em var(--font2)}.app header nav button:disabled{background-color:var(--font3)}.app header nav button:hover:not(:disabled){box-shadow:0 0 1em var(--font3)}.app header nav .star{opacity:1}.app button{font-size:1rem}.app button:hover{cursor:pointer}.app nav{display:flex;gap:.4em}.app nav button{padding:.3em .7em}.app .hero{overflow:hidden;height:14em}.app .hero img{width:100%;height:100%;object-fit:cover;object-position:center 35%}.app main{padding:1em}.app main h2{margin:0;color:var(--font2)}.catalog{padding:1em 0}.catalog .book{margin:.1em 0;padding:0 .3em;background-color:var(--cat1)}.catalog .book:hover{background-color:var(--cat2)}.catalog .book:hover .star:not(.selected){opacity:.65}.catalog .book:nth-child(2n){background-color:var(--cat3)}.catalog .book:nth-child(2n):hover{background-color:var(--cat4)}.star{margin:0 .2em;display:inline-block;opacity:0;font-size:1.2em;transition:all .4s}.star.selected{opacity:1}.star:hover{cursor:pointer;animation:heart-throb .35s}@keyframes heart-throb{0%{transform:scale(1)}50%{transform:scale(1.4)}to{transform:scale(1)}}.favorites ol{margin-right:3em}.favorites .book{padding:.2em .6em;background-color:var(--cat1)}.favorites .book:hover{background-color:var(--cat2)}.favorites .book:nth-child(2n){background-color:var(--cat3)}.favorites .book:nth-child(2n):hover{background-color:var(--cat4)}.form{display:flex;flex-direction:column;max-width:20em;padding-top:1em}.form label,.form input,.form button{font-size:1em}.form label{font-weight:700}.form input{margin-bottom:.3em}.form button{padding:.4em 1.2em}