*{
    box-sizing: border-box;
}
body{
   font-family: Verdana;
    margin: 0px; background: repeating-radial-gradient(#00FFFF, #009688, #607D8B, #4A86E8, #009688 );
}
header{
     font-family: Georgia;
    display: grid; grid-row: 1/3; grid-column: 2/8;
}
header a{
    text-decoration: none; color: #169ace; background-color: none;
}
header h1{
    line-height: 240%; background: none;
    background-repeat: no-repeat; padding-left: 0.5rem; height: 120px;
    margin: 0; background-attachment: fixed;
}
nav li{
    display: grid; grid-row: 3/4; grid-column: 3/8; width: 60%; text-decoration: underline; outline: black;
}
nav a{
     color: #169ace; text-align: right;
    text-decoration: none;
}
h1{
    color: #169ace; text-align: left; text-decoration: none;
}
nav { 
    font-weight: bold; 
    display: grid; grid-row: 3/4; grid-column: 3/8; text-decoration: none;
    padding-right: 5rem;
}
nav ul{
    list-style: none; display: flex; 
    flex-flow: row nowrap;
}
h2{
    color: #424242; font-family: Georgia;
    display: grid; grid-column: 2/8; text-align: center;
}
main{
    padding: 1px 0px 1px;
    padding-left: 2em; padding-right: 2em; display: block;
    display: grid; grid-row: 4/7; grid-column: 2/8; align-content: center;
}
.bk{
    background: repeating-radial-gradient(#f69d3c, #3f87a6 50px);
}
}
footer{
     display: grid; grid-row: 7/8; grid-column: 2/8;
    font-size: .70em; font-style: italic; text-align: left; padding: 1em;
}
footer li{
    padding-right: 5rem;
}
footer section{
    width: 50%; float: left;
}

footer li{
    text-align: right; list-style: none;
}
section{
    width: 33%; float: left; padding-left: 5rem;
}

#wrapper{
   display: grid; grid-auto-rows: 0px auto; grid-template-columns: minmax(2px,1fr) repeat(6, minmax(30px, 175px)) minmax(2px, 1fr);
  
}

#banner{
background-image: url("banner.jpg");
height: 300px; background-size: cover; 
background-repeat: no-repeat; background-position: top;
display: grid; grid-row: 1/3; grid-column: 1/-1;
}
#instruments{
    background-image: url("instruments.jpg"); border: 5pt;
   margin-left: 30%;
    height: 300px; background-size: cover;
    background-repeat: no-repeat; background-position: bottom;
}
#abe{
    background-image: url("abe.jpg"); border: 5pt;
   
    height: 300px; background-size: cover;
    background-repeat: no-repeat; background-position: center; 
}
#piano{
    background-image: url("piano.jpg"); border: 5pt;
   
    height: 300px; background-size: cover;
    background-repeat: no-repeat; background-position: center; 
}
#oldmen{
    background-image: url("oldmen.jpg");border: 5pt;
   
    height: 300px; background-size: cover;
    background-repeat: no-repeat; background-position: center; 
}

@media screen and (max-width: 992px){
    #wrapper{
        display: grid; grid-auto-rows: 0px auto; grid-template-columns: minmax(2px,1fr) minmax(30px, 768px) minmax(2px, 1fr);
       
     }
     section{
        display: flex; flex-direction: column;
    }
    #instruments{
        background-image: url("instruments.jpg"); border: 5pt;
       
        height: 300px; background-size: cover;
        background-repeat: no-repeat; background-position: bottom;
    }
    
    
}
@media screen and (max-width: 768px){
    #wrapper{
        display: grid; grid-auto-rows: 0px auto; grid-template-columns: 100%;
       
     }
     section{
        display: flex; flex-direction: column;
    }
    #instruments{
        background-image: url("instruments.jpg"); border: 5pt;
     
        height: 300px; background-size: cover;
        background-repeat: no-repeat; background-position: bottom;
    }
    
}