* {
    box-sizing:border-box;
}

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

}
nav{
grid-column:1 / 4; 
background-repeat: no-repeat;
background-color:#3B2105;
background-image:
url( logo.jpg); 
background-size: 5%;
padding-left:10%; 
padding-right:30px; 
font-family: 'Italiana', sans-serif;
font-family: 'Philosopher', sans-serif; 
position:sticky; }

nav a:hover{
    background-color:#BA1C21;
}

nav ul li {
display:inline-block; 
padding-right:10%; 
margin-top:30px; 
font-size:25px; 
}
nav a{
    text-decoration: none;
    background-color:#3B2105;
    color:#EEBF88;  
}
a:hover{
    color:blue; 
}
main{
grid-column: 1 / -1;
text-decoration: none;
}

header{
    grid-column:1 / 4; 
    background-image:
    url(pianohero.jpg); 
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    display:flex; 
    font-size:30px; 

 
}
footer{
    grid-column:1 / 4;
    background-color:#3B2105;  
  width:100%; 
  display:flex; 

}
main a{
    background-color:rgba(219,219,219,0.7); 
 justify-content: center;
 height: 40px;px; 
width:40px; 
padding-top:2px; 
padding-left:10%; 
font-size:60px; 
font-family: 'Italiana', sans-serif;
font-family: 'Philosopher', sans-serif; 
 
}
.box {
float: left;
width: 40%;
height:300px; 
margin-left: 5%;
margin-top: 50px;
background-image: 
url(piano.jpg);
}
.box2{
    float: left;
    width: 40%;
    height:300px; 
    margin-left: 5%;
    margin-top: 50px;
background-image:
url(tuninghero.jpg); 
}
main div{
font-size:30px; 
 
}
header p{
background-color:rgba(219,219,219,0.7); 
 justify-content: center;
 height:128px; 
width:400px; 
padding-top:50px; 
padding-left:10%; 
font-size:40px; 
font-family: 'Italiana', sans-serif;
font-family: 'Philosopher', sans-serif; 
}
main a{
    text-decoration: none;
    color:black; 
}