@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Audiowide&family=Bree+Serif&family=Comfortaa:wght@600&family=Courgette&family=Girassol&family=Lobster&family=Rubik:wght@300;400&family=Russo+One&family=Suez+One&display=swap&family=Days+One&display=swap');

/*
font-family: 'Audiowide', cursive;
font-family: 'Bree Serif', serif;
font-family: 'Comfortaa', cursive;
font-family: 'Courgette', cursive;
font-family: 'Girassol', cursive;
font-family: 'Lobster', cursive;
font-family: 'Rubik', sans-serif;
font-family: 'Russo One', sans-serif;
font-family: 'Suez One', serif;
font-family: 'Days One', sans-serif;
*/


/* the onclick JS toggles the .repsonsive class from display none (.navigation li) to display block because the repsonsive class is added to the end of the class list like this in HTML Line #6.
  <ul class="navigation responsive">
  */
.responsive li {
	display: block;
}

#format {
  margin: 0 auto;
  max-width: 960px;
}

header {
  background-color: #36454f;
  padding: 20px;
  color: white;
  text-align: center;
  font-size: 20px;
  font-family: 'Days One', sans-serif;
}

.head-grid {
    display: grid;
    grid-template-columns: 225px 1fr;
}
.head-grid img {
    grid-column: 1;
    border: 5px solid white;
}

header img {
    width: auto;
    height: 150px;
}

.header-text {
    text-align: left;
}

aside {
    display: none;
}

nav {
	background-color: #396E94;
	text-align: center;
	box-shadow: 0 2px 15px gray;
    font-family: 'Roboto', sans-serif;
}
nav ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
}
nav ul li a {
	display: block;
	color: #fff;
	text-align: center;
	padding: 0.75rem;
	text-decoration: none;
	font-size: 0.95rem;
}
nav a:hover {
	background-color: #bbb;
	color: #36454f;
}

nav li:first-child {
	display: block;
}
nav li {
	display: none;
}

h1 {
    font-size: 1.3em;
}

h2 {
    font-size: 1.1em;
    color: #396E94;
    display: block;
}

h3 {
    color: #396E94;
}

h4 {
    font-size: 20px;
}

p {
    font-family: 'Roboto', sans-serif;
}

a {
    text-decoration: none;
    color: #0057b8;
}

main {
    margin: 0 10px 0 10px;
    font-family: 'Roboto', sans-serif;
    min-height: calc(100vh - 274px);
  }


footer a {
    color: #FFFFFF;
  }

footer {
  text-align: center;
  clear: both;
  background-color: #36454f;
  padding: 20px 0 5px 0;
  color: #FFFFFF;
  font-family: 'Roboto', sans-serif;
}

.gallery {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 1em;
    row-gap: 2em;
    
}

figure {
    margin: 0;
    padding: 0;
}

figure img {
    justify-content: center;
    align-items: center;
}

figcaption {
    background-color: lightgray;
    color: #396E94;
    padding: 1rem;
    text-align: center;
    font-size: 20px;
    font-weight: bold;
}

#image-1 {
    grid-column: 1;
    grid-row: 1;
    width: 300px;
}

#image-2 {
    grid-column: 1;
    grid-row: 2;
    width: 300px;
}

#image-3 {
    grid-column: 1;
    grid-row: 3;
    width: 300px;
}

#image-4 {
    grid-column: 1;
    grid-row: 4;
    width: 300px;
}

#image-5 {
    grid-column: 1;
    grid-row: 5;
    width: 300px;
}

#image-6 {
    grid-column: 1;
    grid-row: 6;
    width: 300px;
}

#image-7 {
    grid-column: 1;
    grid-row: 7;
    width: 300px;
}

#image-8 {
    grid-column: 1;
    grid-row: 8;
    width: 300px;
}

#image-9 {
    grid-column: 1;
    grid-row: 9;
    width: 300px;
}

data-src {
    width: 300px;
    height: 400px;
}