@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 - 476px);
  }

#heroimage {
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 10px;
    width: 100%;
}

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 {

    margin-left: 3%;
    
}

picture 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;
}

form {
    border: #0057b8 6px;
    border-radius: 5px;
    background-color: lightgray;
    padding: 15px;
    margin-bottom: 25px;
}

.thankyou {
    text-align: center;
    margin-top: 100px;
}


div input:invalid {
	border-left: #EE4949 solid 6px;
}
div input:valid {
	border-left: #30AB3F solid 6px;
}

label {
    display: inline-block;
    width: 165px;
    font-weight: bold;
}

#danger label {
    margin-left: 10px;
}

.submit {
    background-color: #396E94;
    color: white;
    padding: 5px 15px 5px 15px;
}