/* ==========================================
   BACKGROUND DECORATION
========================================== */

.bg-decoration{

    position: fixed;

    inset: 0;

    width: 100%;

    height: 100%;

    overflow: hidden;

    pointer-events: none;

    z-index: -1;

}

/* Semua Shape */

.shape{

    position: absolute;

    animation: float 10s ease-in-out infinite;

}

/* Lingkaran */

.circle{

    width:120px;

    height:120px;

    background:#FFD93D;

    border:3px solid #111827;

    border-radius:50%;

    top:10%;

    left:5%;

}

/* Kotak */

.square{

    width:90px;

    height:90px;

    background:#6C63FF;

    border:3px solid #111827;

    border-radius:20px;

    top:65%;

    left:8%;

    transform:rotate(20deg);

}

/* Segitiga */

.triangle{

    width:0;

    height:0;

    border-left:55px solid transparent;

    border-right:55px solid transparent;

    border-bottom:100px solid #00C2A8;

    top:20%;

    right:10%;

}

/* Zigzag */

.zigzag{

    width:120px;

    height:18px;

    background:repeating-linear-gradient(
        -45deg,
        #FF5D73 0 12px,
        transparent 12px 24px
    );

    top:75%;

    right:12%;

}

/* Floating Animation */

@keyframes float{

    0%{

        transform:translateY(0px);

    }

    50%{

        transform:translateY(-25px);

    }

    100%{

        transform:translateY(0);

    }

}