/*

Colour Palette
#0e30ca

BLUE
#0634c3

GOLD
rgb(255, 217, 0)

*/
html, body {
    background-color: #8EC5FC;
    background-image: linear-gradient(180deg, #8EC5FC 0%, #FBBE01 80%);
    color: black;
    font-family: 'Sarabun', sans-serif;
    font-weight: 400;
    animation: fadein 0.7s;
}

@keyframes fadein {
    from { opacity: 0.6; }
    to   { opacity: 1; }
}

a {
    color: #0634c3;
}

a:hover {
    color: gold;
}

#headerSection {
    background-color: #0e30ca;
    border-bottom: 2px solid gold;
    background: linear-gradient(160deg, #0634c3, #f2ce0b);
    background-size: 600% 600%;

    -webkit-animation: YCC 14s ease infinite;
    -moz-animation: YCC 14s ease infinite;
    animation: YCC 14s ease infinite;
}

@-webkit-keyframes YCC {
    0%{background-position:1% 0%}
    50%{background-position:99% 100%}
    100%{background-position:1% 0%}
}
@-moz-keyframes YCC {
    0%{background-position:1% 0%}
    50%{background-position:99% 100%}
    100%{background-position:1% 0%}
}
@keyframes YCC {
    0%{background-position:1% 0%}
    50%{background-position:99% 100%}
    100%{background-position:1% 0%}
}

#headerSection h1 {
    font-family: 'Cinzel', serif;
    color: white;
    margin: 2rem auto;
    font-weight: 500;
    letter-spacing: 5px;
}

.navbar-dark .navbar-nav .nav-link {
    color: black;
    font-size: 1.5em;
}

.navbar-dark .navbar-nav .nav-link:hover {
    color: gold;
}

.navbar-dark .nav-item .nav-link.active {
    color: wheat;
    font-weight: 700;
}

.navbar-dark {
    padding: 3em 0;
}

.pageHeader {
    padding-bottom: 1em;
    font-size: 26px;
    letter-spacing: 2px;
}

.bodyText {
    text-align: justify;
    font-size: 1.05em;
    color: black; ;
    font-weight: 700;
    padding: 0 6%;
}

#news {
    margin-top: 2em;
    padding-top: 2em;
    padding-bottom: 2em;
    border-top: blue 1px;
    background-color: lightblue;
}

.modalText {
    text-align: justify;
}

.roomy {
    margin: 5% 0;
}

.roomy p {
    font-size: 20px;
}

.roomy h2 {
    letter-spacing: 2px;
}

address {
    font-size: 1.3em;
}

iframe {
    max-width: 100%;
}

footer div p {
    color: black;
}

section {
    padding-bottom: 3%;
}

footer {
    padding-top: 6%;
}

.footerimg {
    margin-top: 0%;
}

/* Groups */

.groupLink {
    transition: 0.3s;
    position: relative;
    bottom: 0px;
}

.groupLink:hover {
    position: relative;
    bottom: 7px;
    box-shadow: 5px 10px 18px rgb(0 0 0 / 20%);
}

.groupCol {
    padding: 2px;
}

.groupBody {
    text-align: justify;
    background-color: rgb(34, 94, 204);
    color: white;
    box-shadow: 5px 10px 18px rgb(0 0 0 / 20%);
    margin: 0 10%;
}

.groupBody a {
    color: gold;
}

.card-body {
    text-align: justify;
}

@media (max-width: 576px) {
    h1 {
        font-size: 16px;
    }
    h2 {
        font-size: 18px;
    }
    h3 {
        font-size: 18px;
    }
    h4 {
        font-size: 18px;
    }
    .pageHeader {
        font-size: 18px;
    }
}

@media (min-width: 576px) {
    h1 {
        font-size: 18px;
    }
    h2 {
        font-size: 18px;
    }
    h3 {
        font-size: 16px;
    }
    h4 {
        font-size: 16px;
    }
    .pageHeader {
        font-size: 22px;
    }
}

@media (min-width: 768px) {
    h1 {
        font-size: 22px;
    }
    h2 {
        font-size: 18px;
    }
    h3 {
        font-size: 18px;
    }
    h4 {
        font-size: 18px;
    }
    .pageHeader {
        font-size: 24px;
    }
}

@media (min-width: 992px) {
    h1 {
        font-size: 25px;
    }
    h2 {
        font-size: 20px;
    }
    h3 {
        font-size: 18px;
    }
    h4 {
        font-size: 18px;
    }
}

@media (min-width: 1200px) {
    h1 {
        font-size: 25px;
    }
    h2 {
        font-size: 20px;
    }
    h3 {
        font-size: 18px;
    }
    h4 {
        font-size: 18px;
    }
}

@media (min-width: 1400px) {
    h1 {
        font-size: 25px;
    }
    h2 {
        font-size: 20px;
    }
    h3 {
        font-size: 18px;
    }
    h4 {
        font-size: 18px;
    }
}