body, header, nav, main, footer, h1, div, img, ul{
    margin:0;
    padding:0;
    border:0;
}

body{
    background-color: rgb(135, 4, 4);
}

img {
    max-width: 100%;
    display: block;
    clear:left;
}
/*style rules for mobile viewport*/

/*style rules for header*/
header, img{
    top:0;
    
}

nav{
    padding:1%;
    margin-bottom: 1%;
    
}

nav ul{
    list-style-type: none;
    text-align: center;
}

nav li{
    
    font-size:1.5em;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight:bolder;
    border-top: 1px solid #fff;
}
a:hover {
    color: #3300ff;
    background-color: #000;
  }

a:active{
    color: rgb(135, 4, 4);
}


/*shows mobile, hides tablet-desktop*/
.mobile{
    display:block;
}
.tablet-desktop{
    display:none;
}

/*style rules for navigation area*/
nav{
    background-color: rgb(135, 4, 4);
}


.mobile-nav a{
    color: #fff;
    text-align:center;
    font-size: 2em;
    text-decoration: none;
    padding: 3%;
    display: block;
}

.mobile-nav a.menu-icon{
    display: block;
    position:absolute;
    right: 0;
    top: 0;
}

.menu-icon div{
    height: 50px;
    width: 50px;
    background-color:rgb(135, 4, 4);
}
.tab-desk, #menu-links{
    display:none;
}

main{
    clear:left;
    background-color: #fff;
    padding: 2%;
    font-size: 1.25em;

    background:linear-gradient(to right, #ccc, rgb(135, 4, 4))
}


footer p{
    font-size: 0.75em;
    text-align: center;
    color:#fff;
    padding:0 1em;
    clear: left;
}

#sale{
    color:linear-gradient(to right, #ccc, rgb(135, 4, 4));
}



@media screen and (min-width: 630px){

    /*Tablet viewport: Show tablet-desktop class, hide mobile class*/
    .tablet-desktop{
        display: block;
    }
    
    .mobile{
        display:none;
    }
    .mobile-nav{
        display:none;
    }

    nav li{
        border-top:none;
        display:inline-block;
        
    }
    /*grid for cars*/
    .grid{
        display: grid;
        grid-template-columns: auto auto auto;
        grid-gap: 20px;
        align-content: center;
    }

    
    footer p a{
        color:#fff;
        text-decoration: none;
    }
    
    #contact{
        
        text-align: center;
        clear:left;
    }
    #contact a {
        color: #666600;
        text-decoration: none;
    }
    
    .map{
        width:600px;
        height: 450px;
        
    }

}
/*images for social tags*/
.social img{
    display:inline-block;
    padding: 4%;
}

/*Style rules for form elements*/
fieldset input{
    margin-bottom: 2%;
}
fieldset legend{
    font-weight: bold;
    font-size: 1.25em;
}
label{
    display: block;
    padding-top: 3%;
}
 form #submit{
    margin-top: 0%;
    margin-bottom: 0%;
    margin-left: auto;
    margin-right: auto;
    display: block;
    padding: 3%;
    background-color: #fff;
    font-size: 1em;
}


/*Media Query for Desktop Viewport*/
@media screen and (min-width:769px){
    /*Desktop Viewport: Style rule for header*/
    header{
        width:25%;
        float:left;
        padding-bottom:0
    }
    nav{
        float:right;
        width:70%;
        margin: 4em 1em 0 0;
    }
    nav ul{
        text-align: right;
    }

    nav li{
        border:none;
    }
    nav li a{
        padding: 0.5em 1em;
        color: #fff;
        text-decoration: none;
        text-align: center;
    }

    main{
        clear:left;
    }
    
    main h1{
        font-size: 1.8em;
    }
    .thumbnail{
        border-radius: 3%;
        
    }

    .thumbnail:hover {
        width:500px;
        height:auto;
        display:block;
        z-index:999;
        cursor: pointer;
        border-radius: 30%;
        transition-property: all;
        transition-duration: 0.3s;
        transition-timing-function: ease;
        
   }

   #sale{
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
   }


}

@media screen and (min-width: 1921px){
    #container{
        width:1920px;
        margin: 0 auto;;
    }

}

/*Media query from Print*/
@media print{
    body{
        background-color: #fff;
        color:#000;
    }
}