body{
    font-family: Arial, sans-serif;
    margin:0;
    background:linear-gradient(135deg,#dfedc8,#e6e6e6);
    padding-top: 70px;
}

.gallery-page{
    background:linear-gradient(135deg,#edc8c8,#e6e6e6);
}

/*.home-page{
    background: linear-gradient(135deg,#c8e8ff,#f5e1ff);
}*/

.home-page{
    background-image: url("eh/3.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

nav{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;

    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;

    background: rgb(66, 62, 62,0.7);
    backdrop-filter: blur(10px);

    padding: 15px 0;
    z-index: 1000;
}

nav a{
    color:rgb(242, 238, 238);
    text-decoration:none;
    margin:0 20px;
    font-size:18px;
    opacity:0.8;
    transition:0.2s;
}

nav a:hover{
    opacity:1;
}

/* PAGE CONTENT */
.container{
    padding:40px;
}

/* COLLAGE */
.collage{
    position:relative;
    width:100%;
    height:900px;
}

/* image styling */

.collage img{
    position:absolute;
    width:19vw;
    max-width:340px;
    min-width:220px;
    border-radius:14px;
    box-shadow:0 12px 30px rgba(0,0,0,0.25);
    transition:0.3s;
}

/* hover effect */
.collage img:hover{
    transform:scale(1.08) rotate(0deg);
    z-index:10;
}

/* spread positions */

.img1{top:60px; left:80px; transform:rotate(-8deg);}
.img2{top:10px; left:400px; transform:rotate(4deg);}
.img3{top:20px; left:780px; transform:rotate(-4deg);}

.img4{top:320px; left:120px; transform:rotate(0deg);}
.img5{top:180px; left:450px; transform:rotate(-8deg);}
.img6{top:350px; left:1050px; transform:rotate(5deg);}

.img7{top:580px; left:60px; transform:rotate(-7deg);}
.img8{top:600px; left:400px; transform:rotate(8deg);}
.img9{top:600px; left:760px; transform:rotate(-5deg);}

.img10{top:120px; left:1120px; transform:rotate(12deg);}
.img11{top:620px; left:1080px; transform:rotate(-2deg);}

.side-text{
    position:absolute;

    left:1270px;
    top:50%;

    transform:translateY(-50%) rotate(90deg);

    font-size:38px;
    letter-spacing:4px;
    white-space:nowrap;
}

.side-text2{
    position:absolute;

    left:1170px;
    top:5%;


    font-size:38px;
    letter-spacing:4px;
    white-space:nowrap;
}

.about-collage{
    position:relative;
    width:100%;
    height:900px;
}

.about-collage img{
    position:absolute;
    width:15vw;
    max-width:340px;
    min-width:220px;
    border-radius:14px;
    box-shadow:0 12px 30px rgba(0,0,0,0.25);
    transition:0.3s;
}

/* positions */

.a1{top:60px; left:80px; transform:rotate(-8deg);}
.a22{top:10px; left:400px; transform:rotate(4deg);}
.a3{top:20px; left:780px; transform:rotate(-4deg);}

.a4{top:320px; left:1320px; transform:rotate(0deg);}
.a5{top:180px; left:450px; transform:rotate(-8deg);}
.a6{top:350px; left:1050px; transform:rotate(5deg);}

.a7{top:80px; left:1360px; transform:rotate(-7deg);}
.a8{top:600px; left:380px; transform:rotate(8deg);}
.a9{top:600px; left:1500px; transform:rotate(-5deg);}

.a10{top:120px; left:1120px; transform:rotate(12deg);}
.a11{top:480px; left:80px; transform:rotate(-2deg);}
.a12{top:620px; left:980px; transform:rotate(-2deg);}
.a13{top:620px; left:680px; transform:rotate(-2deg);}
.a14{top:380px; left:300px; transform:rotate(-2deg);}
.a15{top:400px; left:780px; transform:rotate(-2deg);}
.a16{top:820px; left:1080px; transform:rotate(-2deg);}

/* LIGHTBOX */

#lightbox{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.9);
    display:none;
    align-items:center;
    justify-content:center;
    z-index:1000;
}

#lightbox img{
    max-width:90%;
    max-height:90%;
    border-radius:10px;
}

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

/* center container */

.center-box{
    height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
}

/* birthday button */

#playBtn{
    padding:18px 40px;
    font-size:24px;

    background:linear-gradient(135deg,#b0ff6b,#6fd03b);
    color:white;

    border:none;
    border-radius:40px;

    cursor:pointer;

    box-shadow:0 10px 25px rgba(0,0,0,0.25);

    transition:all 0.25s ease;
}

#playBtn:hover{
    transform:scale(1.08);
    box-shadow:0 15px 35px rgba(0,0,0,0.35);
}

.hero-text{
    position:relative;
    height:100vh;
    width:100%;
}

.top-text{
    position:absolute;
    top:80px;
    left:50%;
    transform:translateX(-50%);
    text-align:center;
    width:80%;
}
.bottom-text{
    position:absolute;
    bottom:120px;
    left:50%;
    transform:translateX(-50%);
    text-align:center;
    width:80%;
}

#playBtn{
    position:absolute;
    top:50%;
    left:40%;
}