/* ========================================
   COLOURS
   CHANGE THESE TO RECOLOUR THE WHOLE SITE
   ======================================== */

:root {

  --page-background: #B7D7A8;

  --header-background: #6b3f2a;
  --header-text: #ffffcc;

  --red-line: #ff0000;

  --nav-background: #ffff99;
  --nav-link: #000066;
  --nav-link-visited: #660066;

  --strapline: #6b3f2a;

  --main-text: #000000;

  --link: #0000cc;
  --link-visited: purple;

  --photo-caption: #000099;

  --footer-line: #6b3f2a;
}

/* ========================================
   SITE STYLES
   ======================================== */


html {
margin: 0;
padding: 0;
}

body {
margin: 6px;
padding: 0;

background-color: var(--page-background);

font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
color: var(--main-text);
}


/* HEADER */

.header {
height: 62px;
background-color: var(--header-background);

display: flex;
align-items: center;
}

.header-image {
width: 115px;
height: 62px;
overflow: hidden;
}

.header-image img {
width: 100%;
height: 100%;
object-fit: cover;
}

.header-title {
flex: 1;

padding-left: 70px;

color: var(--header-text);

font-size: 25px;
font-weight: normal;
}


/* RED LINE */

.red-line {
height: 4px;
background-color: var(--red-line);
}


/* NAVIGATION */

.navigation {
height: 17px;

background-color: var(--nav-background);

display: flex;
align-items: center;

font-size: 11px;
}

.nav-links {
padding-left: 43px;
white-space: nowrap;
}

.nav-links a {
color: var(--nav-link);
text-decoration: underline;
margin-right: 4px;
}

.nav-links a:visited {
color: var(--nav-link-visited);
}

.strapline {
margin-left: 45px;

font-style: italic;
color: var(--strapline);
}


/* PHOTOGRAPHS */

.photographs {
text-align: center;

padding-top: 13px;
}

.main-photo {
width: 490px;
height: 320px;

object-fit: cover;

display: block;

margin-left: auto;
margin-right: auto;
}

.small-photos {
margin-top: 9px;

display: flex;
justify-content: center;

gap: 2px;
}

.small-photos img {
width: 180px;
height: 120px;

object-fit: cover;
}

.photo-caption {
margin-top: 8px;
margin-bottom: 13px;

font-size: 10px;
font-style: italic;

color: var(--photo-caption);
}


/* MAIN TEXT */

.content {
padding-left: 15px;
padding-right: 15px;

line-height: 1.05;
}

.content p {
margin-top: 0;
margin-bottom: 13px;
}

.content a {
color: var(--link);
}

.content a:visited {
color: var(--link-visited);
}


/* FOOTER */

.footer {
margin: 20px 15px 10px 15px;

font-size: 10px;
text-align: center;
}

.footer hr {
border: 0;
border-top: 1px solid var(--footer-line);
}


/* BASIC MOBILE BEHAVIOUR */

@media only screen and (max-width: 650px) {

.header-title {
padding-left: 15px;
font-size: 20px;
}

.header-image {
width: 70px;
}

.navigation {
height: auto;
display: block;
padding: 3px;
}

.nav-links {
padding-left: 0;
}

.strapline {
margin-left: 0;
margin-top: 3px;
}

.main-photo {
width: 90%;
height: auto;
}

.small-photos img {
width: 29%;
height: auto;
}

}