@font-face {
    font-family: 'Boska';
    src: url('../fonts/Boska-Variable.ttf') format('truetype');
}

@font-face {
    font-family: 'Snell';
    src: url('../fonts/SnellRoundhand-BlackScript.otf') format('truetype');
}

* {
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
    --bg-color: #FFF9FC;
    --pink-color: #FFDBED;
    --pink-bold-color: #FFDBED;
    --primary-color: #9C6162;
    --secondary-color: #CCAE78;

    /* FontSize */
    --title-font: 56px;
}

body {
    overflow: hidden;
    margin: auto;
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    align-items: center;
}

/* Image */
body img {
    max-width: 100%;
}

/* Title */

.title {
    font-size: 42px;
    font-weight: 700;
}

/* Custom Button */

.custom-button {
    margin-top: 16px;
    cursor: pointer;
    font-family: "Alegreya";
    font-size: 16px;
    padding: 12px 30px;
    transition: 1217ms;
    color: var(--bg-color);
    text-decoration: none;
    font-weight: 600;
    display: flex;
    justify-content: center;
    gap: 8px;
    width: auto;
    border-radius: 28px 12px;
    background-color: var(--bg-color);
    --hover-width: 226px;
    --hover-borderSize: 0px;
}

/* Custom Input */

.custom-input {
    display: flex;
    align-items: center;
    position: relative;
    width: 100%;
}

.custom-input input {
    font-size: 16px;
    padding: 16px 24px;
    width: 100%;
    outline: none;
    color: #9C6162;
    border: 2px solid #9C6162;
    background-color: transparent;
    font-family: 'Alegreya';
    border-radius: 90px;
    transition: .3s ease;
}

.custom-input input::placeholder {
    color: #9c61629e;
}

.custom-button {
    background-color: var(--primary-color);
    color: var(--bg-color);
}

/* Flowers Divider */

.orn-divider {
    position: absolute;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 3;
    bottom: -14%;
    overflow: hidden;
    width: 100%;
    height: 200px;
}

.orn-divider .wrapper {
    position: relative;
    width: 100%;
    height: 100%;
}


.flowers-divider-1,
.flowers-divider-2 {
    top: -15%;
    width: 70%;
}

.flowers-divider-1 {
    position: absolute;
    left: -20%;
    transform: rotateZ(30deg) scaleX(-1);


}

.flowers-divider-2 {
    transform: rotateZ(330deg);
    position: absolute;
    right: -20%;
}



@media (max-width: 562px) {
    .title {
        font-size: 9vw;
    }

    .custom-button {
        padding: 2vw 5vw;
        border-radius: 24px 12px;
    }

    .flowers-divider-1,
    .flowers-divider-2 {
        top: 0%;
        width: 70%;
    }
}

    /* MUSIC OUTER */
    .music-outer {
        position: fixed;
        z-index: 999;
        bottom: 15px;
        left: 15px;
        display: inline-block;
        vertical-align: top;
    }
    .music-outer .music-box {
        width: 60px;
        height: 60px;
        cursor: pointer;

        background-image: url("../../media/template/details/music.png");
        background-repeat: no-repeat;
        background-position: center;
        background-size: 100% 100%;

        position: relative;
        top: 0;
        left: 0;
        transform: rotate(0deg);

        /* transition: all 0.8s ease-out; */
        -webkit-transition: all .8s cubic-bezier(.23,.56,.38,.78);
        -moz-transition: all .8s cubic-bezier(.23,.56,.38,.78);
            -o-transition: all .8s cubic-bezier(.23,.56,.38,.78);
                transition: all .8s cubic-bezier(.23,.56,.38,.78);
    }
    .music-outer .music-box.hide {
        left: -100px;
    }

    .music-outer .music-box:focus,
    .music-outer .music-box:active {
        background-color: transparent;
        outline: none;
        box-shadow: none;
    }
    .music-outer .music-box.playing {
        animation-name: play-music;
        animation-iteration-count: infinite;
        animation-duration: 20s;
        animation-timing-function: linear;
    }

    @media only screen and (min-width: 600px) {
        .music-outer .music-box {
            width: 45px;
            height: 45px;
        }
    }

    @media only screen and (max-width: 600px) {
        .music-outer .music-box {
            width: 45px;
            height: 45px;
        }
    }
    @media only screen and (max-width: 425px) {
        .music-outer {
            bottom: 12px;
            left: 12px;
        }
    }

    @keyframes play-music {
        0% {
            transform: rotate(0deg);
        }
        100% {
            transform: rotate(359deg);
        }
    }