/*
CSS Document used for progject 1 file default html, page1, page2, page3
Auther: William Frank
course: ITWP 1000
File; styles.css
Information on using external CSS style sheet is located in Chapter 3. Information on media queirs is located
in Chapter 7. Information on tables and CSS formatiing for tables is located in Chapter 8.
*/

#default header{
    text-align: center;
    border: solid;
    border-width: .4em;
    border-radius: 1em;
    border-color: black;
    background-color: #e7c0ac;
    font-family:  "Century Gothic","Franklin Gothic Medium" ,"Avant Garde";
    margin-bottom: 15px;
}

#default {
    background-image: url(images/denaliCartoon.jpg);
    background-size: 14em;
    background-repeat: repeat;
    background-attachment: fixed;
    min-height: 200vh;
    background-color: #7aaaac;
}
body{
    overflow-y: scroll;
    min-height: 200vh;
}


nav {
    text-align: center;
}

#main-navigation {
    border: double;
    border-width: .6em;
    border-radius: 20px;
    border-color: #6D4C41;
    background-color: #e7c0ac;
}
#main2{
    width: 80%;
    max-width: 600px;
    margin: 40px auto 20px auto;
    min-height: auto;
    overflow-y: auto;
}
.nav-button {
    display: inline-block; 
    padding: 10px 15px;
    margin: 5px;
    text-decoration: none; 
    border-radius: 5px; 
    border: .3em solid;
    display: inline-block;
    border-color: 800000;
    transition: background-color 0.3s; 
    text-shadow: 0 1 3px;
    font-weight: bold;
    font-family: "Garamond", "Times New Roman", serif;
}

.nav-button:hover {
    transform: translateY(-4px);
        }

.home {
    border-color: #154734;
    color: #080808;
    background-color: #a7e0ab
}

.page1 {
    border-color: #7DD0F6;
    color: #080808;
    background-color: #ace5e7
}

.page2 {
    border-color: #A87B65;
    color: #080808;
    background-color: #e49d51
}

.page3 {
    border-color: #192A56;
    color: #080808;
    background-color: #9c9bdb
}


footer {
text-align: center;
background-color: #e7c0ac;
border: 2px solid black;        
width: 80%;
max-width: 600px;
margin: 40px auto 20px auto;
padding: 15px;
border-radius: 8px;
        }

#default main{

    text-align: left;
    background-color: #e7c0ac;
    border: 2px solid black;        
    width: 80%;
    max-width: 600px;
    margin: 40px auto 20px auto;
    padding: 15px;
    border-radius: 8px;
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: 2.5ch;
    text-shadow: #080808;
}


main{
    text-align: left;
    background-color: #e7c0ac;
    border: 2px solid black;        
    width: 80%;
    max-width: 600px;
    margin: 40px auto 20px auto;
    padding: 15px;
    border-radius: 8px;
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: 2.5ch;
    text-shadow: #080808;
}


h2, h3, h4, h5{
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
}

.photo-box-container {

    display: flex; 

    justify-content: center; 

    align-items: center; 
 
    flex-wrap: wrap; 
   
    gap: 10px; 
}

.photo-box-container img {
    width: 200px; 
    height: 400px;
    flex-basis: 32%;
    object-fit: contain; 
    
    
    aspect-ratio: 1 / 1; 
}

.military-photos{
    display: flex; 

    justify-content: center; 

    align-items: center; 
 
    flex-wrap: nowrap; 
   
    gap: 10px; 

}

.military-photos img{
    width: 300px; 
    height: 600px;
    flex-basis: 32%;
    object-fit: contain; 
    
    
    aspect-ratio: 1 / 1;
}