/* I've studied CSS and HTML for a few years, completing the codeacademy course in both */
/* element styling (e.g. standard p, h1, h2, a, etc) */
p {
  margin: 0 0 1em;
  line-height: 1.5;
  font-family: 'Montserrat', sans-serif;
}

h1, h2 {
  font-family: 'bitcount grid single', sans-serif;
  color:#ff5800;
  font-size: xx-large;
}
h1 {
  margin: 0 0 0.5em;
  font-weight: 400;
}
h2 {
  margin: 0 0 0.5em;
  font-weight: 200;
}
h3, h4, h5, h6 {
  font-family: 'Montserrat', sans-serif;
  margin: 0 0 0.5em;
  font-weight: bold;
}
a {
  color: #ff5800;
}

/* body styling */
/*I got the background image from Unsplash*/
body {
  background-image: url(../images/bg.jpg);
  /* makes the background image fixed when scrolling */
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-color: #1a1a1a;
  font-family: 'Montserrat', sans-serif;
  color: #eee;
}

/* flexible content images code */
.content {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
}

.an-image {
  flex: 1;
  max-width: 300px;
  text-align: center;
  background: #317873;
  padding: 15px;
  border-radius: 8px;
  margin: 0;
}

.an-image img {
  width: 100%;
  height: 400px;
  object-fit: cover;
  border-radius: 4px;
}

.image-caption {
  margin-top: 10px;
  font-size: 14px;
  color: #eee;
}
/* Changes the scroll bar to be a custom colour, I went for green and black to match the webpage colours */
::-webkit-scrollbar-thumb {
background-color: #1a1a1a; 
border:1px solid  #317873;
border-radius: 3px;}

::-webkit-scrollbar { 
width: 7px; 
height: 0px; 
background: #317873; 
}
/* navigation styles */
/* Lots of help from W3Schools on this one https://www.w3schools.com/css/css_navbar.asp*/
nav {
  background: #317873;
  color: #ff5800;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.9em;
  /*made the nav bar fixed to the top of the page and made all text uppercase*/
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: bold;
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 1000;
}
nav h2 {
  margin: 0;
  padding: 1em;
  font-family: 'Montserrat', sans-serif;
  font-weight: 900;
  font-size: 1em;
}
page-nav {
  display: flex;
  justify-content: center;
  padding: 1em 0;

}
nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #317873;
  
}

nav ul li {
  float: left;
  margin-right: 1em;
  vertical-align: middle;
}

nav ul li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
/*adds a hover effect to the nav bar links*/
nav ul li a:hover {
  background-color: #ff5800;
}
/* page header styles*/
header {
  border-style: solid;
  border-color: #317873;
  border-radius: 15px;
  color: #fff;
  padding: 1em 0;
  text-align: center;
  margin-top: 200px;
  margin-bottom: 200px;
  width: 100%;
  height: 200px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 900;
}

/* main layout */
main {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1em;
}
ol li {
  margin-left: 20px;
  margin-bottom: 1em;
}

/* styling for the section content */
section {
  margin-bottom: 2em;
  padding: 1em;
  background: #3c3c3c;
  /* added coloured border and curved edges */
  border-radius: 20px;
  border-style: solid;
  border-color: #317873;
}
section h2 {
  text-align: center;
}
section quote {
  font-style: italic;
  font-size: large;
  color: #ff5800;
  display: block;
  text-align: center;
  margin-top: 1em;
  margin-bottom: 1em;
}
/* background colours for sections */
section{
  background: #1a1a1a;
}


/* form styling */
input, textarea {
  width: 100%;
  padding: 0.5em;
  margin-bottom: 1em;
  border: 1px solid #317873;
  border-radius: 3px;
  background-color: #1a1a1a;
  color: #eee;
}
/* change border colour on hover */
textarea:hover, input:hover {
  border: 1px solid #ff5800;
}
/* footer styling */
footer {
  background: #ff5800;
  color: #fff;
  text-align: center;
  padding: 1em 0;
  font-size: 0.8em;
}
footer a {
  color: #317873;
}