/* =========================================================
   PAGE BACKGROUND & GLOBAL TEXT
   (Main content, NOT navigation)
   ========================================================= */

body {
    overflow-y: scroll;
    background-image: url("../images/background.gif");
    background-size: cover;
    background-repeat: repeat-y;
    font-family: "Times New Roman", serif;
}

h1 {
    font-size: 2.5vw;
}

p {
    color: black;
    margin: 0;
}

p a {
    text-decoration: none;
    color: black;
}

/* =========================================================
   MAIN CONTENT PANELS
   ========================================================= */

.mainContent {
    position: relative;
    width: 80%;
    margin: 0 auto;
    border-style: ridge;
    border-color: goldenrod;
    border-width: 5px;
    border-radius: 10px;
    min-height: 160vh;
    text-align: center;
}

.newsContent {
    position: relative;
    width: 80%;
    margin: 0 auto;
    border-style: ridge;
    border-color: goldenrod;
    border-width: 5px;
    border-radius: 10px;
    min-height: 160vh;
}

/* white panel around editable text */
.textContent {
    width: 70%;
    margin: 2em auto 0 auto;
    height: auto;
    
    border-style: solid;
    border-color: white;
    border-radius: 1em;
}

/* content layout helpers */

.lSize {
    width: 45%;
    padding-top: 3vh;
    padding-left: 22vw;
}

.wPos {
    text-align: center;
    margin-top: 0;
    padding-top: 1em;
}

.sPos {
    padding-left: 10em;
    padding-right: 10em;
    padding-top: 1em;
}

/* =========================================================
   IMAGES
   ========================================================= */

.imgBorder {
    border-style: ridge;
    border-color: goldenrod;
    border-width: 5px;
    border-radius: 10px;
}

.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 58%;
    padding-top: 1em;
}

.centerImg {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 58%;
    margin-top: 2em;
}

.welcome {
    width: 75%;
    margin-top: 3vh;
    margin-right: auto;
    margin-left: auto;
    display: block;
}

.imgWid {
    width: 100%;
    padding: 0;
}

.imgWid2 {
    width: 50%;
    float: left;
    margin-right: 1em;
}

/* small FB icon used elsewhere on site */
.fb {
    width: 5%;
    margin-left: 0.1em;
    padding: 0;
    position: relative;
    z-index: 1;
}

/* =========================================================
   FOOTER
   ========================================================= */

.footer {
    min-height: 5vh;
    position: relative;
    text-align: center;
    margin-top: 2em;
    clear: both;
}

.footer li {
    display: inline-block;
    text-align: center;
    text-decoration: none;
    margin-right: 2em;
}

.footer a {
    text-decoration: none;
    color: white;
}

/* link colours in footer */
.footer li:link a {
    color: red;
}

.footer li:active a {
    color: black;
}

.footer li:hover a {
    color: pink;
}

.footer li:visited a {
    color: black;
}

/* small helpers */

.noDisplay {
    display: none;
}

.inline li {
    display: inline;
    text-decoration: none;
}
/* default: desktop/tablet – show image, hide text */
.heading-image {
    display: block;
}

.heading-text {
    display: none;
    text-align: center;
    padding-top: 0.5em;
    padding-bottom: 0;
    color: #000;   /* change to black if your mobile background is light */
    font-size: 0.95rem;
    font-weight: 400;
}

@media screen and (max-width: 1150px) {
    .heading-image {
        display: none;
    }

    .heading-text {
        display: block;
    }
.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 75%;
    padding-top: 0%;
}
h1 {
    font-size: 0.95rem;
    color: black;
}
.mainContent h3 {
   
    font-size: 0.95rem;
    font-weight: 400    ;
    color: black;
    text-align: justify;
    padding-top:1em;

}
@media screen and (max-width: 1150px) {
    .footer {
        margin-top: 1em;
        padding: 0.5em 0;
        min-height: auto;
    }

    .footerUl {
        padding: 0;
        margin: 0 auto;
        list-style: none;
        display: flex;
        flex-wrap: wrap;
        gap: 0.6em;      /* small spacing between items */
        justify-content: center;
    }

    .footerUl li {
        display: inline;
        margin: 0;
        padding: 0;
        font-size: 0.65rem;  /* smaller footer font */
        white-space: nowrap;
    }

    .footerUl a {
        text-decoration: none;
        color: white;
    }
}

}



/* =========================================================
   RESPONSIVE ADJUSTMENTS
   ========================================================= */

@media screen and (max-width: 1150px) {
body {
    margin: 0px;
}
    .mainContent,
    .newsContent, .top {
        width: 95%;
    }

    .welcome {
        width: 90%;
    }

    .centerImg {
        width: 100%;
    }

    .imgWid {
        padding: 0.5em;
    }

        .imgWid2 {
        width: 100%;
        float: none;              /* stop floating on mobile */
        display: block;
        margin: 0 auto 1em auto;
    }

    .textPanel {
        clear: both;              /* ensure text starts below the image */
        margin-top: 1em;
        margin-bottom: 1em;
    }

    .lSize {
        width: 80%;
        margin-top: 5em;
        padding-left: 7vw;
        margin-bottom: 2vh;
    }

    .mText {
        margin: 0 auto;
        text-align: center;
        width: 100%;
    }

    .wPos {
        padding-left: 1vw;
    }
}