*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    width:100%;
    height:100vh;
    overflow:hidden;
    background:#ffffff;
    font-family:Arial, Helvetica, sans-serif;
}

.container{
    position:relative;
    width:100%;
    height:100vh;
}

/* ========================= */
/* KARAKTER */
/* ========================= */

#character{
    position:absolute;
    left:70px;
    bottom:80px;
    width:150px;
    height:220px;

    opacity:0;
    transform:translateX(-120px);

    animation:showCharacter 1.5s forwards;
}

/* Kepala */

.head{
    position:absolute;
    width:90px;
    height:90px;
    border:5px solid #000;
    border-radius:50%;
    left:30px;
    background:white;
}

/* Mata */

.eye{
    position:absolute;
    width:10px;
    height:10px;
    background:#000;
    border-radius:50%;
    top:32px;
}

.eye.left{
    left:22px;
}

.eye.right{
    right:22px;
}

/* Senyum */

.mouth{
    position:absolute;
    width:24px;
    height:12px;
    border-bottom:4px solid #000;
    border-radius:0 0 30px 30px;
    left:33px;
    top:50px;
}

/* Pipi */

.blush{
    position:absolute;
    width:12px;
    height:8px;
    background:pink;
    border-radius:50%;
    opacity:.6;
    top:48px;
}

.blush.left{
    left:10px;
}

.blush.right{
    right:10px;
}

/* Badan */

.body{
    position:absolute;
    width:58px;
    height:90px;
    border:5px solid #000;
    border-top:none;
    border-radius:0 0 18px 18px;
    background:white;

    left:46px;
    top:82px;
}

/* Tangan */

.arm{
    position:absolute;
    width:45px;
    height:5px;
    background:#000;
    border-radius:10px;
    top:108px;
}

.arm.left{
    left:10px;
    transform:rotate(40deg);
}

.arm.right{
    left:90px;
    transform:rotate(-35deg);
    transform-origin:left center;
}

/* Kaki */

.leg{
    position:absolute;
    width:5px;
    height:45px;
    background:#000;
    bottom:0;
}

.leg.left{
    left:58px;
}

.leg.right{
    left:92px;
}

/* ========================= */
/* LOVE KECIL */
/* ========================= */

#miniHeart{
    position:absolute;

    left:175px;
    bottom:170px;

    font-size:30px;
    color:#ff7aa8;

    opacity:0;

    z-index:20;
}

/* Tulisan biu */

#biu{

    position:absolute;

    left:200px;
    bottom:145px;

    font-size:40px;
    color:#000;

    font-weight:bold;

    opacity:0;

}

/* ========================= */
/* LOVE BESAR */
/* ========================= */

#heartContainer{

    position:absolute;

    width:620px;
    height:480px;

    left:50%;
    top:48%;

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

}

/* Love kecil penyusun */

.pixelHeart{

    position:absolute;

    font-size:30px;

    color:#d6002b;

    opacity:0;

    transform:scale(0);

}

/* ========================= */
/* TULISAN */
/* ========================= */

#textLove{

    position:absolute;

    width:100%;

    text-align:center;

    bottom:120px;

    font-size:64px;

    color:#d5003d;

    font-weight:bold;

    opacity:0;

    text-shadow:
        0 0 10px #ff8cab,
        0 0 20px #ff9db7,
        0 0 40px #ffbfd1;

}

#textClass{

    position:absolute;

    width:100%;

    text-align:center;

    bottom:45px;

    font-size:48px;

    color:#222;

    opacity:0;

}

/* ========================= */
/* ANIMASI */
/* ========================= */

@keyframes showCharacter{

    to{

        opacity:1;

        transform:translateX(0);

    }

}

@keyframes sendHeart{

    0%{

        opacity:0;
        transform:translate(0,0) scale(.2);

    }

    20%{

        opacity:1;

    }

    100%{

        opacity:1;

        transform:translate(120px,-70px) scale(1.4);

    }

}

@keyframes armMove{

    0%{

        transform:rotate(-35deg);

    }

    50%{

        transform:rotate(-15deg);

    }

    100%{

        transform:rotate(-35deg);

    }

}

@keyframes popHeart{

    from{

        opacity:0;

        transform:scale(0);

    }

    to{

        opacity:1;

        transform:scale(1);

    }

}

@keyframes fadeText{

    from{

        opacity:0;

        transform:translateY(30px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

@keyframes glow{

    0%{

        text-shadow:
        0 0 10px #ffb3c8;

    }

    100%{

        text-shadow:
        0 0 20px #ff668f,
        0 0 40px #ff668f,
        0 0 70px #ff668f;

    }

}

/* ===========================
   SPARKLE
=========================== */

#sparkleContainer{

    position:absolute;

    inset:0;

    pointer-events:none;

}

.sparkle{

    position:absolute;

    color:#FFD700;

    font-size:18px;

    opacity:0;

}

@keyframes sparkleAnimation{

    0%{

        opacity:0;
        transform:scale(.3) rotate(0deg);

    }

    40%{

        opacity:1;
        transform:scale(1.4) rotate(90deg);

    }

    100%{

        opacity:0;
        transform:scale(0) rotate(180deg);

    }

}

/* ===========================
   LOVE BACKGROUND
=========================== */

.bgHeart{

    position:fixed;

    bottom:-30px;

    color:#ffb6c1;

    opacity:.45;

    animation:floatHeart linear forwards;

}

@keyframes floatHeart{

    from{

        transform:translateY(0);

        opacity:.45;

    }

    to{

        transform:translateY(-110vh);

        opacity:0;

    }

}