* {
    box-sizing:border-box;
}

#wrapper{
    display:grid; 
    grid-template-columns: 1fr 1fr; 
    grid-template-rows: 100px 350px 400px 200px; 
    margin:20px; 
    background-color:black; 
  

}
.container{
    margin-left:auto; 
    margin-right:auto; 

}
nav{
grid-column:1 / 4; 
background-repeat: no-repeat;
background-color:#3B2105;
background-size: 5%;
padding-left:12%; 
padding-right:30px; 
font-family: 'Italiana', sans-serif;
font-family: 'Philosopher', sans-serif; 

}

P{
    margin-top:20px;
    font-size:50px;  
    padding-left:40px; 

}
a{
    color:white; 
    text-align: justify;
}

nav a:hover{
    background-color:white;
    color:black; 

}

h2{
    color:white; 
    text-align:center; 

}
nav ul{
  display:flex; 
}
nav ul li {
display:inline-block; 
padding-right:50px; 
padding-left:50px; 
margin-top:30px; 
font-size:25px; 

}
nav a{
    text-decoration: none;
    background-color:#3B2105;
    color:#EEBF88; 

    
}
a:hover{
    color:white; 

}
main{
display: subgrid;
grid-template-columns:1fr 1fr 1fr 1fr; 
grid-template-rows: 400px 300px 600px; 
grid-column: 1 / 3;
grid-row: 3 / 4;
text-decoration: none;
background-color:black; 
list-style-type: none; 
gap:2px; 

}
main div li a{
    color:#EEBF88; 
    text-shadow: 10px 2px black; 
    margin-right:80%; 
    font-size:80px; 
}
table{
    margin: 0 auto; 
    width:100%; 
    border-collapse: collapse; 

}
td, th{
   padding:2px;
   border: none; 
   
}
header{
    grid-column:1 / -1; 
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;   
}

img{
    
    width:100%; 
    height:500px
    
}
dl a{
    font-size:20px; 
}
#text{
    text-align: left;
}

td{
   margin:none; 
    text-align: center;
    background-color:white; 
    color:black; 
    

}

tr {

    background-color:black; 
    color:white; 
 
}
main a{
    display: inline-block;
 justify-content: center;
 height: 40px;
width:40px; 
padding-top:2px; 
padding-left:10%; 
font-size:60px; 
font-family: 'Italiana', sans-serif;
font-family: 'Philosopher', sans-serif; 
 
}
.box {
grid-column: 1 / 1; 
float: left;
width: 40%;
height:300px; 
margin-left: 5%;
margin-top: 50px;
background-image: 
url(repairs.jpg);
}
footer{
    grid-column:1 / -1;
    display:grid; 
   background-color:#3B2105;
  margin-top:50px; 
}

header h2{
    font-family:'Philosopher', sans-serif ;
    width:100%; 
    padding-left:50px; 
    padding-right:50px; 
}
.box2{
    grid-column: 2 / 5; 
    float: left;
    width: 40%;
    height:300px; 
    margin-left: 6%;
    margin-top: 50px;
   background-position: center; 
background-image:
url(tuninghero.jpg); 

}
main div{
font-size:50px;
text-decoration: none; 
}
    form{
    
        display:grid; 
        grid-template-rows: auto ;
        grid-template-columns: 200px 1fr;
        gap: 0.75rem;
        width:100%;   
        border:none; 
        color:#EEBF88;
        padding:100px;  
    }
    input:focus{
        font-size:1rem; 
        padding:10px; 
        color:#666666; 
        background-color:#fafafa; 
        background-color:lightgray;
        border: none;
        outline:none; 
        font-family: 'Philosopher', sans-serif; 
    }

main dl{
    text-align:center;
}
p{
    color:white; 
}
header p{
background-color: rgba(128, 128, 128, 0.5);
 justify-content: center;
 height:128px; 
width:400px; 
padding-top:50px; 
padding-left:10%; 
font-size:60px; 
margin-bottom:80%; 
font-family: 'Italiana', sans-serif;
font-family: 'Philosopher', sans-serif; 
}

main a{
   
    text-decoration: none;
    color:black; 
    grid-template-columns: 1fr 1fr;
}
a{
    color:white; 
}
dl{
    font-size:25px;
    color:#EEBF88; 
    box-sizing: 2px green solid;
  width:100%; 
  text-align:center; 

}
h2{
    margin-left:50%; 
    font-size:80px; 
    width:100%; 
}
.centered{
    position: absolute; 
    top:50%; 
    left:50%; 
    transform:translate(-50%, -50%); 

}

main a{
    color:red; 
    font-size:15px; 
    float:right; 
}
body h2{
   float:right; 
   font-size:40px; 
}
.centered {
    text-shadow: 10px 2px black; 
    position: absolute;
    top: 50%;
    color:#EEBF88; 
    left: 50%; 
    text-align:center; 
    font-size:800%; 
    font-family:'Philosopher', sans-serif ; 
    width:100%; 
    background-color:white; 
    opacity: 0.5;
  }
  .index{
    font-size:10px; 

  }
input{
    border:none; 
    background-color:#f0f0f0; 
background-color:#fafafa; 
}
main table td{ 
    padding-top:90px; 

font-family:'Philosopher', sans-serif ; 
}
td{
    padding-right:70px; 
    font-size:50px; 
    color:white; 
    background-color:black; 
}

#mySubmit{
    font-family: 'Philosopher', sans-serif; 
    padding:10px; 
    width:10rem;  
    background-color:#f0f0f0; 
    background-color:#fafafa; 
    color:#666666;
    }
form{
margin:40px; 
width:70%; 
    margin-right:auto; 
    margin-left:auto; 
    padding:1rem; 
    text-align:center;
    font-size: 20px; 
    font-family: 'Philosopher', sans-serif; 

}
@media only screen and (max-width: 992px){

    main table tr{
        font-size:10px; 

    }
footer dl{
    background-color:#3B2105; 
}

    #about{
        margin-top:1rem; 
       background-image:none; 
      
    }
main a{
background-color:transparent; 
}
    body{
        background-color:black; 
       
    }
   nav ul li{
font-size: 19px;
text-align: left; 
padding-right:25px; 
padding-left:35px;

}
main div a {
    font-size:100px; 
  margin-left:20%; 
}
.box{
float:none; 
height:100px; 
 width:100%; 
background-image:none; 
background-color:#3B2105; 
margin:0px;
grid-row:1 / -1; 
margin-right:0px; 
border: 2px solid #EEBF88;

}
.box2{
    margin-right:0px; 
    margin:0px; 
    float:none; 
    width:100%;;
     height:100px; 
    grid-row:2 / 3; 
    background-color:#3B2105; 
    background-image:none; 
    text-decoration: none;
    border: 2px solid #EEBF88;
 
}
footer{
    background-color:black; 
    text-align:center; 
}
}
@media only screen and (max-width: 780px){
   body dl a{
    font-size:15px; 
   }
    body{
        padding:0px; 
        margin:auto; 
  
        
    }
    nav ul li{
        
        text-align:left; 
        font-size:15px;
        padding-right:15px; 
        padding-left:15px;
    }
#wrapper{
    margin:0px; 
}
    main div a {
        font-size:50px; 
      margin-left:50px; 

    }
nav ul li{
font-size:15px;
}


}