@keyframes shake {
  5%, 45% {
    transform: translate3d(-1px, 0, 0);
  }
  
  10%, 40% {
    transform: translate3d(2px, 0, 0);
  }

  15%, 25%, 35% {
    transform: translate3d(-4px, 0, 0);
  }

  20%, 30% {
    transform: translate3d(4px, 0, 0);
  }
}

body{
	background-image:url(cows.webp);
}


a {
    display: flex;
    border-radius: 50%;
	border:solid 2px yellow;
    font-size: 2em;
    font-family: monospace;
    color: white;
    background-color: grey;
	 opacity: 0.8;
    height: 100px;
    width: 100px;
    align-items: center;
    justify-content: center;
	

}

.grid-container {
	
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
    gap: 0px 0px;
    grid-template-areas:
        ". . ca1 . . ."
        ". . . . . ."
        ". ca2 . . lab00 ."
        ". . . . . ."
        "lab01 . . lab02. . ";
}




div{
		
  		transform: translate3d(0, 0, 0);
  		backface-visibility: hidden;
 		 perspective: 1000px;
	animation-iteration-count:infinite;
}

.ca1 {
	animation: shake 4s cubic-bezier(.36,.07,.19,.97) both infinite;
    grid-area: ca1;
}

.ca2 {
	animation: shake 5s cubic-bezier(.36,.07,.19,.97) both  infinite;
    grid-area: ca2;
}

.lab1 {
		animation: shake 3s cubic-bezier(.36,.07,.19,.97) both  infinite;
    grid-area: lab00 ;
}

.lab2 {
		animation: shake 8s cubic-bezier(.36,.07,.19,.97) both  infinite;
    grid-area: lab01;
}

.lab3 {
		animation: shake 12s cubic-bezier(.36,.07,.19,.97) both  infinite;
    grid-area: lab02;
}