@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600&family=Cormorant+Garamond:wght@300;400;600&display=swap');

*{
box-sizing:border-box;
}

body{
margin:0;
color:#ddd6c8;
font-family:'Cormorant Garamond', serif;

```
background-color:#050505;

background-image:
linear-gradient(rgba(0,0,0,.7),rgba(0,0,0,.7)),
url("https://electricelegy.neocities.org/Parlour.jpeg");

background-attachment:fixed;
```

}

#container{
width:1100px;
margin:auto;
display:grid;
grid-template-columns:220px 1fr 220px;
gap:20px;
padding:25px;
}

header{
grid-column:1/4;

```
background:
linear-gradient(
    to bottom,
    #3d0000,
    #120000
);

border:2px solid #4d1e26;

text-align:center;
padding:20px;

box-shadow:
0 0 25px rgba(90,0,0,1);
```

}

header h1{
margin:0;

```
font-family:'Cinzel', serif;
font-size:3.2rem;

color:#4d1e26;

letter-spacing:4px;

text-shadow:
0 0 10px #450000,
0 0 20px #450000;
```

}

marquee{
color:#b08d57;
margin-top:10px;
}

.box{
background:
linear-gradient(
to bottom,
#171717,
#0b0b0b
);

```
border:1px solid #5c0a0a;

padding:15px;
margin-bottom:15px;

box-shadow:
inset 0 0 10px rgba(120,0,0,.25),
0 0 15px rgba(60,0,0,.4);
```

}

.box h2,
.box h3{
font-family:'Cinzel', serif;

```
color:#d6b98c;

border-bottom:1px solid #5c0a0a;

padding-bottom:5px;
```

}

main{
min-height:700px;
}

.profile{
width:170px;

```
float:right;

margin-left:15px;

border:2px solid #5c0a0a;

filter:
contrast(1.1)
saturate(.8);
```

}

a{
color:#b08d57;
text-decoration:none;
}

a:hover{
color:#e2c89d;

```
text-shadow:
0 0 8px rgba(176,141,87,.7);
```

}

ul{
padding-left:20px;
}

li{
margin-bottom:5px;
}

footer{
text-align:center;

```
color:#8f7a5b;

padding:20px;

font-style:italic;
```

}

img{
max-width:100%;
}

.box img{
border:1px solid #330000;
}

::-webkit-scrollbar{
width:12px;
}

::-webkit-scrollbar-track{
background:#0b0b0b;
}

::-webkit-scrollbar-thumb{
background:#5c0a0a;
}

::-webkit-scrollbar-thumb:hover{
  background:#5c0a0a;
}

body::before{
content:"✦";

```
position:fixed;

top:25px;
left:25px;

color:#5c0a0a;

font-size:2rem;
```

}

body::after{
content:"✦";

```
position:fixed;

bottom:25px;
right:25px;

color:#5c0a0a;

font-size:2rem;
```

}

@media(max-width:1100px){

```
#container{
    width:95%;
    grid-template-columns:1fr;
}

header{
    grid-column:auto;
}
```

}

.gallery-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.gallery-grid img {
    width: 120px;
    height: 120px;
    object-fit: cover;
    cursor: pointer;
    border: 2px solid #5c0a0a;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    background-color: black;
}

.gallery-grid img:hover {
    transform: scale(1.05);
    box-shadow: 0 0 15px rgba(120, 0, 0, 0.8);
}

#lightbox {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    background: rgba(0, 0, 0, 0.95);

    justify-content: center;
    align-items: center;

    z-index: 9999;
}

#lightbox-img {
    max-width: 85%;
    max-height: 85%;

    border: 3px solid #5c0a0a;

    box-shadow: 0 0 30px rgba(120, 0, 0, 0.8);
}

#close-btn {
    position: absolute;

    top: 20px;
    right: 30px;

    color: #d6b98c;

    font-size: 40px;

    cursor: pointer;
}

.gallery-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.gallery-grid img {
    width: 120px;
    height: 120px;
    object-fit: cover;
    cursor: pointer;
    border: 2px solid #5c0a0a;
}

#lightbox {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.95);
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

#lightbox-img {
    max-width: 90%;
    max-height: 90%;
    border: 3px solid #5c0a0a;
}

#close-btn {
    position: absolute;
    top: 20px;
    right: 30px;
    color: white;
    font-size: 40px;
    cursor: pointer;
}

/* =========================
   BOOK PAGE FIX
========================= */

.book-counter {
    text-align:center;
}

.book-archive {
    padding:20px;
}


/* keeps your original shelf rows */
.book-row {
        display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    align-items: start;

    padding:16px;
    margin-bottom:18px;

    background:
    linear-gradient(
        to bottom,
        #1b1b1b,
        #0b0b0b
    );

    border:1px solid #5c0a0a;

    box-shadow:
        inset 0 -10px 0 #2a1a1a,
        0 0 12px rgba(0,0,0,.4);
}


/* books */
.book {
    width:110px;
    flex-shrink:0;

    padding:10px;

    background:
    linear-gradient(
        to bottom,
        #1a1a1a,
        #0e0e0e
    );

    border:1px solid #3a0a0a;

    color:#b08d57;

    text-align:center;

    box-shadow:
    0 2px 8px rgba(0,0,0,.6);
}


.book img {
    width:100px;
    height:150px;

    object-fit:cover;

    display:block;
    margin:auto;
    margin-bottom:8px;
}


.book span {
    display:block;
}


.book:hover {
    transform:translateY(-4px);
    box-shadow:0 0 16px rgba(120,0,0,.6);
}

/* book rows stack vertically */

.book-archive {
    display:block;
}

.book-row {
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    gap:8px;

    width:104%;

    margin-bottom:18px;
}

.book {
    flex:0 0 120px;
}

body {
  cursor: url("cursor.cur"), auto;
}


.boxm {
    display:flex;
    gap:12px;

    padding:16px;
    margin-bottom:18px;

    background:
    linear-gradient(
        to bottom,
        #1b1b1b,
        #0b0b0b
    );

    border:1px solid #5c0a0a;

    box-shadow:
        inset 0 -10px 0 #2a1a1a,
        0 0 12px rgba(0,0,0,.4);
}

.archive-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(120px,1fr));
    gap:12px;
}

.archive-grid a{
    text-decoration:none;
    color:inherit;
    text-align:center;
}

.archive-grid img{
    width:100%;
    aspect-ratio:1/1;
    object-fit:cover;
    border:1px solid #666;
}

.archive-grid span{
    display:block;
    margin-top:4px;
    font-size:0.85em;
}


.rpinboard {
  column-count: 4;
  column-gap: 15px;
  width: 90%;
  margin: auto;
}

.rpinboard img {
  width: 100%;
  display: block;
  margin-bottom: 15px;
  border-radius: 10px;
  break-inside: avoid;
}
.pinboard {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    align-items: start;
}

.profile {
  width: 100%;
  display: block;
  margin-bottom: 10px;
  break-inside: avoid;
}

.navbox {
border:1px solid #330000
}

.navbox h3 {
    margin: 0 0 10px 0;
    text-align: center;
    border:1px solid #330000
}

.navlinks {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 15px;
}

.navlinks a {
    border:1px solid #330000
    text-decoration: none;
}

.navlinks a:hover {
    text-decoration: underline;
}

.poembox {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    align-items: start;
}

.box {
    break-inside: avoid;
    height: auto;
}