body{
	display:flex;
	justify-content: center;
	background-color: palegreen;
	color:#0d355a;
	align-items: center;


}

.overlapping {

    ul {
      display: grid;
      grid-template-columns: repeat(11,1fr);
      grid-template-rows: repeat(7,1fr);
      min-height: 600px;
      max-height: 600px;
     
    }

    /* angels */
    li:nth-child(1) {
      grid-row: 1 / span 2;
      grid-column: 4 / span 2;
      z-index: 2;
    }
    li:nth-child(2) {
      grid-row: 2 / span 2;
      grid-column: 2 / span 2;
      z-index: 3;
    }
    li:nth-child(3) {
      grid-row: 3 / span 2;
      grid-column: 9/ span 2;
      z-index: 2;
    }

    /* button */

    li:nth-child(4) {
      grid-row:4/ span 1;
      grid-column:5/ span 2;
      z-index:7;
    }
  /* angels again */

    li:nth-child(5) {
      grid-row: 3 / span 2;
      grid-column: 6/ span 2;
      z-index: 2;
    }
  
    li:nth-child(6) {
      grid-row: 6 / span 2;
      grid-column: 7/ span 2;
      z-index: 3;
    }
/* ocean videos */

    li:nth-child(7) {
      grid-row: 2 / span 4;
      grid-column: 7/ span 3;
      z-index: 6;
    }

    li:nth-child(8) {
      grid-row: 3 / span 3;
      grid-column: 3/ span 4;
      z-index: 6;
    }

    li:nth-child(9) {
      grid-row: 1 / span 3;
      grid-column: 6/ span 4;
      z-index: 6;
    }

  }

  /* acac1a links */

  li:nth-child(10) {
    grid-row: 6/ span 2;
    grid-column: 6/ span 1;
    z-index: 6;
  }ff

  li:nth-child(12) {
    grid-row: 4/ span 2;
    grid-column: 3/ span 1;
    z-index: 6;
  }

  li:nth-child(13) {
    grid-row: 3/ span 2;
    grid-column: 4/ span 1;
    z-index: 6;
  }

  li:nth-child(14) {
    grid-row: 1/ span 2;
    grid-column: 7/ span 1;
    z-index: 6;
  }


  /* cemetery image */

  li:nth-child(11) {
    grid-row: 5/ span 2;
    grid-column: 1/ span 2;
    z-index: 5;
  }


/* angel again */

li:nth-child(15) {
  grid-row: 4/ span 2;
  grid-column: 2/ span 2;
  z-index: 5;
}

/* beware of snakes */

li:nth-child(16) {
  grid-row: 1/ span 2;
  grid-column: 6/ span 2;
  z-index: 4;
}


li:nth-child(17) {
  grid-row: 3/ span 2;
  grid-column: 3/ span 2;
  z-index: 4;
}

/* fire video 1 */

li:nth-child(18) {
  grid-row: 2/ span 2;
  grid-column: 8/ span 2;
  z-index: 5;
}

/* roses */
li:nth-child(19) {
  grid-row: 5/ span 2;
  grid-column: 5/ span 2;
  z-index: 4;
}

li:nth-child(20) {
  grid-row: 2/ span 2;
  grid-column: 4/ span 2;
  z-index: 4;
}


/* fire video 2 and 3 */

li:nth-child(21) {
  grid-row: 4 / span 3;
  grid-column: 5 / span 4;
  z-index: 5;
}

li:nth-child(22) {
  grid-row: 1 / span 3;
  grid-column: 1/ span 4;
  z-index: 4;
}

/* coals */

li:nth-child(23) {
  grid-row: 2 / span 2;
  grid-column: 6/ span 2;
  z-index: 5;
}

/* fire video 4*/

li:nth-child(24) {
  grid-row: 3 / span 3;
  grid-column: 3/ span 4;
  z-index: 5;
}

/* rose */

li:nth-child(25) {
  grid-row: 4 / span 2;
  grid-column: 1/ span 2;
  z-index: 5;
}

/* coals */

li:nth-child(26) {
  grid-row: 4 / span 2;
  grid-column: 7/ span 2;
  z-index: 5;
}

/* snakes */

