/* ===============================================
   Give Peace A Chance - Modernized
   WordPaint Sandbox
=============================================== */

:root {
    --accent-blue: #7A9CEB;
    --gold: #DEB872;
    --text: #B6A078;
    --border-blue: #6282DC;
}

* {
    box-sizing: border-box;
}

body {
    font-family: 'Gentium Basic', serif;
    color: #B6A078;
    background: #294067;
    margin: 0;
    padding: 1% 5% 2%;
    line-height: 1.4;
    font-size: 14pt;
}

/* Outer Background Gradient */
.gradient {
    background: linear-gradient(-45deg, #959595 0%, #0d0d0d 46%, #010101 50%, #0a0a0a 53%, #4e4e4e 76%, #383838 87%, #1b1b1b 100%);
}

/* Main Wrapper */
#wrapper1 {
    width: 100%;
    max-width: 1200px;
    margin: 2% auto;
    padding: 25px 45px 40px;
    background-color: #140806;
    border: 1px solid var(--border-blue);
    box-shadow: 0 0 45px rgba(0, 0, 0, 0.75);
}

/* Inner Content Area */
.content {
    margin: 15px 0;
    padding: 30px;
    border: 1px solid #5783C4;
    background: rgba(20, 8, 6, 0.95);
}

/* Title */
.title-banner {
    display: block;
    font-size: 2.55rem;
    color: var(--gold);
    text-align: center;
    margin: 15px 0 25px;
}

/* Byline */
.headline {
    font-family: Candara, Optima, Helvetica, sans-serif;
    font-size: 1.55rem;
    font-weight: 400;
    text-align: center;
    text-shadow: -2px 1px 0px rgba(0,0,0,0.5);
    border: 1px solid #D99700;
    color: #7A9CEB;
    padding: 12px 25px;
    margin: 10px 0 35px;
    background: #023d6e;
background: linear-gradient(45deg, rgba(2, 61, 110, 1) 0%, rgba(8, 35, 79, 1) 0%, rgba(20, 78, 140, 1) 49%, rgba(8, 35, 79, 1) 100%);
}

/* Section Headings */
.fontbold {
    font-weight: bold;
    font-style: italic;
    font-size: 1.38rem;
    color: #7C8CCC;
    margin: 2.4rem 0 0.9rem;
}

/* Body Text */
.font-enlarge {
    font-size: 1.12rem;
    line-height: 1.78;
}

/* Gradline - Exact as requested */
p.gradline {
    line-height: 10px;
    background-image: url(../../images/grad/h5_bleugrandeur2.jpg);
 	margin: 7% auto;
}

/* Western spacing for images */
.western {
    margin: 2.2rem 0;
    line-height: 1;
}

/* Navigation Links - Original styling only */
.link1 {
    font: normal 11px Arial, Helvetica, sans-serif;
    text-decoration: none;
}
a.link1:link    { color: #728FA5; }
a.link1:visited { color: #728FA5; }
a.link1:hover   { color: #D99700; text-decoration: underline; }
a.link1:active  { color: #CC88C0; }

/* Images - Fancier border restored */
.float-left {
    float: left;
    margin: 8px 28px 18px 0;
    padding: 5px;
    border: 1px solid #97895F;
    background-color: #1a0f08;
    box-shadow: 0 8px 22px rgba(0,0,0,0.65);
}

.float-right {
    float: right;
    margin: 8px 0 18px 28px;
    padding: 5px;
    border: 1px solid #97895F;
    background-color: #1a0f08;
    box-shadow: 0 8px 22px rgba(0,0,0,0.65);
}

.img-ctr {
    margin: 8px auto;
    padding: 5px;
    border: 1px solid #97895F;
    background-color: #1a0f08;
    box-shadow: 0 8px 22px rgba(0,0,0,0.65);
}


img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Final Question */
.final-question {
    font-size: 2.15rem;
    color: var(--gold);
    text-align: center;
    margin: 45px 0 25px;
}

/* Responsive */
@media (max-width: 768px) {
    #wrapper1 {
        padding: 18px 22px 30px;
    }
    
    .title-banner {
        font-size: 2.1rem;
    }
    
    .float-left, .float-right {
        float: none;
        display: block;
        margin: 22px auto;
        max-width: 92%;
    }
    
    .content {
        padding: 22px 18px;
    }
}


/* Bottom Navigation - Responsive */
.bottom-nav {
    width: 90%;
    max-width: 920px;
    margin: 5px auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 55px;
    padding: 12px 0;
    text-align: center;
}

.bottom-nav .content {
    margin: 0 0;
    padding: 0px;
    border: 1px solid #5783C4;
    background: rgba(20, 8, 6, 0.95);
}

.bottom-nav a {
    white-space: nowrap;
}

/* Override link1 font size specifically for bottom nav */
.bottom-nav .link1 {
    font: normal 13px Arial, Helvetica, sans-serif !important;
    color: #728FA5;
}

.bottom-nav a:hover {
    color: #D99700;
    text-decoration: underline;
}

/* Tighter spacing on smaller screens */
@media (max-width: 640px) {
    .bottom-nav {
        gap: 16px 28px;
        padding: 18px 0;
    }
    
    .bottom-nav .link1 {
        font-size: 12.5px;
    }
p {font-size: 12pt; }
}