:root {
    /* p31wife soft faith / boutique palette */
    --page-back-color: #f8efe9;
    --panel-back-color: #fff8f4;
    --cream: #fffaf6;
    --blush: #f3d9d1;
    --soft-blush: #faebe6;
    --rose: #c9827b;
    --rose-deep: #a85f5b;
    --rose-dark: #7f4646;
    --warm-taupe: #8e7770;
    --charcoal: #2f3030;
    --soft-charcoal: #5d5553;
    --white: #ffffff;
    /* Scroller */
    --scrolling-banner-back-color: #f6dfd8;
    --scrolling-banner-fore-color: #7f4646;
    /* Regular buttons */
    --button-back-color: #fffaf6;
    --button-fore-color: #5d5553;
    --button-border-color: #d7aaa2;
    /* Hot buttons */
    --hot-button-back-color: #c9827b;
    --hot-button-fore-color: #ffffff;
    --hot-button-border-color: #f3d9d1;
}

html {
    min-height: 100%;
    margin: 0;
    padding: 0;
    background-color: var(--page-back-color);
    overflow-y: auto;
}

body {
    min-height: 100vh;
    margin: 0;
    padding: 0;
    font-family: 'Kalam', Arial, sans-serif;
    font-weight: 400;
    font-style: normal;
    color: var(--charcoal);
    background: radial-gradient(circle at top left, rgba(201, 130, 123, 0.22), transparent 32%), radial-gradient(circle at top right, rgba(243, 217, 209, 0.55), transparent 34%), linear-gradient(180deg, #fffaf6 0%, #f8efe9 44%, #ead1ca 100%);
    overflow-y: auto;
}

.container {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    padding: 0;
    box-sizing: border-box;
    text-align: center;
    overflow: hidden;
    background-color: var(--panel-back-color);
    box-shadow: 0 0 34px rgba(127, 70, 70, 0.18), 0 16px 60px rgba(80, 52, 48, 0.22);
}

.banner {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

img {
    max-width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
}

.header {
    margin-top: 0;
    padding: 0;
    width: 100%;
    overflow: hidden;
    background: linear-gradient(90deg, #f7ddd6 0%, #fff8f4 24%, #f3d9d1 50%, #fff8f4 76%, #f7ddd6 100%);
    color: var(--scrolling-banner-fore-color);
    border-top: 2px solid rgba(201, 130, 123, 0.72);
    border-bottom: 2px solid rgba(201, 130, 123, 0.72);
    box-sizing: border-box;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), inset 0 -1px 0 rgba(127, 70, 70, 0.08), 0 5px 16px rgba(127, 70, 70, 0.13);
}

#ScrollingBanner {
    margin-top: 0;
    padding: 10px 0;
    overflow: hidden;
    font-size: 28px;
    white-space: nowrap;
    text-align: left;
    letter-spacing: 1px;
    line-height: 40px;
    font-weight: 700;
    text-transform: none;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    color: var(--scrolling-banner-fore-color);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.85), 0 0 9px rgba(201, 130, 123, 0.25);
}

.main {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    padding: 18px 24px 30px;
    box-sizing: border-box;
    background: radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.85), transparent 42%), linear-gradient(180deg, #fff8f4 0%, #f8ebe6 54%, #efd6cf 100%);
    border-top: 1px solid rgba(201, 130, 123, 0.18);
}

.styled-button {
    width: 100%;
    margin-top: 15px;
    background: linear-gradient(180deg, #ffffff 0%, #fff8f4 54%, #f4ded8 100%);
    color: var(--button-fore-color);
    border: 2px solid rgba(201, 130, 123, 0.52);
    padding: 8px 0;
    box-sizing: border-box;
    font-family: 'Kalam', Arial, sans-serif;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 0.6px;
    cursor: default;
    border-radius: 16px;
    text-align: center;
    text-transform: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 6px 14px rgba(127, 70, 70, 0.12), 0 1px 0 rgba(255, 255, 255, 0.7);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9);
}

.custom {
    background: linear-gradient(90deg, #a85f5b 0%, #c9827b 45%, #dfaaa3 100%);
    color: var(--hot-button-fore-color);
    border: 2px solid rgba(255, 242, 238, 0.95);
    cursor: pointer;
    transition: all 0.22s ease-in-out;
    box-shadow: 0 0 14px rgba(201, 130, 123, 0.34), 0 8px 18px rgba(127, 70, 70, 0.23), inset 0 1px 0 rgba(255, 255, 255, 0.35);
    text-shadow: 0 1px 2px rgba(92, 45, 45, 0.42);
}

    .custom:hover {
        background: linear-gradient(90deg, #b96f68 0%, #d3918a 48%, #e8bab4 100%);
        border-color: #ffffff;
        box-shadow: 0 0 18px rgba(201, 130, 123, 0.48), 0 10px 22px rgba(127, 70, 70, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.42);
        transform: translateY(-2px);
    }

.button-container {
    margin-bottom: 16px;
}

.scroll {
    padding-left: 50px;
    padding-right: 50px;
}

@media (max-width: 600px) {
    #ScrollingBanner {
        font-size: 23px;
        line-height: 32px;
        letter-spacing: 0.8px;
    }

    .styled-button {
        font-size: 21px;
        padding: 7px 0;
        margin-top: 14px;
        letter-spacing: 0.5px;
        border-radius: 13px;
    }

    .main {
        padding-left: 20px;
        padding-right: 20px;
    }
}