li:nth-child(27) {
  grid-row: 3 / span 2;
  grid-column: 6/ span 2;
  z-index: 5;
}

/* angels again */

li:nth-child(28) {
  grid-row: 3 / span 2;
  grid-column: 8/ span 2;
  z-index: 5;
}

li:nth-child(29) {
  grid-row: 5 / span 2;
  grid-column: 6/ span 2;
  z-index: 5;
}

li:nth-child(30) {
  grid-row: 3 / span 2;
  grid-column: 4/ span 2;
  z-index: 5;
}

/* ocean again */

li:nth-child(31) {
  grid-row: 5 / span 3;
  grid-column: 4/ span 3;
  z-index: 3;
}

/* intro */

li:nth-child(32) {
  grid-row: 5 / span 3;
  grid-column: 5/ span 3;
  z-index: 1;
}

li:nth-child(33) {
  grid-row: 5 / span 3;
  grid-column: 5/ span 3;
  z-index: 1;
}

  section {
    margin: 3rem 3rem 3rem;
  }

  img {
    display: block;
    width: 100%;
  }

  ul {
    list-style: none;
    margin: 0 0 0 1rem;
    padding: 1rem;
    background: none;
    
    
  }

  .btn1 {
    position:relative;
    background: linear-gradient(120deg, #b1a5, #0b5535, #0de55a);
    background-size: 200% 100%;
    background-position: 100% 0;
    transition: background-position .5s;
    border: none;
    padding: 15px 32px;
    color:white;
    font-family:Courier New;
    z-index: 1;
    }
  
    
    .btn1:hover {
    background-position: 0 0;
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19)
    }
  
    .pageSad{
    background-color: #697E8A;
    }

    .pageLessSad{
      background-color: #728B99
    }

    .pageBlueGrey{
      background-color: #8AA8B9;
    }

    .pageGreyBlue{
      background-color: #A7CBE0;
    }

    .pageOvercast{
      background-color: #BBE2F9;
    }

          .pageSadAgain{
      background-color: #6C93AB;
    }

    .pageOvercast2{
      background-color: #BBE2F9;
    }
  

    .pageShame{
      background-color: #de7e57;
    }

    .pageLessSad2{
      background-color: #728B99;
    }



    .btn2 {
    background: linear-gradient(120deg, #5ad, #50b, #697E8A);
    background-size: 200% 100%;
    background-position: 100% 0;
    transition: background-position .5s;
    border:none;
    padding: 15px 32px;
    color:white;
    font-family:Courier New;
    }
    
    .btn2:hover {
    background-position: 0 0;
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19)
    }

    /*deceit, detest, defeat*/

 .btn3 {
  background: linear-gradient(120deg, #dece17, #de7e57, #dece17);
  background-size: 200% 100%;
  background-position: 100% 0;
  transition: background-position .5s;
  border:none;
  padding: 15px 32px;
  color:white;
  font-family:Courier New;
}

.btn3:hover {
  background-position: 0 0;
  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19)
}

/*btn 4 (btn 2 repeat)*/

    .btn4 {
    background: linear-gradient(120deg, #5ad, #50b, #697E8A);
    background-size: 200% 100%;
    background-position: 100% 0;
    transition: background-position .5s;
    border:none;
    padding: 15px 32px;
    color:white;
    font-family:Courier New;
    }
    
    .btn4:hover {
    background-position: 0 0;
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19)
    }

  /*btn 5 (btn 1 repeat)*/

   .btn5 {
    position:relative;
    background: linear-gradient(120deg, #b1a5, #0b5535, #0de55a);
    background-size: 200% 100%;
    background-position: 100% 0;
    transition: background-position .5s;
    border: none;
    padding: 15px 32px;
    color:white;
    font-family:Courier New;
    z-index: 1;
    }
    
    .btn5:hover {
    background-position: 0 0;
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19)
    }


    .pageSad2{
    background-color: #697E8A;
    }

    .pageGreyBlue2{
      background-color: #A7CBE0;
    }

    .pageGreen1{
    background-color: #B8F5DF ;
    }

    .pageGreen2{
      background-color: #99F0CC;
    }


a:link {
  color:white;
  background-color: #5ad;
}