.projectengrid{
    padding-top: 12vh;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin-left: 12vw;
    margin-right: 12vw;
    grid-gap: 40px;
}

.img-proj img{
    width: 100%; 
    height: 100%; 
    outline: 3px solid #ffffff3b;
    outline-offset: -5px;
    position: relative;
}

.projectengrid .img-proj img:hover{
    outline: 2.5px solid #ffffffc4;
    outline-offset: -15px;
    transition-duration: 0.4s;
    -webkit-filter: blur(1.1px);
       -moz-filter: blur(1.1px);
         -o-filter: blur(1.1px);
        -ms-filter: blur(1.1px);
            filter: blur(1.1px); 
}

.noclick img{
    width: 100%; 
    height: 100%; 
    outline: 3px solid #ffffff3b;
    outline-offset: -5px;
    position: relative;
    text-align: center;
}

.text-block {
    font-family: 'Red Hat Display', sans-serif;
    font-weight: 700;
    transform: translate(0, -6vw); 
    background-color: rgba(0, 0, 0, 0.8); 
    letter-spacing: 1.3px;
    color: #fff;
    margin-top: 30px;
    padding-top: 5px;
    padding-bottom: 5px;
    font-size: 1.3vw;
    text-transform: uppercase;
    text-align: left;
    text-align: center;
  }
 
  a{
        text-decoration: none;
        color: #fff;
        
  }

  

  footer {
    padding-top: 80px;
  }

  .heartbeat {
	-webkit-animation: heartbeat 3s linear 5s  both;
	        animation: heartbeat 3s linear 5s  both;
}


 
  

@media (max-width: 1200px){
    .projectengrid{
        padding-top: 14vh;
        margin-left: 8vw;
        margin-right: 8vw;
        grid-gap: 20px;
    }

    }



    @media (max-width: 1100px){
        .projectengrid{
            padding-top: 14vh;
            margin-left: 4vw;
            margin-right: 4vw;
            grid-gap: 10px;
        }
    
        }
    




@media (max-width: 991px){
    .projectengrid{
        margin-left: 20vw;
        margin-right: 20vw;
        grid-template-columns: repeat(1, 1fr);
        grid-gap: 0px;
    }

 

      .text-block {
        transform: translate(1.2vw, -15vw); 
        font-size: 3.2vw;
      }

      .projectengrid img:hover{
        -webkit-filter: blur(0.5px);
           -moz-filter: blur(0.5px);
             -o-filter: blur(0.5px);
            -ms-filter: blur(0.5px);
                filter: blur(0.5px); 
    }
    
}

@media (max-width: 500px){

    .projectengrid{
        margin-left: 8vw;
        margin-right: 8vw;
        grid-template-columns: repeat(1, 1fr);
        grid-gap: 20px;
    }

    
      .text-block {
        transform: translate(2.4vw, -22vw); 
        font-size: 4.5vw;
      }

      .projectengrid img:hover{
        -webkit-filter: blur(0px);
           -moz-filter: blur(0px);
             -o-filter: blur(0px);
            -ms-filter: blur(0px);
                filter: blur(0px); 
    }
    
}












@-webkit-keyframes heartbeat {
    from {
      -webkit-transform: scale(1);
              transform: scale(1);
      -webkit-transform-origin: center center;
              transform-origin: center center;
      -webkit-animation-timing-function: ease-out;
              animation-timing-function: ease-out;
    }
    10% {
      -webkit-transform: scale(0.995);
              transform: scale(0.995);
      -webkit-animation-timing-function: ease-in;
              animation-timing-function: ease-in;
    }
    17% {
      -webkit-transform: scale(1);
              transform: scale(1);
      -webkit-animation-timing-function: ease-out;
              animation-timing-function: ease-out;
    }
    33% {
      -webkit-transform: scale(0.995);
              transform: scale(0.995);
      -webkit-animation-timing-function: ease-in;
              animation-timing-function: ease-in;
    }
    45% {
      -webkit-transform: scale(1);
              transform: scale(1);
      -webkit-animation-timing-function: ease-out;
              animation-timing-function: ease-out;
    }
  }
  @keyframes heartbeat {
    from {
      -webkit-transform: scale(1);
              transform: scale(1);
      -webkit-transform-origin: center center;
              transform-origin: center center;
      -webkit-animation-timing-function: ease-out;
              animation-timing-function: ease-out;
    }
    10% {
      -webkit-transform: scale(0.995);
              transform: scale(0.995);
      -webkit-animation-timing-function: ease-in;
              animation-timing-function: ease-in;
    }
    17% {
      -webkit-transform: scale(1);
              transform: scale(1);
      -webkit-animation-timing-function: ease-out;
              animation-timing-function: ease-out;
    }
    33% {
      -webkit-transform: scale(0.995);
              transform: scale(0.995);
      -webkit-animation-timing-function: ease-in;
              animation-timing-function: ease-in;
    }
    45% {
      -webkit-transform: scale(1);
              transform: scale(1);
      -webkit-animation-timing-function: ease-out;
              animation-timing-function: ease-out;
    }
  }