@import url("https://fonts.googleapis.com/css2?family=Open+Sans&display=swap");@import url("https://fonts.googleapis.com/css2?family=Open+Sans&family=Roboto:wght@700&display=swap");@import url("https://fonts.googleapis.com/css2?family=Open+Sans&family=Poppins:wght@400&family=Roboto:wght@500&display=swap");@import url("https://fonts.googleapis.com/css2?family=Cookie&family=Parisienne&display=swap");*,h1,h2,h3,h4,h5,h6,p{margin:0;padding:0;box-sizing:border-box}a{text-decoration:none}ul{list-style:none;list-style-type:none}.unselectable{-o-user-select:none;user-select:none}body::-webkit-scrollbar{width:3px}body::-webkit-scrollbar-track{background:black}body::-webkit-scrollbar-thumb{background-image:linear-gradient(to top, red, orange)}body{width:100%;background:#eee}body header{grid-area:header;overflow:hidden;display:flex;justify-content:center;align-items:center;object-fit:cover}body header nav{width:100%;padding:20px 50px;display:flex;justify-content:space-between;align-items:center;color:#111;font-family:Poppins, 'Open Sans';z-index:2}body header nav .nav-logo{cursor:pointer;display:flex;align-items:center;z-index:10}body header nav .nav-logo span{font-size:1.4rem;font-weight:600}body header nav .nav-logo .logo-icon{height:100%;width:100%;padding-right:10px;object-fit:cover;overflow:hidden}body header nav .nav-logo .logo-icon img{width:40px;height:40px;opacity:1}body header nav .nav-items a{text-decoration:none;color:#333}body header nav .nav-items a:hover{color:#000;text-decoration:underline}body header nav .nav-items ul{display:flex;list-style:none;list-style-type:none}body header nav .nav-items ul li{margin:0 10px;cursor:pointer}body main{height:auto;width:100%;padding:50px;display:grid;grid-template-columns:1fr}body main h1{font-size:3rem;margin-bottom:50px;font-family:Roboto, sans-serif;color:#222}body main .container{width:100%;height:auto;display:grid;grid-template-columns:repeat(4, 1fr);justify-items:center;grid-gap:10px}body main .container .card{width:250px;height:auto;padding:10px;border-radius:10px;font-family:Poppins, 'Open-sans';background:#ffc3c3;box-shadow:0 0 10px #aaa;display:grid;grid-template-columns:1fr;grid-template-areas:"head" "book-cover" "info"}body main .container .card #book-title{grid-area:head;font-size:1.5rem;text-align:center;color:#a10404;padding:10px 0 20px 0}body main .container .card .book-cover-img{grid-area:book-cover;justify-self:center;padding:5px;width:140px;height:auto;margin-bottom:30px;box-shadow:0 5px 10px #803b3b;background:#fff}body main .container .card .book-cover-img img{width:100%;height:100%}body main .container .card .info{grid-area:info;display:flex;flex-direction:column;gap:10px;padding-bottom:20px}body main .container .card .info span{color:#9e0000;font-weight:600}body main .container .card .info span p{font-weight:500;color:#222}body footer{width:100%;font-family:Roboto, sans-serif;color:#eee}body footer .footer-container{width:100%;height:auto;padding:10px;background:#222;display:grid;grid-template-columns:1fr 1fr 1fr;grid-template-areas:'navigation info social-feeds'}body footer .footer-container .footer-content ul{padding:20px 0;display:flex;flex-direction:column;align-items:center;list-style-type:none;list-style:none}body footer .footer-container .footer-content ul li{margin:10px 0;cursor:pointer;color:#aaa}body footer .footer-container .footer-content ul li:hover{color:#ddd}body footer .footer-container .navigation{grid-area:navigation}body footer .footer-container .info{grid-area:info}body footer .footer-container .social-feeds{grid-area:social-feeds}body footer .footer-container .social-feeds ul li{font-size:2rem;color:#ccc}body footer .footer-container .social-feeds ul li:hover{color:#eee}body footer .copywrite{width:100%;padding:0 50px;background:#111}body footer .copywrite ul{display:flex;justify-content:space-between;list-style:none;list-style-type:none;padding:20px 10px;word-spacing:2px;font-family:sans-serif;font-size:.8rem}body footer a{color:#aaa;text-decoration:none}body footer a:hover{color:#fff}@keyframes fadeUp{0%{opacity:0;transform:translateY(10px)}100%{opacity:1;transform:translateY(0)}}@media (max-width: 1110px){body main .container{grid-template-columns:repeat(3, 1fr)}body main .container .card{margin-bottom:30px}}@media (max-width: 870px){body main{padding:50px 20px}body main .container{grid-template-columns:repeat(2, 1fr)}body main .container .card{width:100%}}@media (max-width: 800px){body main{padding:50px 30px}body footer .footer-container{grid-template-columns:1fr 1fr;grid-template-areas:'navigation info' 'social-feeds social-feeds'}body footer .footer-container .social-feeds{padding:20px;width:100%}body footer .footer-container .social-feeds ul{display:flex;flex-direction:row;justify-content:space-evenly}}@media (max-width: 600px){body header nav{padding:20px}body header nav .nav-items{display:none}body footer .footer-container{grid-template-columns:1fr;grid-template-areas:'navigation' 'info' 'social-feeds'}body footer .copywrite{padding:15px 10px}body footer .copywrite ul li:nth-child(even){text-align:end}}@media (max-width: 500px){body main{display:flex;flex-direction:column;align-items:center;padding:30px 10px 50px 10px}body main .container{justify-content:center;grid-template-columns:1fr}body main .container .card{padding:10px 20px}}