body{
margin:0;
background:black;
color:white;
font-family:'Cinzel',serif;
text-align:center;
}

.page{
display:none;
min-height:100vh;
}

.active{
display:block;
animation:fade 1s;
}

@keyframes fade{
from{opacity:0}
to{opacity:1}
}

/* background */

.home-bg{
position:fixed;
width:100%;
height:100%;
background:url('https://i.imgur.com/Ct6I2B4.jpeg') center/cover;
filter:brightness(0.35);
z-index:-1;
}

/* gold light */

#goldLight{
width:120px;
height:120px;
background:radial-gradient(circle,gold,transparent);
border-radius:50%;
margin:80px auto;
cursor:pointer;
animation:pulse 2s infinite;
}

@keyframes pulse{
0%{transform:scale(1)}
50%{transform:scale(1.1)}
100%{transform:scale(1)}
}

/* books */

.books{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:40px;
padding:40px;
}

.book{
background:#111;
padding:20px;
border-radius:12px;
box-shadow:0 0 25px rgba(255,215,0,0.35);
}

.book img{
width:200px;
border-radius:10px;
}

/* detail */

.book-detail{
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:40px;
padding:40px;
}

.book-detail img{
width:250px;
border-radius:12px;
}

/* buttons */

button{
background:gold;
border:none;
padding:12px 20px;
margin:8px;
cursor:pointer;
border-radius:8px;
font-weight:bold;
}

button:hover{
background:white;
}

/* cart */

#cartIcon{
position:fixed;
top:20px;
right:25px;
width:55px;
height:55px;
background:#111;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-size:22px;
cursor:pointer;
box-shadow:0 0 18px gold;
z-index:999;
}

#cartCount{
position:absolute;
top:-5px;
right:-5px;
background:red;
padding:3px 7px;
border-radius:50%;
font-size:12px;
}

/* footer */

.footer{
margin-top:80px;
opacity:0.8;
}

.footer-links{
margin-top:8px;
display:flex;
gap:20px;
justify-content:center;
font-size:14px;
}

.footer-links a{
color:white;
text-decoration:none;
}

.footer-links a:hover{
color:gold;
}

/* info page */

.info-text{
max-width:800px;
margin:auto;
padding:30px;
line-height:1.7;
}

/* responsive */

@media(max-width:768px){

.book-detail{
flex-direction:column;
}

.book img{
width:160px;
}

}