/* Non relevant styles - comments werent like this in codepen // */
* {
  box-sizing: border-box;
}

body {
	background-image: 
		linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15)),
		url("weed2.jpg");
	background-repeat: repeat;
}

p, h3, h1, h2, h4, h5, h6, a, div {
  text-shadow: 3px 3px 6px rgba(0, 0, 0, 1);
}

p {
  font-size: 20px;
  font-family: sans-serif;
  color: white;
}

.container {
  padding: 100px 30px;
  width: 100%;
  margin: 0 auto;
  max-width: 900px;
}


.header{
	display:grid;
	grid-template-columns: 50% 50%;
}

.intro{
	display:grid;
	grid-template-columns: 40% 60%;
}


/* Relevant styles*/
.image-stack {
  display: grid;
  position: relative; /* imperative for the overlapping to work*/
  grid-template-columns: repeat(12, 1fr);  /*12 columns - 1 fractional unit each*/ 
}

.image-stack__item--bottom {
  grid-column: span 12 / -1;/*4 / -1;*/  /*starts at span4 and continues to the end (-1 enables that)*/
  grid-row: 1;
  z-index: 0;
}


.image-stack__item--top {
  grid-row: 1;     /*the images are on teh same row*/
  grid-column: 1 / span 12; /*1 / span 8;*/ /*starts at beginning goes up to col. 8*/  
  padding-top: 81%;  /*slightly arbitrary keeps proportion once resized*/
  z-index: -1;
}

.image-stack__item--top-2 {
  grid-row: 1;     /*the images are on teh same row*/
  grid-column: 1 / span 12; /*1 / span 8;*/ /*starts at beginning goes up to col. 8*/  
  padding-top: 81%;  /*slightly arbitrary keeps proportion once resized*/
  z-index: 1; /* tells the browser to make this image on top*/
}

img {
  display: block;
  width: 100%;
  
}
a {
  color: #00ff00;
  text-decoration: none;
  animation: pulse-glow 2s infinite;
  transition: all 0.3s;
}

a:hover {
  color: #ffff00;
  text-shadow: 0 0 15px #00ff00, 0 0 30px #00ff00;
}

@keyframes pulse-glow {
  0%, 100% { 
    text-shadow: 0 0 5px #00ff00, 0 0 10px #00ff00;
  }
  50% { 
    text-shadow: 0 0 10px #00ff00, 0 0 20px #00ff00, 0 0 30px #00ff00;
  }
}