body{
margin:0;
font-family:Arial;
color:white;
background:#05010a;
overflow-x:hidden;
}

/* ======================
   STAR BACKGROUND
====================== */

body::before{
content:"";
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
pointer-events:none;
z-index:0;

 background:
radial-gradient(2px 2px at 20% 30%, white, transparent),
radial-gradient(4px 4px at 40% 70%, white, transparent),
radial-gradient(6px 6px at 60% 20%, white, transparent),
radial-gradient(8px 8px at 80% 60%, white, transparent),
radial-gradient(10px 10px at 10% 80%, white, transparent),
radial-gradient(10px 10px at 90% 40%, white, transparent), 
radial-gradient(10px 10px at 10% 20%, white, transparent),
radial-gradient(10px 10px at 30% 40%, white, transparent), 
 radial-gradient(10px 10px at 50% 60%, white, transparent), 
 radial-gradient(10px 10px at 10% 20%, white, transparent),
radial-gradient(10px 10px at 30% 40%, white, transparent), 
 radial-gradient(10px 10px at 50% 60%, white, transparent),
radial-gradient(10px 10px at 70% 80%, white, transparent), 
 radial-gradient(10px 10px at 90% 100%, white, transparent),
radial-gradient(10px 10px at 5% 100%, white, transparent), 
 radial-gradient(10px 10px at 25% 100%, white, transparent),
radial-gradient(10px 10px at 70% 100%, white, transparent), 
 radial-gradient(10px 10px at 10% 80%, white, transparent),
radial-gradient(10px 10px at 5% 10%, white, transparent), 
radial-gradient(10px 10px at 10% 80%, white, transparent),
radial-gradient(10px 10px at 10% 30%, white, transparent), 
radial-gradient(10px 10px at 20% 40%, white, transparent),
radial-gradient(10px 10px at 95% 50%, white, transparent), 
radial-gradient(10px 10px at 30% 60%, white, transparent),
radial-gradient(10px 10px at 20% 70%, white, transparent), 
radial-gradient(10px 10px at 40% 80%, white, transparent),
radial-gradient(10px 10px at 70% 90%, white, transparent), 
radial-gradient(10px 10px at 50% 100%, white, transparent),
radial-gradient(10px 10px at 35% 5%, white, transparent), 
radial-gradient(10px 10px at 75% 10%, white, transparent),
radial-gradient(10px 10px at 90% 15%, white, transparent), 
radial-gradient(10px 10px at 50% 20%, white, transparent),
radial-gradient(10px 10px at 75% 90%, white, transparent), 
 radial-gradient(10px 10px at 80% 30%, white, transparent),
radial-gradient(10px 10px at 85% 35%, white, transparent), 
radial-gradient(10px 10px at 90% 20%, white, transparent),
radial-gradient(10px 10px at 90% 45%, white, transparent), 
radial-gradient(10px 10px at 100% 50%, white, transparent),
radial-gradient(10px 10px at 100% 100%, white, transparent), 
 radial-gradient(8px 3px at 14% 82%, white, transparent),
radial-gradient(5px 9px at 63% 21%, white, transparent),
radial-gradient(1px 6px at 91% 58%, white, transparent),
radial-gradient(10px 4px at 28% 45%, white, transparent),
radial-gradient(7px 2px at 85% 13%, white, transparent),
radial-gradient(9px 1px at 42% 67%, white, transparent),
radial-gradient(6px 8px at 19% 39%, white, transparent),
radial-gradient(4px 5px at 74% 92%, white, transparent),
radial-gradient(3px 10px at 56% 11%, white, transparent),
radial-gradient(2px 7px at 33% 76%, white, transparent),
radial-gradient(9px 6px at 22% 49%, white, transparent),
radial-gradient(1px 4px at 88% 24%, white, transparent),
radial-gradient(6px 3px at 51% 85%, white, transparent),
radial-gradient(8px 9px at 17% 62%, white, transparent),
radial-gradient(5px 1px at 93% 41%, white, transparent),
radial-gradient(4px 6px at 36% 18%, white, transparent),
radial-gradient(7px 8px at 65% 53%, white, transparent),
radial-gradient(3px 2px at 29% 91%, white, transparent),
radial-gradient(10px 5px at 44% 35%, white, transparent),
radial-gradient(2px 9px at 78% 68%, white, transparent),
radial-gradient(9px 7px at 11% 26%, white, transparent),
radial-gradient(1px 3px at 55% 83%, white, transparent),
radial-gradient(6px 4px at 37% 59%, white, transparent),
radial-gradient(8px 1px at 64% 16%, white, transparent),
radial-gradient(5px 6px at 81% 42%, white, transparent),
radial-gradient(3px 8px at 23% 73%, white, transparent),
radial-gradient(10px 9px at 49% 31%, white, transparent),
radial-gradient(4px 2px at 67% 85%, white, transparent),
radial-gradient(7px 5px at 32% 54%, white, transparent),
radial-gradient(2px 1px at 96% 38%, white, transparent), 
 radial-gradient(8px 3px at 14% 82%, yellow, transparent),
radial-gradient(5px 9px at 63% 21%, yellow, transparent),
radial-gradient(1px 6px at 91% 58%, yellow, transparent),
radial-gradient(10px 4px at 28% 45%, yellow, transparent),
radial-gradient(7px 2px at 85% 13%, yellow, transparent),
radial-gradient(9px 1px at 42% 67%, yellow, transparent),
radial-gradient(6px 8px at 19% 39%, yellow, transparent),
radial-gradient(4px 5px at 74% 92%, yellow, transparent),
radial-gradient(3px 10px at 56% 11%, yellow, transparent),
radial-gradient(2px 7px at 33% 76%, yellow, transparent),
radial-gradient(9px 6px at 22% 49%, yellow, transparent),
radial-gradient(1px 4px at 88% 24%, yellow, transparent),
radial-gradient(6px 3px at 51% 85%, yellow, transparent),
radial-gradient(8px 9px at 17% 62%, yellow, transparent),
radial-gradient(5px 1px at 93% 41%, yellow, transparent),
radial-gradient(4px 6px at 36% 18%, yellow, transparent),
radial-gradient(7px 8px at 65% 53%, yellow, transparent),
radial-gradient(3px 2px at 29% 91%, yellow, transparent),
radial-gradient(10px 5px at 44% 35%, yellow, transparent),
radial-gradient(2px 9px at 78% 68%, yellow, transparent),
radial-gradient(9px 7px at 11% 26%, yellow, transparent),
radial-gradient(1px 3px at 55% 83%, yellow, transparent),
radial-gradient(6px 4px at 37% 59%, yellow, transparent),
radial-gradient(8px 1px at 64% 16%, yellow, transparent),
radial-gradient(5px 6px at 81% 42%, yellow, transparent),
radial-gradient(3px 8px at 23% 73%, yellow, transparent),
radial-gradient(10px 9px at 49% 31%, yellow, transparent),
radial-gradient(4px 2px at 67% 85%, yellow, transparent),
radial-gradient(7px 5px at 32% 54%, yellow, transparent),
radial-gradient(2px 1px at 96% 38%, yellow, transparent), 
 radial-gradient(8px 3px at 14% 82%, #0000ff, transparent),
radial-gradient(5px 9px at 63% 21%, #0000ff, transparent),
radial-gradient(1px 6px at 91% 58%, #0000ff, transparent),
radial-gradient(10px 4px at 28% 45%, #0000ff, transparent),
radial-gradient(7px 2px at 85% 13%, #0000ff, transparent),
radial-gradient(9px 1px at 42% 67%, #0000ff, transparent),
radial-gradient(6px 8px at 19% 39%, #0000ff, transparent),
radial-gradient(4px 5px at 74% 92%, #0000ff, transparent),
radial-gradient(3px 10px at 56% 11%, #0000ff, transparent),
radial-gradient(2px 7px at 33% 76%, #0000ff, transparent),
radial-gradient(9px 6px at 22% 49%, #0000ff, transparent),
radial-gradient(1px 4px at 88% 24%, #0000ff, transparent),
radial-gradient(6px 3px at 51% 85%, #0000ff, transparent),
radial-gradient(8px 9px at 17% 62%, #0000ff, transparent),
radial-gradient(5px 1px at 93% 41%, #0000ff, transparent),
radial-gradient(4px 6px at 36% 18%, #0000ff, transparent),
radial-gradient(7px 8px at 65% 53%, #0000ff, transparent),
radial-gradient(3px 2px at 29% 91%, #0000ff, transparent),
radial-gradient(10px 5px at 44% 35%, #0000ff, transparent),
radial-gradient(2px 9px at 78% 68%, #0000ff, transparent),
radial-gradient(9px 7px at 11% 26%, #0000ff, transparent),
radial-gradient(1px 3px at 55% 83%, #0000ff, transparent),
radial-gradient(6px 4px at 37% 59%, #0000ff, transparent),
radial-gradient(8px 1px at 64% 16%, #0000ff, transparent),
radial-gradient(5px 6px at 81% 42%, #0000ff, transparent),
radial-gradient(3px 8px at 23% 73%, #0000ff, transparent),
radial-gradient(10px 9px at 49% 31%, #0000ff, transparent),
radial-gradient(4px 2px at 67% 85%, #0000ff, transparent),
radial-gradient(7px 5px at 32% 54%, #0000ff, transparent),
radial-gradient(2px 1px at 96% 38%, blue, #0000ff, transparent);

animation:starsMove 220s linear
infinite;
opacity:0.5;
}

@keyframes starsMove{

0%{
transform:translateY(0);
}

100%{
transform:translateY(-2000px);
}

}

/* ======================
   LOVE PARTICLE
====================== */

.love-container{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
pointer-events:none;
z-index:1;
}

.love{
position:absolute;
color:#ff4da6;
font-size:26px;
animation:loveUp linear infinite;
}

@keyframes loveUp{

0%{
transform:translateY(100vh);
opacity:1;
}

100%{
transform:translateY(-10vh);
opacity:0;
}

}

/* ======================
   INTRO PAGE
====================== */

.intro-card{

position:absolute;

top:50%;
left:50%;

transform:translate(-50%,-50%);

text-align:center;

z-index:3;

}

.intro-img{

width:250px;

border-radius:150px;

box-shadow:
0 0 10px #ffb3e6,
0 0 25px #e6ccff;

margin-bottom:40px;

}

/* ======================
   GRID LAYOUT
====================== */

.container{

display:grid;

grid-template-areas:
"top-left top-right"
"button button"
"bottom-left bottom-right"
". bottom-text";

gap:25px;

position:absolute;

top:50%;
left:50%;

transform:translate(-50%,-50%);

z-index:3;

}

/* ======================
   PHOTO BOX
====================== */

.box{

width:180px;
height:240px;

border-radius:18px;

overflow:hidden;

border:4px solid #ffb3e6;

box-shadow:
0 0 10px #ffb3e6,
0 0 20px #e6ccff;

}

.box img{

width:100%;
height:100%;
object-fit:cover;

}

.box-top-left{
grid-area:top-left;
}

.box-bottom-right{
grid-area:bottom-right;
}

/* ======================
   CHAT BOX
====================== */

.text{

background:linear-gradient(
45deg,
#ffb3e6,
#e6ccff,
#fff0d9
);

background-size:300% 300%;

animation:neonMove 6s ease infinite;

color:black;

padding:15px;

border-radius:16px;

max-width:210px;

box-shadow:
0 0 10px #ffb3e6,
0 0 20px #e6ccff,
0 0 30px #fff0d9;

font-weight:500;

}

@keyframes neonMove{

0%{
background-position:0% 50%;
}

50%{
background-position:100% 50%;
}

100%{
background-position:0% 50%;
}

}

.text-top-right{
grid-area:top-right;
}

.text-bottom-left{
grid-area:bottom-left;
}

.text-bottom{

grid-area:bottom-text;

text-align:center;

font-size:12px;

color:white;

}

/* ======================
   BUTTON STYLE
====================== */

button{

padding:12px 30px;

border:none;

border-radius:10px;

cursor:pointer;

font-size:16px;

color:white;

background:linear-gradient(45deg,#ff00cc,#6a00ff);

box-shadow:
0 0 10px #ff00cc,
0 0 20px #6a00ff,
0 0 40px #6a00ff;

transition:0.3s;

}

button:hover{

transform:scale(1.1);

box-shadow:
0 0 20px #ff00cc,
0 0 40px #6a00ff,
0 0 80px #6a00ff;

}

.button{

grid-area:button;

margin:auto;

background:linear-gradient(45deg,#00ffb7,#00c3ff);

box-shadow:
0 0 10px #00ffb7,
0 0 20px #00c3ff,
0 0 40px #00c3ff;

}
/* ======================
   HEART EMOJI STYLE
====================== */

/* ======================
   NEON HEART
====================== */

.love{

position:absolute;

width:28px;
height:28px;

background:#ff2ea6;

transform:rotate(45deg);

animation:loveUp linear infinite;

box-shadow:
0 0 10px #ff2ea6,
0 0 20px #ff2ea6,
0 0 30px #b84dff;

}

/* bagian bulat hati */

.love::before,
.love::after{

content:"";

position:absolute;

width:28px;
height:28px;

background:#ff2ea6;

border-radius:50%;

}

.love::before{
top:-14px;
left:0;
}

.love::after{
left:-14px;
top:0;
}

/* animasi naik */

@keyframes loveUp{

0%{
transform:translateY(100vh) rotate(45deg);
opacity:1;
}

100%{
transform:translateY(-10vh) rotate(45deg);
opacity:0;
}

}