/* This is my CSS stylesheet for Individual A2. Below is an outline of the organization of this stylesheet.

1. General Styles
  1.1 General
  1.2 Navigation
  1.3 Buttons
  1.4 Footer
2. Column/Grid Structure
  2.1 Columns
  2.2 Responsive gallery images
3. Media Queries
  3.1 Medium Screens
  3.2 Small Screens

*/

/* 1. General Styles */
/* 1.1 General - Setting up general formatting for my site */
html, body, div, h1, h2, p {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  vertical-align: baseline;
}

html {
  font-family: "Inter", Helvetica, Arial, sans-serif;
  font-weight: 400;
}

footer, header, section {
  display: block;
}

body {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

* {
  box-sizing: border-box;
}

h1 {
  font-size: 1.4rem;
  font-family: "Dosis", Helvetica, Arial, sans-serif;
  font-weight: bold;
  padding-bottom: 1rem;
}

h2 {
  font-weight: 600;
  font-size: 1em;
  line-height: 1.4em;
}

p {
  font-size: 0.95em;
  line-height: 1.5em;
  margin-bottom: 0.8em;
}

a {
  color: #cf150a;
  font-weight: 400;
  text-decoration: underline;
  line-height: 1.2em;
}

a:hover {
  color: rgb(0, 0, 0);
}

main {
  max-width: 1320px;
  margin: 0 auto;
  padding: 1rem 0 1rem 1rem;
}

.fullimage img {
  width: 100%;
  height: 45em;
  object-fit: cover;
  object-position: center;
}

.center-block {
  width: 100%;
  background-color: rgba(245, 191, 52);
  padding: 1em 0em;
  margin: 1em 0 3em 0;
}

a img#logo {
  width: 25em;
  display: inline-block;
  margin: auto;
}

/* 1.2 Navigation - Formatting of top navigation bar */
header {
  background-color: rgb(20, 20, 20);
  height: 8em;
}

header img {
  display: inline-block;
  vertical-align: middle;
}

header nav {
  float: right;
  vertical-align: middle;
  margin-right: 2rem;
  padding: auto;
}

nav {
  margin: 0 2rem 0 0;
  vertical-align: middle;
}

nav ul {
  display: flex;
  justify-content: flex-end;
  margin-top: 3em;
}

nav a {
  font-size: 1rem;
  color: white;
  padding: 1rem;
  text-decoration: none;
}

nav ul li a:hover {
  color: #f5bf34;
}

#hamburger {
  width: 50px;
  float: right;
  margin-top: 2.2em;
  visibility: hidden;
}

/* 1.3 Buttons - Formatting of buttons */
.button {
  background-color: white;
  color: #cf150a;
  border: 2px solid #cf150a;
  padding: 1em;
  text-align: center;
  text-decoration: none;
  width: 200px;
  font-size: 1rem;
  margin: auto;
  margin-bottom: 4rem;
}

.button a {
  text-decoration: none;
  color: #cf150a;
}

.button:hover {
  background-color: #cf150a;
  border: 2px solid #cf150a;
}

.button:hover a {
  color: white;
}

/* 1.2 Navigation - Formatting of bottom footer */
footer {
  background-color: rgb(20, 20, 20);
  color: rgb(175, 175, 175);
  padding: 2rem 0 6rem 0;
  height: 16em;
}

footer p {
  margin: 0rem 4rem;
}


/* 2. Column/Grid Structure */
/* 2.1 Columns - Formatting of 12 column grid */
main.cols-12 {
  display: flex;
  flex-wrap: wrap;
  margin-top: 4rem;
}

main.cols-12 section {
  padding-right: 1rem;
  margin-bottom: 2rem;
  margin-top: 2rem;
}

/* Divide 100 by 12 and multiply by colnumber */
main.cols-12 section.col1 {
  width: 8.33%;
  margin-top: 0;
  padding: 0;
}

main.cols-12 section.col2 {
  width: 16.66%;
  margin-top: 0;
  padding: 0;
}

main.cols-12 section.col3 {
  width: 25%;
  margin-top: 0;
  padding: 0;
}

main.cols-12 section.col4 {
  width: 33.33%;
  margin-top: 0;
  padding: 0;
}

main.cols-12 section.col5 {
  width: 41.66%;
  margin-top: 0;
  padding: 0;
}

main.cols-12 section.col6 {
  width: 50%;
  margin-top: 0;
  padding: 0;
}

main.cols-12 section.col7 {
  width: 58.33%;
  margin-top: 0;
  padding: 0;
}

main.cols-12 section.col8 {
  width: 66.66%;
  margin-top: 0;
  padding: 0;
}

main.cols-12 section.col9 {
  width: 75%;
  margin-top: 0;
  padding: 0;
}

main.cols-12 section.col10 {
  width: 83.33%;
  margin-top: 0;
  padding: 0;
}

main.cols-12 section.col11 {
  width: 91.66%;
  margin-top: 0;
  padding: 0;
}

main.cols-12 section.col12 {
  width: 100%;
  margin-top: 0;
  padding: 0;
}

main.cols-12 section.col1,
main.cols-12 section.col2,
main.cols-12 section.col3,
main.cols-12 section.col4,
main.cols-12 section.col5,
main.cols-12 section.col6,
main.cols-12 section.col7,
main.cols-12 section.col8,
main.cols-12 section.col9,
main.cols-12 section.col10,
main.cols-12 section.col11,
main.cols-12 section.col12 {
  padding: 0;
}

/* 2.2 Responsive Gallery Images - Formatting rows of 3 images that are responsive */
div.gallery {
  justify-content: center;
  position: relative;
  margin-bottom: 4rem;
}

.gallery img {
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 99%;
  width: 100%;
  opacity: 0;
  background-color: rgba(207, 21, 10, 0.5);
}

.gallery:hover .overlay {
  opacity: 1;
}

.caption {
  font-size: 1rem;
  margin-top: 0.5rem;
  line-height: 1.5rem;
  position: absolute;
}

/* 3 Gallery images per row */
.responsive {
  padding: 0 5px;
  float: left;
  width: 33.333333%;
}


/* 3. Media Queries - Note - Code above is formatted for large/desktop screens */
/* 3.1 Medium screens - Formatting for tablet screens */
@media only screen and (max-width: 900px) {
  /* 2 Gallery images per row */
  .responsive {
    width: 50%;
  }

  nav {
    display: none;
  }

  #hamburger {
    width: 25px;
    float: right;
    margin-top:3em;
    margin-right: 2em;
    visibility: visible;
  }
}

/* 3. Small screens - Formatting for mobile screens */
@media screen and (max-width: 500px) {
  /* 1 Gallery image per row */
  .responsive {
    width: 100%;
  }

  a img#logo {
    width: 15em;
    padding-top: 1.5em;
    display: inline-block;
    margin: auto;
  }

  /* Hide nav links and show hamburger menu */
  nav {
    display: none;
  }
  #hamburger {
    width: 25px;
    float: right;
    margin-top:3em;
    margin-right: 2em;
    visibility: visible;
  }

  /* Wrap columns/content */
  main {
    flex-wrap: wrap;
  }

  main.cols-12 {
    display: flex;
    flex-wrap: none;
  }

  main.cols-12 section.col1,
  main.cols-12 section.col2,
  main.cols-12 section.col3,
  main.cols-12 section.col4,
  main.cols-12 section.col5,
  main.cols-12 section.col6,
  main.cols-12 section.col7,
  main.cols-12 section.col8,
  main.cols-12 section.col9,
  main.cols-12 section.col10,
  main.cols-12 section.col11,
  main.cols-12 section.col12 {
    width: 100%;
  }
}