#wrapper {
      display:grid;
      grid-template-columns: minmax(0,960px) minmax(0,960px) minmax(0,960px)
      minmax(0,960px)minmax(0,960px);
      grid-auto-rows: auto;
      justify-content: center;
      text-align:center;
      margin-left:auto;
    margin-right:auto;
      }

    .website{ height: 460px;
      	background-image:url("websitebackground.jpg");
      	 background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      grid-row:2/2;
        grid-column:1/-1;
        padding-bottom: 2px;
        padding-top: 0px;
      }

       #headbar{height: 90px;
       	background-color: #424242;
        grid-row:1/2;
        grid-column:1/-1;
        margin-bottom: 0px;
         }

        .logo{height: 80px;
        	width: 100px;
    background-repeat: no-repeat;
    background-position: left;
    background-size: cover;
    padding-left: .5em;
    padding-right: .5em;
    margin-top: 3px;
    grid-row:1/2;
        grid-column:1/-1;}

        .shop{height: 60px;
          width: 50px;
  background-image: url(shop.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    padding-left: .5em;
    padding-right: .8em;
    margin-top: -70px;
    margin-left: 900px;
    grid-row:1/2;
        grid-column:1/-1;
      float: right;}

    .login{height: 70px;
          width: 40px;
  background-image: url(login.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    margin-left: 840px;
    margin-right: 100px;
    grid-row:1/2;
        grid-column:1/-1;
      float: right;
    margin-top: -70px;}

         .searchbar{height: 50px;
          width: 50px;
  background-image: url(searchbar.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    margin-top: -68px;
    margin-left: 765px;
    margin-right: 160px;
    grid-row:1/2;
        grid-column:1/-1;
      float: right;}

       .youtube{ grid-column:3/-1;
       	text-align: center; 
       	margin-top: 380px;
       	margin-left: -65px;}


body{margin:0px;}

nav{text-align: center;
	margin-bottom: 1px;
      margin-top:1px;
	grid-row:3/3;
        grid-column:1/-1;
	display:inline-block;
	font-weight: bold;
margin-right: 130px;
margin-left: 130px;
}

nav a{color:#FFFFFF;
	text-decoration:none;
padding: 2px 6px 2px 6px;
background-color:#434343;

}

nav ul{list-style-type:none;
flex-flow:row nowrap; display:flex;

}
nav ul li {width: 40%;margin-right: 60px;}

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

main{text-align: center;
  justify-content: center;
  margin-right: 25px;
	grid-row:4/4;
        grid-column:1/-1;
}

.mug{background-position: center;
  background-size: cover;
  background-image: url(mug.jpg);
  height:300px;
  width: 250px;
margin-left: 60px;
}

.shirt{background-position: center;
  background-size: cover;
  background-image: url(shirt.jpg);
  height:300px;
  width: 250px;
  margin-top: -300px;
margin-left: 340px;
}

.sticker{background-position: center;
  background-size: cover;
  background-image: url(stickers.png);
  height:300px;
  width: 250px;
  margin-top: -300px;
margin-left: 620px;
}



.poster{
	background-image: url(shadowlordswordposter.jpg);
	height:300px;
	width: 250px;
	display:block;
	background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    margin-left: 240px;
    margin-right: auto;
    grid-row:4/4;
        grid-column:1/-1;
}


.shotcollar{background-image: url(shotcollar.jpg);
	height:300px;
	width: 250px;
	display:block;
	background-repeat: no-repeat;
    background-position: center;
    text-align: right;
    background-size: cover;
    margin-left: 520px;
    margin-top: -300px;
    grid-row:4/4;
        grid-column:1/-1;
}

figcaption{
	text-align:left;
	grid-row:3/3;
        grid-column:2/2;
        padding-left: 50px;
}

.flex-container {
  display: flex;
  flex-wrap: nowrap;
justify-content: center;}

  .flex-container > div {
  background-color: #f1f1f1;
  height:220px;
  width: 195px;
  margin: 20px;
  margin-top: 0px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;

}
@media only screen and (max-width: 992px){
  .mug{background-position: center;
  background-size: cover;
  height:150px;
  width: 125px;
margin-left: 60px;
margin-right: auto;}

.shirt{background-position: center;
  background-size: cover;
  height:150px;
  width: 125px;
  margin-top: -150px;
margin-left: 220px;
}

.sticker{background-position: center;
  background-size: cover;
  height:150px;
  width: 125px;
  margin-top: -150px;
margin-left: 370px;
}
.shotcollar{height:150px;
  width: 125px;
  display:block;
  background-repeat: no-repeat;
    background-position: center;
    text-align: right;
    background-size: cover;
    margin-left: 320px;
    margin-top: -150px;
    grid-row:4/4;
        grid-column:1/-1;
}
.poster{
  background-image: url(shadowlordswordposter.jpg);
  height:150px;
  width: 125px;
  display:block;
  background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    margin-left: 160px;
    margin-right: auto;
    grid-row:4/4;
        grid-column:1/-1;
}
#wrapper {
      grid-template-columns: minmax(0,960px) minmax(0,960px) minmax(0,768px)
      minmax(0,960px)minmax(0,960px);}
nav{text-align: center;
  margin-bottom: 1px;
      margin-top:1px;
  grid-row:3/3;
        grid-column:1/-1;
  display:inline-block;
  font-weight: bold;
margin-right: 110px;
margin-left: 110px;
}

nav a{color:#FFFFFF;
  text-decoration:none;
padding: 2px 6px 2px 6px;
background-color:#434343;

}

nav ul{list-style-type:none;
flex-flow:row nowrap; display:flex;

}
nav ul li {width: 40%;margin-right: 60px;}
}
@media only screen and (max-width: 768px){
  #wrapper {
      grid-template-columns: minmax(0px) minmax(0,960px) minmax(100%)
      minmax(0,960px)minmax(0px);}
nav{text-align: center;
  margin-bottom: 1px;
      margin-top:1px;
  grid-row:3/3;
        grid-column:1/-1;
  display:inline-block;
  font-weight: bold;
margin-right: 21px;
margin-left: -60px;
}

nav a{color:#FFFFFF;
  text-decoration:none;
padding: 2px 6px 2px 6px;
background-color:#434343;

}

nav ul{list-style-type:none;
flex-flow:row nowrap; display:flex;

}
nav ul li {width: 40%;margin-right: -40px;}

}