body {
background-color: white;
}

#header_grid{

  display:grid;
  grid-template-columns: repeat(12,1Fr);
  grid-template-rows:repeat(3, auto);
  grid-gap: 20px;
  width: 100%;
  position: absolute;
  top:0;
  left:0;
  background: white;
  z-index: 3;
 
}


#title {
  grid-column: 1/13;
  grid-row:1/2;
  font-family: 'Roboto Slab', serif;
  font-size: 5.2vw;
  font-weight:400;
  color:#B4FC6C;
  filter:blur(4px);
  text-decoration:none;
  text-align: center;
  transition:filter 2s;
}

#title:visited {
  color:#B4FC6C;
  text-decoration: none;
    
}
#title:hover{
  filter: blur(0px);
}
#title:active{
  filter: blur(0px);

}

#w {

  grid-column:4/6;
  grid-row: 2/3;
  height: 50px;
  font-family: 'Roboto Slab', serif;
  font-size: 17px;
  font-weight: 100;
  text-align: center;
  padding-top:40px;
  color:black;
  text-decoration:none;
  background-image: url("picsW/works.png");
  background-size: 200px 100px;
  background-repeat: no-repeat;
  background-position: top;
  filter:blur(0px);
  
}

     #w:visited {
        color:black;
        filter:blur(0px);
        text-decoration: none;
      }


#ex {
  grid-column: 6/8;
  grid-row: 2/3;
  height: 50px;
  font-family: 'Roboto Slab', serif;
  font-size: 17px;
  font-weight: 100;
  padding-top: 40px;
  text-align:center;
  text-decoration:none;
  filter:blur(2px);
  transition:filter 0.2s;
  color: black;
}

      #ex:hover {
        filter:blur(0px);
        background-image: url("picsW/Exh2.png");
        background-size: 200px 100px;
        background-repeat: no-repeat;
        background-position: top;

      }

      #ex:visited {
        color:black;
        text-decoration: none;

      }


    #ab{
      grid-column: 8/10;
      grid-row: 2/3;
      height: 50px;
      font-family: 'Roboto Slab', serif;
      font-size: 17px;
      font-weight: 100;
      padding-top: 40px;
      text-align:center;
      text-decoration:none;
      filter:blur(2px);
      transition:filter 0.2s;
      color: black;

    }

        #ab:hover {
          filter:blur(0px);
          background-image: url("picsW/Abt2.png");
          background-size: 200px 100px;
          background-repeat: no-repeat;
          background-position: top;
        }

        #ab:visited {
          color: black;
          text-decoration: none;

        }



#main_grid{
  display: grid;
  grid-template-columns:repeat(12,1Fr);
  grid-template-rows:repeat(24, auto);
  grid-gap: 20px;
  margin-top:250px;

  }

#main_grid a{
  border:0px;
  color:#B4FC6C;
  font-size: 0px;
  margin-bottom: 10;
  text-align: center;
  transition-property:color;
  transition-duration: 3s;


}

#main_grid a:hover{
  color:black;
  font-size: 25px;
  text-decoration:none;
  font-family:'Roboto Slab', sans-sans-serif;
  text-align:center;
  background:none ;
  margin-top: -100px; 
  
  
}

#main_grid a:visited{
  text-decoration: none;


}

#main_grid h5, h6{
  font-weight: 100;


  
}
  

#worksArea1{
  grid-column: 2/4;
  grid-row: 3/5;
  height: 210px;
  background-image: url("picsW/TECover.jpg");
  background-size: 420px 278px;
  background-repeat: no-repeat;
  background-position: center top;
  z-index:2;

}

    


#worksArea2{
  grid-column: 6/8;
  grid-row: 3/5;
  height: 210px;
  background-image: url("picsW/OrgCover.jpg");
  background-size: 320px 480px;
  background-repeat: no-repeat;
  background-position: top;
  z-index:2;

}


#worksArea3{
  grid-column: 10/12;
  grid-row: 3/5;
  height: 210px;
  background-image: url("picsW/TFCover.jpg");
  background-size: 840px 556px;
  background-repeat: no-repeat;
  background-position: center bottom;
  z-index:2;

}
  
#worksArea4{
  grid-column: 4/6;
  grid-row: 5/7;
  height: 210px;
  background-image: url("picsW/InsCover.jpg");
  background-size: 500px 269px;
  background-repeat: no-repeat;
  background-position-x: right -70px;
  background-position-y: bottom -30px;
  z-index:2;

}
 

#worksArea5{
  grid-column: 8/10;
  grid-row: 5/7;
  height: 210px;
  background-image: url("picsW/ELCover3.jpg");
  background-size: 500px 333px;
  background-repeat: no-repeat;
  background-position: center center;
  z-index:2;

}


#worksArea6{
  grid-column: 6/8;
  grid-row: 7/9;
  height: 210px;
  background-image: url("picsW/SCover.jpg");
  background-size: 500px 282px;
  background-repeat: no-repeat;
  background-position: -150px -80px;
  z-index:2;

}