/*
Colours:
Dark Blue   #202d61
Blue        #1966a6
Creme       #fffce2
*/

/*
    typefaces
*/
@font-face {
    font-family: MMM-Header;
    src: url('/MMM\ Typefaces/MMM-Header.ttf');
}
@font-face {
    font-family: MMM-Body;
    src: url('/MMM\ Typefaces/MMM-Body.ttf');
}
/*
    text styles
*/
h1 {
    font-family: MMM-Header;
    font-weight: normal;
    margin-top: 0px;
}
h2 {
    font-family: MMM-Header;
    font-weight: normal;
    margin-top: 0px;
}
h3 {
    font-family: MMM-Header;
    font-weight: normal;
    margin-top: 0px;
}
h4 {
    font-family: MMM-Header;
    font-weight: normal;
    margin-top: 0px;
}
p {
    font-family: MMM-Body;
}
.header-font {
    font-family: MMM-Header;
    font-size: 120%;
}

/*
    link styling
    No underline until it is hovered over
*/
a:link {
    text-decoration: none;/* Blue matches color scheme*/
    color: #1966a6;
}
a:visited {
    text-decoration: none;/* Purple is lighter to differentiate from dark blue text*/
    color: #8066a6;
}
a:hover {
    text-decoration: underline;
}
a:active {
    text-decoration: underline;
}

/*
    Body styling
    The body contains everything visible
    It's broken up into the Header, Main and Footer.
*/
body {
	background-color: #1966a6;

    height: 100%;

    color: #202d61;
    font-family: MMM-Body;

	padding:0px;
	margin:0px;
}

/*
    Header styling
*/
header {
    background-color: #fffce2;

    border-color: #202d61;
    border-style: solid;
    border-width: 3px;
    border-radius: 10px;

    font-family: MMM-Header;
    color: #202d61;

	position:sticky;
	top:0px;
	margin:8px;
	padding:8px;

    display: grid;
    grid-template-columns: 10% 70% 20%;
}
/*
    Header Logo
*/
.header-image {
    width: auto;
    height: auto;

    background-color: #fffce2;

    border-color: #202d61;
    border-style: solid;
    border-width: 3px;
    border-radius: 10px;

    padding: 0px;

    display: grid;
    grid-template-columns: 100% 0%;

    overflow: hidden;
}
.header-image:hover {
    grid-template-columns: 0% 100%;
}
.header-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/*
    Header Title
*/
.header-title {
    padding: 0px;
    padding-left: 10px;
    padding-right: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.header-title > h1 {
    margin: 0px;
    font-weight: normal;
    font-size: 3.8vw;
}
/*
    Header Navigation Button
*/
.dropbutton {
    background-color: #fffce2;
    color: #202d61;

    width: 100%;
    height: 100%;

    border-color: #202d61;
    border-style: solid;
    border-width: 3px;
    border-radius: 10px;

    cursor: pointer;
}
.dropbutton > h1 {
    font-size: 3.5vw;
    margin-top: 0.67em;
}
.dropbutton:hover, .dropbutton:focus {
    background-color: #1966a6;
    color: #fffce2;
}
.dropdown {
    position: relative;
    display: inline-block;
    width: 100%;
}
/*
    Header Navigation Dropdown
*/
.dropdown-content {
    display: none;
    position: absolute;

    width: 100%;
    
    background-color: #fffce2;
    border-color: #202d61;
    border-style: solid;
    border-width: 3px;
    border-radius: 10px;

    padding-top: 0px;
    padding-bottom: 0px;
    
    overflow: hidden;
    box-shadow: 4px 4px 12px 0px rgba(32,45,97,1);
    z-index: 1;
}
.dropdown-content a {
    background-color: #fffce2;
    color: #202d61;

    padding: 10px 10px;
    text-decoration: none;
    display: block;

    font-size: 3vw;
}
.dropdown a:hover {
    background-color: #1966a6;
    color: #fffce2;
}
.show {
    display: block;
}

/*
    Main Styling
    This is the section which is unique to each page of the site
*/
main {
    background-color: #fffce2;
    color: #202d61;

    border-color: #202d61;
    border-style: solid;
    border-width: 3px;
    border-radius: 10px;

	margin: 8px;
	padding: 8px;

    min-height: 30vw;
}
.main-image {
    width: fit-content;
    height: auto;

    background-color: #fffce2;

    border-color: #202d61;
    border-style: solid;
    border-width: 3px;
    border-radius: 10px;

    padding: 0px;

    display: inline-block;

    overflow: hidden;
}
.main-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/*
    Footer Styling
*/
footer {
    background-color: #fffce2;
	position: bottom;

    border-color: #202d61;
    border-style: solid;
    border-width: 3px;
    border-radius: 10px;

	bottom:8px;
	margin:8px;
	padding:8px;

    display: grid;
    grid-template-columns: 15% 65% 20%;
}
/*
    Image styling for the mountains on either side of footer content
*/
.footer-image {
    width: auto;
    height: auto;

    background-color: #fffce2;
/*
    border-color: #202d61;
    border-style: solid;
    border-width: 3px;
    border-radius: 10px;
*/
    padding: 0px;

    display: flex;

    position: relative;

    overflow: hidden;
}
.footer-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: bottom;
}
/*
    Styling for footer content
*/
.footer-content {
    padding: 0px;
    padding-left: 10px;
    padding-right: 10px;
    text-align: center;
}