body {

margin: 0px;

padding: 0px;

font-family: Arial, Helvetica, sans-serif;

font-size: 14px;


}


.btn {


text-align:center;
place-self:center;

font-size: 2rem;
padding: 1rem 2rem 1rem 2rem;
border-radius: 1rem;

 
border:solid 2px grey;   
color: grey;
text-decoration: none;

}


.btn:hover {

   /*   animation: btn-animation 1s ease-out forwards;
   animation: btn-animation 1s ease-in-out forwards;

*/


animation: btn-animation 1s ease-in-out forwards;



}

@keyframes btn-animation {

    0% {
  
            transform: translateY(0px);
               box-shadow: opx 0px 0px grey;


    }


    25% {


        transform: translateY(-20px);
        box-shadow: opx 20px 0px grey;

    }


    50% {


        transform: translateY(20px);
        box-shadow: opx 0px -20px grey;

    }



    100% {

        transform: translateY(0px);
        box-shadow: opx 0px 0px grey;
    }

}

.box {


display: grid;

width: 50vw;
height: 30vh;
 

place-self: center;

background-color: white;
border-radius: 1rem;
box-shadow: 0px 6px 0px rgb(110, 107, 107);



}

.container {

 display: grid;   
   grid-template-columns: 1fr;
   grid-template-rows: auto;
   align-items: stretch;
   width: 100%;
   height: 100vh;
   background-color: grey;
}