body {
    font-family: 'Alatsi', sans-serif;
}

switch{
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
 
}

button {
  position: relative;
  outline: none;
  text-decoration: none;
  border-radius: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  text-transform: uppercase;
  height: 60px;
  width: 210px;
  opacity: 1;
  background-color: #ffffff;
  border: 4px solid black;
  margin: 1.15em;
}

button:hover{
    animation: rotate 0.7s ease-in-out both;
    
}

span{
    color: black;
    font-size: 17px;
    font-weight: 500;
    letter-spacing: 0.7px;
    font-family: 'Alatsi', sans-serif;
}

span:hover{
    animation: shake 0.7s ease-in-out both;
    animation-delay: 0.06s;
}


@keyframes rotate{
    0% {
        transform: rotate(0deg) translate3d(0, 0, 0)}
    25% {
        transform: rotate(3deg) translate3d(0, 0, 0)}
    50% {
        transform: rotate(-3deg) translate3d(0, 0, 0)}
    75% {
        transform: rotate(1deg) translate3d(0, 0, 0)}
    100% {
        transform: rotate(0deg) translate3d(0, 0, 0) }
}
  
@keyframes shake {
    0% {
        transform: translate3d( 0, 0, 0) translateZ(0) }
    25% {
        transform: translate3d( 4px, 0, 0) translateZ(0) }
    50% {
        transform: translate3d( -3px, 0, 0) translateZ(0) }
    75% {
        transform: translate3d( 2px, 0, 0) translateZ(0) }
    100% {
        transform: translate3d( 0, 0, 0) translateZ(0) }
}