:root{
	--angle: 15deg;
}
.action_button{
	border: none;
	cursor: pointer;
	background-color: var(--red);
	transition: 200ms;
	box-shadow: 0 0 1em 0.2em rgba(0,0,0,0.3);
	padding: 1rem;
	border-radius: 1000px;
	display: flex;
	justify-content: center;
	align-items: center;
}
.action_button:hover,
.action_button:focus
{
	background-color: var(--nord0);
	transform: scale(1.2,1.2);
	box-shadow: 0 0 1em 0.4em rgba(0,0,0,0.3);
	animation: shake 0.5s ease forwards;
}

.action_button:focus{
	transition: 50ms;
	scale: 0.8 0.8;
}


@keyframes shake{
    0%{
      transform: rotate(0)
		scale(1,1);
    }
    25%{
    	box-shadow: 0em 0em 1em 0.2em rgba(0, 0, 0, 0.6);
      	transform: rotate(--angle)
      		scale(1.2,1.2)
      ;
    }
    50%{

    	box-shadow: 0em 0em 1em 0.2em rgba(0, 0, 0, 0.6);
      	transform: rotate(calc(-1 * --angle))
      		scale(1.2,1.2);
    }
    74%{

    	box-shadow: 0em 0em 1em 0.2em rgba(0, 0, 0, 0.6);
  	transform: rotate(--angle)
  		scale(1.2, 1.2);
	}
	100%{
      transform: rotate(0)
  		scale(1.2, 1.2);
    }
  }