body{

margin:0;
background:black;
color:white;
font-family:Tahoma;
text-align:center;
overflow-x:hidden;

}

/* دائرة سحرية */

body::before{

content:"";
position:fixed;

width:600px;
height:600px;

background:url("https://upload.wikimedia.org/wikipedia/commons/3/3c/Magic_circle_cc0.png");

background-size:contain;
background-repeat:no-repeat;

opacity:0.15;

top:50%;
left:50%;

transform:translate(-50%,-50%);

animation:spin 40s linear infinite;

z-index:-2;

}

@keyframes spin{

from{transform:translate(-50%,-50%) rotate(0deg);}
to{transform:translate(-50%,-50%) rotate(360deg);}

}

/* دخان */

.smoke{

position:fixed;
width:100%;
height:100%;

background:url("https://i.imgur.com/7b1Yw8B.png");

opacity:0.12;

animation:smoke 60s linear infinite;

z-index:-1;

}

@keyframes smoke{

0%{transform:translateY(0);}
100%{transform:translateY(-1000px);}

}

header{

padding:40px;

}

h1{

font-size:45px;
color:#b300ff;
text-shadow:0 0 20px purple;

}

.books{

display:flex;
flex-wrap:wrap;
justify-content:center;
gap:30px;
padding:40px;

}

.book{

background:#111;
width:220px;
padding:15px;
border-radius:10px;

box-shadow:0 0 10px purple;

transition:0.4s;

}

.book:hover{

transform:scale(1.08);
box-shadow:0 0 25px red;

}

.book img{

width:100%;
height:280px;
object-fit:cover;

border-radius:6px;

}

button{

background:#7a00cc;
color:white;
border:none;

padding:10px;

margin-top:10px;

cursor:pointer;

border-radius:6px;

}

button:hover{

background:red;

}

footer{

margin-top:40px;
color:gray;

}