:root{
--white: #fff;
--main-color: #b22222;
}
.link{
color: var(--main-color);
font-family: "Viga", sans-serif;
font-size: 24px;
font-weight: 400;
line-height: 31px;
padding: 4px 6px;
text-transform: capitalize;
border-radius: 0;
border: 2px solid var(--main-color);
display: inline-block;
overflow: hidden;
position: relative;
transition: all 0.3s ease;
margin: 0 10px;
z-index: 1;
}
.link:hover,
.link:focus{
color: var(--white);
background: var(--main-color);
animation: animate 0.9s both;
}
@keyframes animate {
0% { transform: scale3d(1, 1, 1); }
30% { transform: scale3d(1.25, 0.75, 1); }
40% { transform: scale3d(0.75, 1.25, 1); }
50% { transform: scale3d(1.15, 0.85, 1); }
65% { transform: scale3d(0.95, 1.05, 1); }
75% { transform: scale3d(1.05, 0.95, 1); }
100% { transform: scale3d(1, 1, 1); }
}
@media only screen and (max-width: 767px){
.link{ margin-bottom: 30px; }
}