*{  
margin:0;  
padding:0;  
box-sizing:border-box;  
font-family:tahoma;  
}  
  
body{  
height:100vh;  
display:flex;  
justify-content:center;  
align-items:center;  
overflow:hidden;  
background:radial-gradient(circle,#2a003d,#0b0014);  
color:white;  
}  
  
/* START */  
#start{  
text-align:center;  
}  
  
h1{  
text-shadow:0 0 20px #ff4de3;  
margin-bottom:10px;  
}  
  
input{  
padding:10px;  
border-radius:10px;  
border:none;  
text-align:center;  
margin-top:10px;  
}  
  
button{  
display:block;  
margin:15px auto;  
padding:10px 25px;  
border:none;  
border-radius:10px;  
background:#ff4de3;  
color:white;  
box-shadow:0 0 20px #ff4de3;  
cursor:pointer;  
}  
  
#error{  
color:red;  
margin-top:10px;  
}  
  
/* RESULT */  
#result{  
display:none;  
text-align:center;  
animation:zoom 1.2s ease;  
}  
  
/* CAROUSEL */  
#carousel{  
position:relative;  
width:260px;  
height:260px;  
margin:20px auto;  
perspective:1000px;  
}  
  
.card{  
position:absolute;  
width:100%;  
height:100%;  
object-fit:cover;  
border-radius:20px;  
box-shadow:0 0 40px #ff4de3;  
}  
  
/* 3D ANIMATION */  
.c1{animation:spin1 8s infinite linear;}  
.c2{animation:spin2 8s infinite linear;}  
.c3{animation:spin3 8s infinite linear;}  
  
@keyframes spin1{  
0%{transform:translateX(0) scale(1); z-index:3;}  
33%{transform:translateX(80px) scale(0.8); opacity:.7;}  
66%{transform:translateX(-80px) scale(0.8); opacity:.5;}  
100%{transform:translateX(0) scale(1);}  
}  
  
@keyframes spin2{  
0%{transform:translateX(-80px) scale(0.8); opacity:.5;}  
33%{transform:translateX(0) scale(1); opacity:1;}  
66%{transform:translateX(80px) scale(0.8); opacity:.7;}  
100%{transform:translateX(-80px) scale(0.8);}  
}  
  
@keyframes spin3{  
0%{transform:translateX(80px) scale(0.8); opacity:.7;}  
33%{transform:translateX(-80px) scale(0.8); opacity:.5;}  
66%{transform:translateX(0) scale(1); opacity:1;}  
100%{transform:translateX(80px) scale(0.8);}  
}  
  
/* FOOTER */  
#footer{  
position:fixed;  
bottom:10px;  
width:100%;  
text-align:center;  
font-size:14px;  
color:rgba(255,255,255,0.6);  
pointer-events:none;  
}  
  
/* HEARTS */  
.heart{  
position:absolute;  
color:#ff4de3;  
animation:fall 5s linear;  
}  
  
@keyframes fall{  
0%{transform:translateY(-50px); opacity:1;}  
100%{transform:translateY(110vh); opacity:0;}  
}  
  
/* RESULT ANIMATION */  
@keyframes zoom{  
from{transform:scale(0.5); opacity:0;}  
to{transform:scale(1); opacity:1;}  
}