:root {
    /* WifeCycleManager palette */
    --page-back-color: #062815;
    --panel-back-color: #FFF8EF;
    --green-dark: #006A2D;
    --green-deep: #005323;
    --green: #0EA042;
    --green-light: #35B765;
    --green-soft: #D9F4DE;
    --cream: #FFF8EF;
    --cream-warm: #F7E9D8;
    --cream-soft: #FFFDF8;
    --navy: #051739;
    --pink-dark: #9F174A;
    --pink: #D62C68;
    --pink-light: #E84D82;
    --pink-soft: #F8B7CB;
    --white: #FFFFFF;
    --ink: #051739;
    /* Scroller */
    --scrolling-banner-back-color: #005323;
    --scrolling-banner-fore-color: #FFFFFF;
    /* Regular buttons */
    --button-back-color: #FFF8EF;
    --button-fore-color: #006A2D;
    --button-border-color: #006A2D;
    /* Hot buttons */
    --hot-button-back-color: #006A2D;
    --hot-button-fore-color: #FFFFFF;
    --hot-button-border-color: #006A2D;
}

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(--ink);
    background: radial-gradient(circle at top left, rgba(214, 44, 104, 0.10), transparent 28%), radial-gradient(circle at top right, rgba(14, 160, 66, 0.18), transparent 32%), linear-gradient(180deg, #052313 0%, #071B12 48%, #030C08 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 24px rgba(14, 160, 66, 0.24), 0 0 46px rgba(214, 44, 104, 0.10), 0 0 80px rgba(255, 248, 239, 0.08);
}

.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, #00491F 0%, #006A2D 50%, #00491F 100%);
    color: var(--scrolling-banner-fore-color);
    border-top: 2px solid rgba(255, 248, 239, 0.70);
    border-bottom: 2px solid rgba(255, 248, 239, 0.70);
    box-sizing: border-box;
    box-shadow: inset 0 0 16px rgba(255, 255, 255, 0.06), 0 3px 10px rgba(5, 23, 57, 0.20);
}

#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: #FFFFFF;
    text-shadow: 0 2px 1px rgba(5, 23, 57, 0.55);
}

.main {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    padding: 12px 24px 26px;
    box-sizing: border-box;
    background: radial-gradient(circle at 15% 0%, rgba(214, 44, 104, 0.06), transparent 30%), radial-gradient(circle at 85% 0%, rgba(14, 160, 66, 0.08), transparent 32%), linear-gradient(180deg, #FFF8EF 0%, #F7E9D8 100%);
    border-top: 1px solid rgba(5, 23, 57, 0.08);
}

.styled-button {
    width: 100%;
    margin-top: 15px;
    background: #FFF8EF;
    color: var(--green-dark);
    border: 2px solid var(--green-dark);
    padding: 9px 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: 13px;
    text-align: center;
    text-transform: none;
    box-shadow: 0 3px 8px rgba(5, 23, 57, 0.12), inset 0 0 0 1px rgba(255, 255, 255, 0.65);
    text-shadow: none;
}

.custom {
    background: var(--green-dark);
    color: #FFFFFF;
    border: 2px solid var(--green-dark);
    cursor: pointer;
    transition: all 0.22s ease-in-out;
    box-shadow: 0 4px 10px rgba(5, 23, 57, 0.20), inset 0 1px 0 rgba(255, 255, 255, 0.10);
    text-shadow: 0 1px 1px rgba(5, 23, 57, 0.35);
}

    .custom:hover {
        background: #007F35;
        border-color: #007F35;
        box-shadow: 0 6px 14px rgba(5, 23, 57, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.12);
        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: 8px 0;
        margin-top: 14px;
        letter-spacing: 0.5px;
        border-radius: 11px;
    }

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