* {
    padding: 0; margin: 0; border: 0; box-sizing: border-box;
}

body {
    background-color: rgba(11, 11, 83, 0.712);
    min-height: 100vh;
    font-family: 'Oswald', sans-serif;
}

#container {
    width: 80%; min-height: calc(100vh - 40px); 
    margin: 20px auto;
    background-color: rgba(56, 26, 25, 0.397);
    border: 4px solid rgb(36, 35, 35);
}

header {
    background-color: rgba(77, 102, 245, 0.747);
    width: 80%;
    padding: 25px 0px;
    margin: 20px auto;
    text-align: center;
    color: ivory;
    outline: 4px solid rgba(52, 8, 212, 0.459);
    outline-offset: -4px 4px;
}

h1 {
    text-transform: lowercase;
    text-shadow: 4px 4px rgba(0, 0, 0, 0.699);
}

p {
    padding-top: 7px;
    text-shadow: 2px 2px rgba(0, 0, 0, 0.699);
}

/* image rules */

#images {
    text-align: center;
}

#images figure {
    width: 450px; height: 450px;
    display: inline-grid;
}

#images a {
    display: block;
    width: 100%; height: 100%;
    background-size: 100%;
}

#images figure:nth-child(1) a {
    background-image: url(/navexamples/photos/navphoto1.png);
}

#images figure:nth-child(2) a {
    background-image: url(/navexamples/photos/navphoto2.png);
}

#images figure:nth-child(3) a {
    background-image: url(/navexamples/photos/navphoto3.png);
}

#images figure:nth-child(4) a {
    background-image: url(/navexamples/photos/navphoto4.png);
}

#images figure:nth-child(5) a {
    background-image: url(/navexamples/photos/navphoto5.png);
}

#images figure:nth-child(6) a {
    background-image: url(/navexamples/photos/navphoto6.png);
}