@import url('https://fonts.googleapis.com/css2?family=Alex+Brush&display=swap');
    @import url('https://fonts.googleapis.com/css2?family=Italiana&display=swap');
    @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');
    @import url('https://fonts.googleapis.com/css2?family=Lobster+Two&display=swap');
    @import url('https://fonts.googleapis.com/css2?family=Oooh+Baby&display=swap');

    .opening {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        display: -moz-flex;
        display: -ms-flex;
        display: -o-flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        min-height: 100vh;
        min-width: 100%;
        padding-top: 3rem;
        padding-bottom: 3rem;
        background-color: #FAF3F0;
        z-index: 10;
    }

    .divider-custom {
        margin: 1.25rem 0 1.5rem;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .divider-custom .divider-custom-line {
        width: 100%;
        max-width: 7rem;
        height: 0.25rem;
        background-color: #2c3e50;
        border-radius: 1rem;
        border-color: #2c3e50;
    }

    .divider-custom .divider-custom-line:first-child {
        margin-right: 1rem;
    }

    .divider-custom .divider-custom-line:last-child {
        margin-left: 1rem;
    }

    .divider-custom .divider-custom-icon {
        color: #032547;
        font-size: 2rem;
    }

    .divider-custom.divider-light .divider-custom-line {
        background-color: #fff;
    }

    .divider-custom.divider-light .divider-custom-icon {
        color: #fff;
    }

    .divider-custom.divider-dark .divider-custom-line {
        background-color: #615130;
    }

    .divider-custom.divider-dark .divider-custom-icon {
        color: #615130;
    }

    .halaman {
        min-height: 100vh;
        position: relative;
    }

    /* SATU */
    .img_mid {
        position: absolute;
        top: 40%;
        bottom: 0;
        right: 0;
        left: 50%;
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }

    .object-mid {
        position: absolute;
        top: 20%;
        bottom: 0;
        right: 0;
        left: 0;

    }

    .object-mid img {
        width: 400px;
    }

    .mempelai {
        position: absolute;
        top: 27%;
        bottom: 0;
        right: 0;
        left: 0;
        font-size: 42px;
        font-family: 'Alex Brush';
        color: #615130;
    }

   .kepada {
        position: absolute;
        top: 55%;
        bottom: 0;
        right: 0;
        left: 0;
    }

    .kepada p {
        font-family: 'roboto';
        font-size: 18px;
        color: #444444;
    }

    .nama {
        position: absolute;
        top: 75%;
        bottom: 0;
        right: 0;
        left: 0;
        font-size: 22px;
        color: #615130;
    }

    .alamat {
        position: absolute;
        top: 78%;
        bottom: 0;
        right: 0;
        left: 0;
        font-size: 22px;
        color: #615130;
    }

    .bukaundangan {
        position: absolute;
        top: 75%;
        bottom: 20%;
        right: 26%;
        left: 26%;
        font-size: 18px;
        color: #ffffff;
        background-color: #8D7752;

    }

    .tittle {
        position: absolute;
        top: 10%;
        bottom: 0;
        right: 0;
        left: 0;
        font-size: 32px;
        color: #615130;
    }

    /* END SATU */

    /* DUA */

    .date {
        position: absolute;
        top: 45%;
        bottom: 0;
        right: 0;
        left: 50%;
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }

    .kata-kata {
        position: absolute;
        top: 20%;
        bottom: 0;
        right: 0;
        left: 0%;
        font-family: 'Italiana';
        font-size: 28px;
        color: #615130;
    }

    .nama2 {
        position: absolute;
        top: 30%;
        bottom: 0;
        right: 0;
        left: 0%;
        font-family: 'Alex Brush';
        font-size: 34px;
        color: #615130;
    }

    .hari {
        position: absolute;
        top: 43%;
        bottom: 0;
        right: 0;
        left: -220px;
        font-family: Roboto;
        font-size: 24px;
        color: #615130;
    }

    .tgl {
        position: absolute;
        top: 42%;
        bottom: 0;
        right: 0;
        left: 0;
        font-family: Roboto;
        font-size: 32px;
        color: #ffffff;
    }

    .bulan {
        position: absolute;
        top: 43%;
        bottom: 0;
        right: 0;
        left: 240px;
        font-family: Roboto;
        font-size: 24px;
        color: #615130;
    }

    .tahun {
        position: absolute;
        top: 52%;
        bottom: 0;
        right: 0;
        left: 0;
        font-family: Roboto;
        font-size: 32px;
        color: #615130;
    }

    .savethedate {
        position: absolute;
        top: 65%;
        bottom: 0;
        right: 0;
        left: 0;
        font-family: 'Italiana';
        font-size: 24px;
        color: #615130;
    }

    .cd {
        position: absolute;
        top: 70%;
        bottom: 0;
        right: 3%;
        left: 0;
        font-family: 'Roboto';
        color: #615130;
    }

    /* END DUA */


    /* TIGA */
    .judulmempelai {
        font-size: 24px;
        font-family: 'Oooh Baby', cursive;
    }

    .cardmempelai {
        border: none !important;
        font-family: 'Roboto';
        width: 90%;
        margin-top: 20px;
        color: #615130;
        height: 20rem auto;

    }

    .panggilan {
        font-family: 'Alex Brush';
        font-size: 42px;
    }

    .namalengkap {
        font-family: 'Lobster Two';
        font-size: 28px;
    }

    .profil-card {
        border: none !important;
        background-color: #FAF3F0 !important;

    }

    .mempelai-img {
        border-radius: 100% !important;
        box-shadow: 3px 3px 4px 1px grey;
    }

    .lokasi {
        font-family: 'Roboto';
        font-size: 18px;
    }

    .nama_acara {
        font-family: 'Italiana';
        font-size: 28px;
    }


    /* ENAM */
    .weddinggift {
        font-family: 'Roboto';
        background-color: #EDE3DF;
        /* width: 90%; */
        margin-top: 20px;
        color: #615130;
    }


    /* TUJUH */
    .ucapan {
        background-color: #FAF3F0;
        border: 2px solid #615130;
        border-radius: 4px;
    }

    .formucap {
        /* position: absolute;
        top: 20%;
        bottom: 0;
        right: 50; */
        /* left: 50; */
        margin: 7px;
    }

    .judulucap {
        padding-top: 50px;
    }

    .kirimucapan {
        /* position: absolute;
        top: 85%;
        bottom: 8%;
        right: 26%;
        left: 26%; */
        font-size: 18px;
        color: #ffffff;
        background-color: #8D7752;
    }

    .cardlove {
        font-family: 'Roboto';
        margin-top: 20px;
        color: #615130;
        border: none !important;
        padding: 5%;
    }

    .gallery img {

        max-width: 100%;
        max-height: 100%;

    }

    .quots {
        min-height: 50vh;
        position: relative;
    }

    .quots p {
        color: #444444;
    }

    .boxucapan {

        height: auto;

        margin: 0px auto;

        border-radius: 10px;

        opacity: 0.8;


    }

    .isi {

        height: 500px;

        margin: 0px auto;

        overflow: auto;
    }

    .isi img {

        border-radius: 100%;

        height: 30px;

        width: 30px;

    }

    .img-ucap {
        width: 10px;
    }

    .ewalet {

        border-style: solid;

        border-color: #a4aaae;

        height: 170px;

        width: 300px;

        box-shadow: 2px 2px 5px #4d4c4c;

        border-radius: 10px;

        position: relative;

        display: flex;

        margin: 0px auto;

        z-index: 1;

        background-image: url('./bc.png');

        background-position: center;

        background-repeat: no-repeat;

        background-size: cover;
    }

    .bank {

        width: 20%;

        height: 20%;

        position: relative;

        left: 80%;

    }

    .nobank {

        position: relative;

        top: 70%;

        left: 100%;

    }


    .an {

        position: relative;

        top: 85%;

    }

    .nobank {

        position: relative;

        top: 70%;

        left: 100%;

    }


    .an {

        position: relative;

        top: 85%;

    }

    .copy {

        position: relative;

        top: 70%;

        left: 50%;

        height: 20px;

        width: 20px;

        cursor: pointer;

    }

    .btnmusic {

        position: fixed;

        bottom: 20px;

        right: 20px;

        width: 50px;

        height: 50px;

        z-index: 5;

    }

    .amp-alamat {
        font-family: 'Roboto';
        font-size: 14px;
    }