:root {
  --main-color: #a855f7; 
}

body{
  margin:0;
  font-family:Arial, sans-serif;
  background:black;
  color:white;
  overflow:hidden;
}

canvas{
  position:fixed;
  top:0;
  left:0;
  z-index:-1;
}

.slide{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  text-align:center;
  opacity:0;
  pointer-events:none;
  transition:opacity 1s;
}

.slide.active{
  opacity:1;
  pointer-events:auto;
}

h1{
  font-size:50px;
  color: var(--main-color);
  text-shadow:0 0 20px var(--main-color);
}

button{
  padding:14px 35px;
  border:none;
  border-radius:40px;
  background: var(--main-color);
  color:white;
  font-size:16px;
  cursor:pointer;
  box-shadow:0 0 20px var(--main-color);
  transition:0.3s;
}

button:hover{
  transform:scale(1.1);
}

.heart{
  position:relative;
  width:70px;
  height:70px;
  margin:25px auto;
  transform:rotate(-45deg);
  background: var(--main-color);
  animation:beat 1.5s infinite;
  box-shadow:0 0 25px var(--main-color);
}

.heart::before,
.heart::after{
  content:"";
  position:absolute;
  width:70px;
  height:70px;
  background: var(--main-color);
  border-radius:50%;
}

.heart::before{
  top:-35px;
  left:0;
}

.heart::after{
  left:35px;
  top:0;
}

@keyframes beat{
  0%{transform:rotate(-45deg) scale(1);}
  50%{transform:rotate(-45deg) scale(1.12);}
  100%{transform:rotate(-45deg) scale(1);}
}

.purple-star{
  width:120px;
  height:120px;
  margin:40px auto;
  background: var(--main-color);
  clip-path: polygon(
    50% 0%,
    61% 35%,
    98% 35%,
    68% 57%,
    79% 91%,
    50% 70%,
    21% 91%,
    32% 57%,
    2% 35%,
    39% 35%
  );
  box-shadow:0 0 50px var(--main-color);
  cursor:pointer;
  animation:starPulse 2s infinite;
}

@keyframes starPulse{
  0%{transform:scale(1)}
  50%{transform:scale(1.2)}
  100%{transform:scale(1)}
}

.warp canvas{
  animation:warpSpeed 2s linear forwards;
}

@keyframes warpSpeed{
  0%{transform:scale(1)}
  100%{transform:scale(3)}
}

#convite{
  position:fixed;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  background:#111;
  padding:40px;
  border-radius:20px;
  text-align:center;
  box-shadow:0 0 50px var(--main-color);
  display:none;
}


#color-picker{
  position:fixed;
  top:20px;
  left:20px;
  z-index:1000;
  color:white;
  font-family:Arial, sans-serif;
}

#color-picker select{
  padding:8px 14px;
  border-radius:12px;
  border:none;
  font-size:14px;
  cursor:pointer;
  background:#222;
  color:white;
  box-shadow: 0 0 10px var(--main-color);
  transition:0.3s;
}

#color-picker select:hover{
  transform:scale(1.05);
  box-shadow: 0 0 20px var(--main-color);
}

.foto-surpresa{

width:300px;
border-radius:20px;
margin-top:20px;

box-shadow:0 0 30px var(--main-color);

animation:fotoAparecer 1.5s ease;

}

@keyframes fotoAparecer{

from{
opacity:0;
transform:scale(0.8);
}

to{
opacity:1;
transform:scale(1);
}

}