﻿
/* Master Styles */
body {

    margin: 50px;
}

.container {

    display: grid;
    grid-template-columns: 1fr;
}


/* Nav styles */
nav {
    position: fixed;
    top: 0
}


.nav-wrapper {
    display:  flex;
    justify-content: space-between;
    padding: 5px
}
.left-side{
   display: flex;

}

.nav-wrapper >.left-side > div {

    margin-right: 20px;
    font-size: 1.5em;
    text-transform: uppercase;
    
}

.nav-link-wrapper {
    height: 40px;
    border-bottom: 1px solid transparent;
    transition: border-bottom 0.5s;

}

.nav-link-wrapper a {
     color:#000080;
     text-decoration: none;
     transition: color 0.5s;
}

.nav-link-wrapper:hover {
    border-bottom: 1px solid black
}

.nav-link-wrapper a:hover {
     color: gold;


}
h1 { 
    font-family: Verdana,Arial,helvetica;
    font-size: 40px;
    color: #000080;
    text-align: center;
}

/* Portfoli styles */

.portfolio-items-wrapper {
    display: grid;
    grid-template-columns: 1fr  1fr 1fr;

}

.portfolio-item-wrapper {

    position: relative;
    width: 250px;
    height: 250px;
}


.portfolio-img-background {

    height: 400px;
    width: 200%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

}



.portfolio-item-wrapper1 {

    position: relative;
    width: 100px;
    height: 100px;
}


.portfolio-img-background1 {

    height: 700px;
    width: 1000%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

}
<style type="text/css">*{
        
    margin: 0;
    padding: 0;
}
    
    .background-image {
         background-image: url(charlotte.jpg);
         background-size: cover;
         background-repeat: no-repeat;
        
    }
    .background-image2 
    {
        background-image: url(image/clouds.jpg);
        background-size: cover;
        background-repeat: no repeat;
        font-size:1.5em;
        font-family:#F8F8FF;
    
    
    }
    .background-image3 
    {
        background-image: url(image/N777iU.jpg);
        background-size: cover;
        background-repeat: no repeat;
        font-size:1.5em;
        font-family:#F8F8FF;}
        
        .background-image4
        {
        background-image: url(image/sports.jpg);
        background-size: cover;
        background-repeat: no repeat;
        font-size:1.5em;
        font-family:#F8F8FF;}
        
         .background-image5 
    {
        background-image: url(image/Harley.jpg);
        background-size: cover;
        background-repeat: no repeat;
        font-size:1.5em;
        font-family:#F8F8FF;
    
    
    }
        
</style>


