/* reset rule for my styles
    set all elements to a base of zero
        for margin and padding */

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

        header{
            width: 100%;
            height: 83px;
            background-color: #426B69;
            border: 0px solid black;
            position: relative;
        }

        h1{
            position: absolute;
            color: #B5CA8D;
            font-size: 3em;
            text-shadow: 2px 2px 2px black;
            border: 0px solid green;
            font-family: Verdana, Geneva, Tahoma, sans-serif;
            top: 15%;
            left: 1%;
            letter-spacing: 10px;
            
        }

        header ul{
            position: absolute;
            border: 0px solid red;
            top: 0%;
            left: 60%;
            text-decoration: none;
            list-style: none;
            overflow: hidden;
            display: flex;
            justify-content: center;
            width: 40%;
            color: #A6BD89;
            font-size: 1em;
            padding-left: -30px;
            padding-right: -30px;
            
            
        }

        header li{
            text-decoration: none;
            margin: 20px;
        }

        header a{
            text-decoration: none;
            color: #A6BD89 ;
        }

        header a:visited{
            color: #A6BD89;
        }

        header a:hover{
            color: #A6BD89;
        }

        article{
            width: 100%;
            height: 100px;
            background-color: #222E50;
            border: 0px solid tomato;
            position: relative;
        }

        article img{
            position:absolute;
            width: 8%;
            height:100px;
            display: flex;
            
            
        }

        article p{
            float: right;
            color: white;
            display: flex; 
            
            font-size: 1.5em;
            margin-left: 150px;
        }

        article #author{
            position: absolute;
            bottom: 15%;
            right: 10%;
            color: white;
            font-style: italic;
            font-size: 1.5em;
        }

        #bikes{
            width: 100%;
            height: 620px;
            background-image: url(../images/bikegroup.jpg);
            background-size: cover;
            border: 0px solid olive;
            position: relative;
        }

        #bikes .flex_parent{
            
            border: 0px solid grey;
            min-height: 200px;            
            display: flex;
            flex-flow: row wrap;
            justify-content: center;
            transform: translate(0px,340px);
            
            
        }

        #bikes .flex_child{
            
            border: 4px solid white;
            border-radius: 10px;
            text-shadow: 0px 0px 2px hsl(0, 0%, 50%);
            min-height: 220px;
            margin: 8px;
            flex: 1 0 20%;
            text-align: center;
            color: white;
            font-size: 1.5em;
        }

        #bikes .flex_child a:visited{
            color: white;
        }

        .flex_child:nth-child(1){
            background-image: url(../images/bike1.jpg);
            background-size: cover;
            background-repeat: no-repeat;
            background-position: 0px 0%, 0px 0px;
            
            
        }

        #bikes .flex_child:nth-child(1) a{
            background-image: url(../images/bike1.jpg);
            background-size: cover;
            background-repeat: no-repeat;
            background-position: 0px 0%, 0px 0px;
            
            display: block;
            height: 250px;
            border: 4px solid white;
            border-radius: 2px;
            filter: grayscale(100%);
        }

        .flex_child:nth-child(1) a:hover{
            filter: none !important;
            color: yellow;
            border: 4px solid yellow;
            
        }


        #bikes .flex_child:nth-child(2) a{
            background-image: url(../images/bike1.jpg);
            background-size: cover;
            background-repeat: no-repeat;
            background-position: 0px 0%, 0px 0px;
            filter: grayscale(100%);
            display: block;
            height: 250px;
            border: 4px solid white;
            border-radius: 2px;
        }

        .flex_child:nth-child(2) a:hover{
            filter: none !important;
            color: yellow;
            border: 4px solid yellow;
            
        }

        #bikes .flex_child:nth-child(3) a{
            background-image: url(../images/bike1.jpg);
            background-size: cover;
            background-repeat: no-repeat;
            background-position: 0px 0%, 0px 0px;
            filter: grayscale(100%);
            display: block;
            height: 250px;
            border: 4px solid white;
            border-radius: 2px;
        }

        
        .flex_child:nth-child(3) a:hover{
            filter: none !important;
            color: yellow;
            border: 4px solid yellow;
            
        }

        #bikes .flex_child:nth-child(4) a{
            background-image: url(../images/bike1.jpg);
            background-size: cover;
            background-repeat: no-repeat;
            background-position: 0px 0%, 0px 0px;
            filter: grayscale(100%);
            display: block;
            height: 250px;
            border: 4px solid white;
            border-radius: 2px;
        }

        .flex_child:nth-child(4) a:hover{
            filter: none !important;
            color: yellow;
            border: 4px solid yellow;
            
        }

        
        
        
    

        #bottom{
            width: 100%;
            height:100px;
            background-color: #426B69;
            border: 0px solid aquamarine;
            position: relative;
        }

        #bottom h2{
            position: absolute;
            top: 0px;
            left: 43%;
            font-size: 2em;
            
        }



        #bottom ul{
            position: absolute;
            left: 0%;
            bottom: 0%;
            list-style: none;
            overflow: hidden;
            display: flex;
            border: 0px dashed blue;
            width: 100%;
            height: 70%;
            justify-content: center;
        }

        #bottom li{
                    
            margin: 30px;
        }

        #bottom li a{
            font-size: 1.5em;
            color: white;
        }

        footer{
            width: 100%;
            height: 50px;
            background-color: #426B69;
            border-top: 2px solid black;
            position: relative;
                       
            
        }
        footer h2{
            position: absolute;
            top: 20%;
            left: 33%;
            
        }