:root{
--white:#ffffff;
--pink:#ffd6e7;
--gold:#f6c453;
--emerald:#007f5f;
--magenta:#8b004b;
--black:#000;
}

body{
margin:0;
font-family:Arial, sans-serif;
background:linear-gradient(var(--white),var(--pink));
color:var(--black);
cursor:url("images/paw-cursor.png"),auto;
}

header{
background:var(--gold);
text-align:center;
padding:40px 20px;
border-bottom:6px solid var(--emerald);
}

.subtitle{
color:var(--magenta);
}

/* Slideshow */

.slideshow-container{
max-width:800px;
margin:auto;
border:5px solid var(--emerald);
border-radius:12px;
overflow:hidden;
}

.slide{display:none;width:100%}
.slide.active{display:block}

/* Gallery */

.gallery{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
gap:18px;
max-width:900px;
margin:auto;
}

.photo-card{position:relative}

.photo-card img{
width:100%;
border-radius:10px;
border:4px solid var(--emerald);
cursor:pointer;
}

.heart-btn{
position:absolute;
bottom:8px;
right:8px;
background:var(--pink);
border:none;
border-radius:20px;
padding:6px 10px;
cursor:pointer;
}

/* Lightbox */

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

.lightbox img{
max-width:90%;
max-height:90%;
border-radius:12px;
}

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

/* Guestbook */

.guestbook-section{
background:var(--white);
padding:50px 20px;
text-align:center;
}

#memory-form{
max-width:500px;
margin:auto;
display:flex;
flex-direction:column;
gap:12px;
}

#memory-form input,
#memory-form textarea{
padding:12px;
border:2px solid var(--emerald);
border-radius:6px;
font-size:16px;
}

#memory-form button{
background:var(--emerald);
color:white;
border:none;
padding:12px;
border-radius:6px;
font-weight:bold;
}

.memory{
background:var(--pink);
margin:20px auto;
padding:15px;
max-width:650px;
border-left:6px solid var(--gold);
border-radius:8px;
text-align:left;
}

.comment{
background:white;
margin-top:8px;
padding:8px;
border-radius:6px;
font-size:.9rem;
}

/* Footer */

footer{
background:var(--gold);
text-align:center;
padding:20px;
border-top:6px solid var(--emerald);
}

/* Mobile */

@media(max-width:768px){
header h1{font-size:1.5rem}
}