body, html {
    height: 100%;
    margin: 0;


}

body {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto;

}

.bg, .bg2 {
    width: 100%;
    height: 100%;
    position: absolute;
}
.bg {
    -webkit-clip-path: polygon(74% 76%, 100% 10%, 100% 100%, 0% 100%);
    clip-path: polygon(74% 76%, 100% 10%, 100% 100%, 0% 100%);
    z-index: -1;
    background-color: rgb(13, 51, 51);

}

.bg2 {
    -webkit-clip-path: polygon(71% 75%, 100% 8%, 100% 100%, 0 100%);
    clip-path: polygon(71% 75%, 100% 7%, 100% 100%, 0 100%);
    z-index: -2;
    background-color: blueviolet;
}
.container{
    display: grid;
    grid-template-columns: 40% auto;
    height: auto;
    align-self: center;
    margin: 0 50px;
}

 ul {
     list-style-type: none;
     perspective: 1000px;
 }

 ul li {
     display: grid;
     grid-template-columns:20% auto;
     border-radius: 10px;
     padding: 50px;
     cursor: pointer;
     transform: rotateY(-30deg) rotateX(15deg);
     position: absolute;
     border-bottom: 4px dashed chocolate;
     mix-blend-mode: multiply;
 }

 ul li:nth-child(1) {
   background: rgb(236, 177, 88);
   top: -125px;
   z-index: 2;


 }

  ul li:nth-child(2) {
    background: rgb(212, 33, 78);
   
    z-index: 1;


  }

   ul li:nth-child(3) {
     background: rgb(88, 37, 136);
     top: 110px;
    
    
  


   }

   ul  li:hover {
      transform:  rotateY(-22deg) rotateX(7deg) scale(1.03) ;
      transition: transform .4s ease-out;
      z-index: 3;
      mix-blend-mode: normal;
 }

 img  {
     width:150px;
   
 }
 h1 {
     font-size: 3em;
     
     margin-top: 0;
 }

 #left > p{
     color: rgb(102, 84, 84);
     line-height: 1.5em;
    
 }