body{
    margin:0;
    font-family:'Segoe UI',sans-serif;
    background:linear-gradient(135deg,#ff9a9e,#fad0c4);
    overflow:hidden;
    text-align:center;
}

.name{
    margin-top:20px;
    font-size:40px;
    font-weight:bold;
    color:white;
    text-shadow:0 0 20px hotpink;
    animation:beat 1.5s infinite;
}

@keyframes beat{
    0%{transform:scale(1)}
    25%{transform:scale(1.05)}
    50%{transform:scale(1)}
    75%{transform:scale(1.08)}
}

table{
    margin:40px auto;
    border-spacing:20px;
}

td{
    width:200px;
    height:200px;
}

.photo-box{
    width:100%;
    height:100%;
    border-radius:20px;
    overflow:hidden;
    cursor:pointer;
    transition:.3s;
    box-shadow:0 10px 25px rgba(0,0,0,.3);
}

.photo-box img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.photo-box.active{
    box-shadow:0 0 40px 15px rgba(255,105,180,.9);
    transform:scale(1.05);
}

.love-text{
    position:fixed;
    bottom:40px;
    width:100%;
    font-size:24px;
    color:white;
    text-shadow:0 0 10px pink;
    animation:fade 2s;
}

@keyframes fade{
    from{opacity:0;transform:translateY(20px)}
    to{opacity:1;transform:translateY(0)}
}

.love{
    position:fixed;
    top:-10px;
    animation:fall linear infinite;
}

@keyframes fall{
    to{transform:translateY(110vh)}
}

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

.fullscreen img{
    max-width:90%;
    max-height:90%;
    border-radius:20px;
    box-shadow:0 0 50px hotpink;
}