@media screen {
    body{
        background-color: black;
       
    }
    
}


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

@media screen and (min-width: 320px) and (max-width:768px){ /* Mobile*/
    header {  float:none;
        width: 20%;
        margin: 0 20% 0 20%; }

    nav ul{
        display: inline-block; /*vertical Menu*/
       
    }
    nav li a {
        border-bottom: 1px solid white;
    }
    nav li:last-child{
        border-bottom: none;
    }
      .mainbox{
        display: flex;
        flex-direction:column;
        /*align-items:flex-start;*/
        background-color: black;
        margin: 10px;
        padding: 20px;
        font-size: 24px;
    }
    
    .mainbox div{
        height: auto;
        width: auto;
        border: 2px solid white;
        background: linear-gradient(to right, Red, black);
    }
    
    .Amey{  /* to hide a class from display for mobile device*/
        display:none;
    }
}

@media screen and (min-width: 769px){ /* Desktop*/
    header{
        width:20%;
        float: left;
        padding-bottom: 0;
    }
    nav{
        width: 70%;
        float: right;
    }
    nav ul{ 
        display: flex; 
        flex-direction: row;
        flex-wrap: wrap; /*Horizonal nav menu*/
        text-align: right;
    }
    nav li a {
        border-right: 1px solid white; /*Border for menus */
    }
    nav li:last-child{
        border-right: none; /*No Border for the last menus */
    }
     
    .mainbox{
        display: flex;
        flex-direction: row;
        /*align-items:flex-start;*/
        background-color: black;
        margin: 10px;
        padding: 20px;
        font-size: 24px;
    }
    
    .mainbox div{
        height: auto;
        width: 30%;
        border: 2px solid white;
        background: linear-gradient(to right, Red, black);
    }
   
 
}
ul {
  list-style-type:none;
  margin: 0;
  padding: 0;
  background-color: black;
  
}

li a {
  display: block;
  color: white;
 /* border: 2px solid white;*/
  width: 200px;
  padding: 8px 16px;
  text-decoration: none;
  font-size: medium; 
  font-family: Arial;
}

/* Change the link and background color on hover */
li a:hover {
  background-color:white;
  color:black;
}

h1 { color: white; font-size: xx-large; font-style: italic; font-family: Arial;
        }
h2 { color:white; font-size: large; font-family:Arial;
    }   
p{ color:white; font-size: medium; font-family: Arial;
    }

h2 a{
    color:white; font-size: large; font-family:Arial;
}
/* Contact page attributes */
 .ContactMain {
        display: flex;
        flex-direction: column;
        /*align-items:flex-start;*/
        background-color: black;
        margin: 10px;
        padding: 20px;
        font-size: 24px;
        width: 400px;
        align-self: flex-start;
}
.AmeyContact{
    display: flex;
    flex-direction: column;
    align-self:auto ;
    /*align-items:flex-start;*/
    border: 2px solid black;
    background-color: black;
    width: auto;
    
}
.AmeyContact a{
        color:white; font-size: large; font-family: Arial;
        width: 300;
}
.AmeyContact a:hover {
  background-color:white;
  color:black;
}
.AmeyContact iframe{
    width: 400px;
    height: 400px;
}

/*.Carshow{
   display: flex;
   flex-wrap: wrap;
    align-items:flex-start;
    border: 2px solid black;
    background-color: black;
    width: auto;  
}*/

.CarShow ul {
    display: flex;
   flex-wrap: wrap;
    /*align-items:flex-start;*/
    border: 2px solid black;
    background-color: black;
    width: auto; 
    margin: 2px;
    padding: 2px; 
    border: 2px solid white; 
}

.CarShow li {
  
  border: 4px solid white;
  padding: 10px 10px;
  
}