header {
background-color: #9370DB;
color: black;
text-align: center;
padding: 10px;
font-weight: 500;
}

h1 {
font-weight: 500;
text-align: center;
padding: 10px;
}

h2 {
color: black;
font-size: 25px;
font-weight: 200;
text-align: center;
padding: 10px;
}

h3 {
color: black;
font-size: 40px;
font-weight: bold;
text-align: center;
padding: 10px;
}


#container {
background-color: #F5F5F5;
color: black;
display: grid;
height: auto;
font-size: 15px;
font-weight: 200;
text-align: center;
padding: 10px;
line-height: 2.0;
}


.container-links {
font-weight: 200;
}

#navbar {
overflow: hidden;
background-color: #778899;
border-bottom: 1px solid #778899;
padding: 10px;
}

#navbar a {
float: left;
display: block;
color: white;
text-align: center;
padding: 10px 10px;
text-decoration: none;
}

#navbar a:hover {
background-color: purple;
color: pink;
}

#images {
display: grid;
grid-template-columns: auto auto auto;
margin-top: 10%;
text-align: center;
padding: 10px;
}

figure {
text-align: center;
width: auto;
height: auto;
}

figcaption {
text-align: center;
color: black;
font-size: 25px;
font-weight: bold;
font-style: italic;
}

img {
display: block;
margin: auto;
text-align: center;
width: auto;
height: auto;
}

footer {
position: fixed;
bottom: 0;
right: 0;
background-color: #778899;
box-sizing: border-box;
width: 100%;
height: 40px;
padding: 10px;
}

footer p {
color: black;
float: right;
padding-right: 10px;
font-style: italic;
font-weight: bold;
transform: translateY(-20px);
}

footer a {
text-decoration: none;
color: black;
float: right;
}

footer a:hover {
text-decoration: underline;
color: #B900E0;
}