@import url('https://fonts.googleapis.com/css?family=Yantramanav:400,700');
/* adding in a covered background image, and changing the font */
 body {
     background-image: url("nekstbg.jpg");
     background-size: cover;
     font-family: 'Yantramanav', sans-serif;

}
/* floating the logo in the nav bar */
 header .logo{
     float: right;
}
/* adding the title to line up with nav bar */
 h1{
     top:25px;
}
/* nav bar type and position */
 header ul, h1{
     list-style-type: none;
     position: relative;
     margin: 0;
     padding: 0;
     overflow: hidden;
}
/* lining up the nav bar with logo */
 header ul {
     top:-20px;
}
/* nav bar on the right side */
 header li {
     float: right;
}
/* changing the font color, and style of nav bar */
 header li a {
     display: block;
     color: white;
     text-align: center;
     padding: 14px 16px;
     text-decoration: none;
     font-size: 20px;
}
/* changing the hover color of the links */
 header li a:hover {
     color: #111;
 }
 /* highlighting the current url on the page */
 .active {
     color: red;
}
/* adding in a flex box to show portfolio */
 #main {
     margin: auto;
     display: flex;
     justify-content: center;
}
/* Adding in images for the flexbox, and  */
 #images {
     display:flex;
     flex-wrap:wrap;
     justify-content: space-around;
}
/* adding a dark color to the header, and description area of images*/
#main h3, #main p {
    margin:0px;
    color:hsl(0,0%, 13%);
}
/* stylizing the flex box contents with color, and alignment */
 section {
     background-color: rgba(255,255,255, 0.8);
     margin:10px;
     width:400px;
     height:auto;
     text-align: center;
     border-top: 6px solid red;
     box-shadow: 5px 10px rgba(0,0,0, 0.3);
}
/* Selecting flexbox headers, and capitalizing, and changing the margin */
 section h3 {
     text-transform: capitalize;
     margin: 0;
}
/* resizing the images, and adding a shadow */
 #images img {
     width: 300px;
     max-height:300px;
     box-shadow: 5px 10px rgba(0,0,0, 0.03);
}
/* centering, and changing the color of the headers on the document */
 header h1, footer p a, footer, header h2 {
     text-align: center;
     color: white;
     text-transform: capitalize;
     font-size: 40px;
}
/* stylizing the link on the document */
footer p a:link {
     text-decoration: none;
}
/* stylizing the link on the document to not have underline, and hover color change*/
footer p a:hover {
     color:#111;
     text-decoration: none;
}
/* aligning the validators */
#validators {
	text-align: right;
}