/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
   @import url('https://fonts.googleapis.com/css2?family=Oswald&family=Source+Sans+Pro');
body {
  background-color: white;
  color: black;
  font-family: 'Source Sans Pro',sans-serif;
  font-size:20px;
}
h1,h2,h3,h4,h5,h6,nav#links {
  font-family: 'Oswald',sans-serif;
}
header a, nav a {
  text-decoration:none;
  color:black;
}
nav#icons a {
  color:#333;
}
header a:hover,nav a:hover,nav#icons a:hover {
  color:#777;
}

header img {
  max-width:100px;
  max-height:100px;
  width:auto;
  height:auto;
}
nav a:hover {
  text-decoration:underline;
}

/*Homepage type pages with 1 column*/
section#homecontent{
  display:block;
}

/*Navigation*/
nav ul {
  padding-inline: 0;
  display:block;
  text-align:center;
  margin:1rem auto;
  padding:0;
}
nav ul li {
  display:inline;
  text-transform:uppercase;
}
nav#links ul li:not(:last-of-type)::after {
  content:" - ";
}

nav#icons ul li {
  padding:0.5rem;
}



/*Article content*/
article h2 {
  text-transform: uppercase;
  letter-spacing:0.1em;
  text-align:center;
  margin-block-start:0.2em;
}

article img {
  max-width:100%;
  max-height:90vh;
  width:auto;
  height:auto;
  display:block;
  margin:auto;
}
article ul {
  margin-block-start: 0.5rem;
}
article p {
  margin-block: 0.5rem;
}
/*Random bits*/
.centered {
  text-align:center;
  margin-block-start:0;
}
section {
  margin:1rem 0.2rem 0.2rem 0.2rem;
}
/*Header*/
header {
  margin:0.2rem .2rem;
}
header img {
  vertical-align:middle;
}
header h1 {
  margin:0;
  display:inline-block;
  vertical-align:middle;
  font-size:3em;
}

/*Footer*/
footer {
  margin:0.2rem;
  padding-top:0.2rem;
  border-top:1px solid #ddd;
  color:#aaa;
  font-size:smaller;
}

footer a,footer a:visited,footer a:active, footer a:hover {
  color:#aaa;
}

/*Article type pages with 2 columns*/
section#maincontent{
  display: grid;
  grid-template-columns: 60% auto;
  grid-template-rows:auto auto;
  grid-gap:0.5rem;
}

#maincontent nav#links {
  position:sticky;
  align-self:start;
  top:0;
  right:0;
}

#maincontent nav#icons {
  position:sticky;
  align-self:flex-end;
  bottom:0;
  right:0;
}

#maincontent h2 {
  text-align:left;
  letter-spacing: normal;
  text-transform: none;
  margin-block-end:0;
}

#maincontent article {
  grid-row:span 2;
}

/*Gallery*/

section#gallerycontent {
  display:grid;
  grid-template-columns: 50% 50%;
  grid-gap:0.5rem;
}

#gallerycontent article p {
  margin-top:0.5rem;
}

#gallerycontent nav {
  grid-column:span 2;
}

#gallerycontent article {
  width: fit-content;
  margin: 0 auto;
}

@media screen and (max-width:600px) {
  section#maincontent {
    grid-template-columns: auto;
  }
  header h1 {
    font-size: 2em;
  }
  #maincontent nav#icons {
    bottom:unset;
  }
  section#gallerycontent {
    grid-template-columns: auto;
  }
  #gallerycontent nav {
    grid-column:span 1;
  }
}