.font-poppins {
    font-family: 'Poppins', sans-serif;
}

.font-standard {
    font-family: 'Playfair', serif;
}

.bg-theme {
    background-image: linear-gradient(#333452, #2C2D53);
}

.content {
    width: 100%;
    /* Menentukan lebar maksimal */
    max-width: 400px;
    /* Atur lebar maksimal sesuai kebutuhan */
    padding: 20px;
    /* Atur jarak dari tepi */
    margin-bottom: 20px;
    /* Jarak antar kolom */
}

.line {
    margin: 0 auto;
    width: 2px;
    height: 120px;
    background-color: #B17C20;
}

.card {
    border-radius: 10px;
}

.kirimPesan {
    background-color: #ECBE3D;
    color: #4C4E6F;
}

.input-style::placeholder {
    font-size: 0.9rem;
    color: #4C4E6F;
}

.bunga1 {
    position: absolute;
    right: 250px;
}

.bunga2 {
    position: absolute;
    left: 250px;
}

#welcome_page {
    overflow: hidden;
}

.bunga3 {
    position: absolute;
    right: 100px;
    bottom: 50px;
}

body {
    width: 100%;
    overflow-x: hidden;
}

.card-shadow {
    box-shadow: 0 12px 18px 22px rgba(0, 0, 0, 0.2), 0 18px 20px 0 rgba(0, 0, 0, 0.19);
}

.bunga_content1 {
    position: absolute;
    width: 10%;
    right: 10%;
    top: 10%;
}

.bunga_content2 {
    position: absolute;
    width: 10%;
}

.bunga_content3 {
    position: absolute;
    width: 10%;

}

.bunga_content4 {
    position: absolute;
    width: 10%;

}

.bunga_content5 {
    position: absolute;
    width: 10%;

}

.bunga_content6 {
    position: absolute;
    width: 10%;

}

.bunga_content7 {
    position: absolute;
    width: 10%;

}

.audio-player {
    position: absolute;
}

@media screen and (max-width: 768px) {
    .bunga1 {
        width: 60%;
        position: absolute;
        bottom: 10px;
        left: -90px;
        transform: rotate(50deg);
    }

    .bunga2 {
        width: 60%;
        position: absolute;
        top: -80px;
        left: -90px;
        transform: rotate(60deg);
    }

    .bunga3 {
        position: absolute;
        width: 70%;
        top: 400px;
        right: 260px;
    }

    .bunga_content1 {
        width: 60%;
        position: absolute;
        top: 50px;
        right: 2px;
    }

    .bunga_content2 {
        width: 60%;
        position: absolute;
        top: -120px;
        right: 78px;
    }

    .bunga_content3 {
        width: 50%;
        bottom: 0px;
    }

    .bunga_content4 {
        width: 50%;
        bottom: 0px;
        right: 0px;
        transform: scaleX(-1);
    }

    .bunga_content5 {
        width: 50%;
        top: 120px;
        left: -30px;
        transform: scaleX(-1);
    }

    .bunga_content6 {
        width: 60%;
        position: absolute;
        top: -60px;
        right: 78px;
    }

    .audio-player {
        position: fixed;
        width: 100px;
        z-index: 1;
        bottom: 100px;
        right: -20px;

    }

    .bunga_content7 {
        width: 60%;
        position: absolute;
        left: -70px;
        bottom: 200px;
        transform: rotate(-40deg);
    }

    .music-animate {
        animation-name: rotateMusic;
        animation-duration: 3s;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
    }

    @keyframes rotateMusic {
        from {
            transform: rotate(0deg);
        }

        to {
            transform: rotate(360deg);
        }
    }
}