body{
  background-image: url("https://neocities.org/site_thumbnails/27/61/jjnumwoodopinions/images/wood.jpg.210x158.webp");
  background-size: 60px 80px;
  background-repeat:repeat;
  background-color:rgba(225,225,225,0.65);
  background-blend-mode:lighten;
}
.h1{
  background-image:url("https://neocities.org/site_thumbnails/27/61/jjnumwoodopinions/images/wood.jpg.210x158.webp");
  background-size:50px 50px;
  color:#fff;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip:text;
  -moz-background-clip:text;
  background-clip:text;
  font-family:vibe;
  font-size:5rem;
  text-align:center;
  text-shadow:6px 6px 13px black;
}
@font-face{
  font-family:vibe;
  src: url("https://jjnumwoodopinions.neocities.org/fonts/GreatVibes-Regular%20(3).ttf");
}


.grid-container{
  display:grid;
  grid-template-columns: repeat(3,180px);  ;
  grid-template-rows:repeat(4, 160px) ;
  grid-gap: 30px;
  justify-content:center;
  border-radius: 3rem;
  
  
}
.grid-container>div{
  border:groove;
  font-size: 1rem;
  text-align:center;
  box-shadow: 5px 5px 20px black;
  border-radius:1rem;
  
}


.mahogany {
  grid-area:1/1/span 1/span 1; /*move 1 coloumn and 1 row*/
  background-image: url("https://jjnumwoodopinions.neocities.org/images/mahogany.jpg");
  background-size:contain;
  cursor:pointer;
  position:relative;
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
}

.walnut {
  grid-area:1/2/span 1/span 1;
  background-image:url("https://jjnumwoodopinions.neocities.org/images/walnut.jpg");
  background-size:contain;
}

.ash {
  grid-area:1/3/span 1/span 1;
  background-image:url("https://neocities.org/site_thumbnails/27/61/jjnumwoodopinions/images/ash-400x267.jpg.210x158.webp");
  background-size:contain;
}

.redwood {
  grid-area:1/4/span 1/span 1;
  background-image:url("https://jjnumwoodopinions.neocities.org/images/redwood.jpg");
  background-size:contain;
}

.cherry {
  grid-area:2/1/span 1/span 1;
  background-image:url("https://jjnumwoodopinions.neocities.org/images/cheerySweet.jpg");
  background-size:contain;
}
.Oak {
  grid-area:2/2/span 1/span 1;
  background-image:url("https://jjnumwoodopinions.neocities.org/images/live-oak.jpg");
  background-size:contain;
}
.Yew {
  grid-area:2/3/span 1/span 1;
  background-image:url("https://jjnumwoodopinions.neocities.org/images/europeanYew.jpg");
  background-size:contain;
}
.slideover{
  grid-area:1/1/span 1/ span 1;
}

.container{
  position:relative;

}


 .text {
  display:none;
  width: 600px;
  height:300px;
  background-color:rgba(66,13,9, 0.7);
  color:black;
  text-align: center;
  border-radius: 1rem;
  border-color:black;
  padding: 5px 2px;
  z-index: 1;
  position: absolute;
  margin:auto;
  
}


.mahogany .text::after{
  content:"";
  position:absolute;
  display:block;
  }


.mahogany .show{
  display:block;
  -webkit-animation: POP 1s;
  animation: POP 1s;
  
  }
  
  @-webkit-keyframes POP{
    0% {opacity: 0;}
    100% {opacity:1;}
  }
  
  @keyframes POP{
    from {opacity:0;}
    to {opacity: 1;}
    }