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

}

.header_container {
display: flex;
flex-flow: row wrap;
border: 3px solid #373d20;
height: 300px;
background-image: url(sunrise.jpg);
background-position: center;
background-size: cover;


}


#logo {

    width: 200px; height: 200px;
    background-image: url("caricature.jpg");
    background-position: center;
    background-size: contain;
    border-radius: 50%;
    border: 3px solid #373d20;
    margin: 25px;
    position: relative;
    left: 120px;
    top: 25px;
}


.navigation {

border: 4px solid #373d20;
height: 100px;
padding: 30px 0px;
position: relative;
margin-top: 30px;

}

.navigation a {
font-size: 20pt;
padding: 20px 30px;
text-decoration: none;
background-color: #373d20;
color: whitesmoke;
margin-left: 15px;


}

.navigation a:hover {

opacity: 75%;
color: blue;

}





body {
padding: 2em;
background-image: linear-gradient(#86ac9c, #e8dab2) ;
border: 6px inset #373d20;
height: 2000px;
}




h2 {

    font-size: 24pt;
    margin: 10px 10px;
    padding-top: 30px;

}

#name {
    font-family: 'Allerta Stencil', sans-serif;
    font-size: 36pt;
    bottom: 125px;
    color: white;
    right: 500px;
    position: absolute;
    top: 40%;
    left: 52%;
    transform: translate(-50%, -50%);
    
    
}


#more-info {

    text-align: center;
    text-decoration: underline;
    font-style: italic;
}


#docs {

    text-align: center;
    text-decoration: underline;
    font-style: italic;

}

#docbox {
    display: flex;
    padding-top: 25px;
    text-align: center;
    justify-content: center;
    line-height: 1.5;
    
}



#doc-links {
    text-decoration: none;
    font-size: 18pt;
    padding-top: 25px;
 
}

#docbox1 {
    width: 800px;
    border: 3px solid #373d20;
    height: 200px;
    }
    
    #docbox2 {
    width: 800px;
    height: 200px;
    border: 3px solid #373d20;
    
    }
    
    #docbox3 {
    
    width: 800px;
    height: 200px;
    border: 3px solid #373d20;
    
    }

#welcome {

padding: 1em;
font-size: large;
text-align: center;
font-size: 16pt;
text-align: center;
}

  #pictures {

    border: 4px solid grey;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-evenly;
    gap: 12px;
    padding: 12px;
    background-color: #e8dab2;

  }

  .picture_item {

    border: 4px solid grey;
    min-height: 260px;
    min-width: 350px;
    flex: 1 0 25%;
    border-style: groove;


  }

  #pictures div {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: white;
    font-size: 14pt;
    text-align: center;
    text-shadow: 2px 2px 5px black;
    opacity: .5;
    
    
  }

  #pictures div:hover {

    opacity: 1;

  }

#pictures div:nth-child(1) {

background-image: url(scuba.jpg);


}

#pictures div:nth-child(2) {

    background-image: url(skydive.jpg);
    
    }

#pictures div:nth-child(3) {

    background-image: url(camp.jpg);
        
    }
#pictures div:nth-child(4) {

        background-image: url(pc.jpg);
            
    }
#pictures div:nth-child(5) {

    background-image: url(breach.jpg);
            
    }

#pictures div:nth-child(6) {

    background-image: url(aav.jpg);
            
    }