body {

margin:0;

padding:0;

background:
linear-gradient(
rgba(216,195,154,0.18),
rgba(243,239,231,0.92)
),
url("poetry-background.jpg");

background-size:cover;

background-position:center;

background-attachment:fixed;

color:#252525;

font-family:Georgia, "Times New Roman", serif;

}



.poetry-header {

text-align:center;

padding:100px 20px 70px;

position:relative;

}



.poetry-header h1 {

font-size:70px;

letter-spacing:12px;

margin-bottom:25px;

font-weight:normal;

text-transform:uppercase;

}


.poetry-header p {

max-width:600px;

margin:0 auto;

font-size:21px;

line-height:1.8;

color:#6b6258;

font-style:italic;

}




.poetry-wall {

max-width:1100px;

margin:50px auto;

position:relative;

display:flex;

justify-content:center;

gap:80px;

flex-wrap:wrap;

}




.rope {

position:absolute;

top:20px;

left:5%;

width:90%;

height:8px;

background:#b08d45;
border-radius:50%;

box-shadow:

0 5px 10px rgba(0,0,0,0.15);

}




.poem-card {

margin-top:90px;
width:300px;

min-height:380px;

background:

linear-gradient(
135deg,
rgba(255,255,255,0.95),
rgba(245,238,225,0.95)
);

padding:45px 35px;

box-shadow:

0 25px 50px rgba(0,0,0,0.18);

position:relative;

border-radius:2px;

transform:rotate(-3deg);

transition:0.4s ease;

}



.poem-card.second {

transform:rotate(5deg);

background:

linear-gradient(
135deg,
rgba(250,246,235,0.95),
rgba(235,228,214,0.95)
);

}



.poem-card:hover {

transform:

translateY(-18px)
rotate(0deg);

box-shadow:

0 35px 70px rgba(0,0,0,0.25);

}



.clip {

position:absolute;

top:-70px;

left:50%;

transform:translateX(-50%);

width:22px;

height:45px;

border:3px solid #777;

border-radius:50%;

background:transparent;

}


.clip::after {

content:"";

position:absolute;

top:40px;

left:50%;

transform:translateX(-50%);

height:35px;

width:2px;

background:#777;

}


.poem-card h2 {

font-size:28px;

line-height:1.3;

margin-bottom:25px;

}



.poem-card p {

font-size:17px;

line-height:1.8;

color:#444;

}



.poem-card a {

display:inline-block;

margin-top:20px;

font-size:15px;

letter-spacing:1px;

}



.poem-card h2 {

font-size:26px;

}



.poem-card p {

line-height:1.8;

}



.poem-card a {

color:#b08d45; 

text-decoration:none;

}




.poem-card:hover {

transform:translateY(-10px) rotate(0deg);

transition:0.4s;

}




footer {

margin-top:100px;

padding:40px;

text-align:center;

background:#16130e;

color:#e8e1d5;

}
.back-home {

display:inline-block;

margin-bottom:40px;

color:#b08d45;

text-decoration:none;

font-size:16px;

letter-spacing:1px;

}


.back-home:hover {

color:#252525;

}
.poem-meta {

font-size:14px;

line-height:1.6;

color:#b08d45;

font-style:italic;

margin-bottom:25px;

letter-spacing:0.5px;

}
.poem-card::before {

content:"ZKR";

position:absolute;

bottom:18px;

right:25px;

font-size:12px;

letter-spacing:3px;

color:rgba(139,115,85,0.5);

font-style:italic;

}
.poetry-header::after {

content:"";

display:block;

width:90px;

height:1px;

background:#b08d45;

margin:50px auto 0;

}
@media(max-width:700px){


.poetry-header {

padding:60px 20px 40px;

}


.poetry-header h1 {

font-size:42px;

letter-spacing:6px;

}



.rope {

left:10%;

width:80%;

}



.poem-card {

width:85%;

min-height:auto;

margin-left:auto;

margin-right:auto;

}



.poem-card.second {

transform:rotate(2deg);

}



.clip {

top:-65px;

}



}
.poetry-header::before {

content:"ZARA K. REED";

display:block;

font-size:14px;

letter-spacing:5px;

color:#b08d45;

margin-bottom:25px;

}