.box {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  width: 100vw;
  margin: 0 auto;
}

.small {
  width: 33vw;
  height: 33vh;
}
.cardspace {
  width: 33vw;
  height: 33vh;
}
.front {
  display: none;
  width: 33vw;
  height: 33vh;
}

.back {
  display: none;
  font-size: 10vh;
  margin-top: 15vh;
  margin-left: 16vw;
  margin-right: 7vw;
}
.front.visible {
  display: block;
}
.back.visible {
  display: block;
}

/* THE CHICK */
@keyframes blinking {
  0% {
    transform: scale(1, 1);
  }
  3% {
    transform: scale(1, 0.1);
  }

  6% {
    transform: scale(1, 1);
  }

  9% {
    transform: scale(1, 0.1);
  }

  12% {
    transform: scale(1, 1);
  }

  100% {
    transform: scale(1, 1);
  }
}

.LeftEye,
.RightEye {
  transform-origin: 15% 61%;
  animation: blinking 7s linear infinite;
}

@keyframes rotate {
  0% {
    transform: none;
  }

  33% {
    transform: rotate(-15deg);
  }

  66% {
    transform: none;
  }

  100% {
    transform: rotate(-15deg);
  }
}

@keyframes flapping {
  0% {
    transform: none;
  }

  33% {
    transform: rotate(15deg);
  }

  66% {
    transform: none;
  }

  100% {
    transform: rotate(15deg);
  }
}

@keyframes flappingRight {
  0% {
    transform: none;
  }

  33% {
    transform: rotate(-15deg);
  }

  66% {
    transform: none;
  }

  100% {
    transform: rotate(-15deg);
  }
}

@keyframes flying {
  0% {
    transform: none;
  }

  33% {
    transform: translate(0, -50px);
  }

  66% {
    transform: none;
  }

  100% {
    transform: translate(0, -40px);
  }
}

@keyframes flyingShadow {
  0% {
    transform: none;
    stroke: #d9d9d9;
    fill: #d9d9d9;
  }

  33% {
    transform: translate(-30px, 10px) scale(1.3, 1.3);
    stroke: #eee;
    fill: #eee;
    /*need color*/
  }

  66% {
    transform: none;
    stroke: #d9d9d9;
    fill: #d9d9d9;
  }

  100% {
    transform: translate(-30px, 10px) scale(1.3, 1.3);
    stroke: #eee;
    fill: #eee;
  }
}

.Secondbird {
    margin: -100px;
  }
  
  .Secondbird .RightFoot {
    transform-origin: 79% 88%;
    animation: rotate 1.1s linear infinite alternate;
  }
  
  #Secondbird_deactivated .LeftFoot {
    transform-origin: 37% 80%;
    animation: rotate 1.1s linear 1.1s infinite alternate;
  }
  
  .Secondbird:hover .LeftWing {
    transform-origin: 47% 63%;
    animation: flapping 0.3s linear infinite alternate;
  }
  
  .Secondbird:hover .RightWing {
    transform-origin: 60% 63%;
    animation: flappingRight 0.3s linear infinite alternate;
  }
  
  .Secondbird:hover {
    animation: flying 1.9s linear infinite alternate;
  }
  
  .Secondbird:hover .RoundShadow {
    animation: flyingShadow 1.9s linear infinite alternate;
    transform-origin: 50% 70%;
  }
  .RoundShadow {
    stroke: #d9d9d9;
    fill: #d9d9d9;
  }
  
  .Secondbird:hover .ShadowLeftLeg {
    transform-origin: 50% 70%;
    animation: flyingShadow 1.9s linear infinite alternate;
    stroke: #d9d9d9;
  }
  
  .Secondbird:hover .ShadowRightLeg {
    transform-origin: 50% 70%;
    animation: flyingShadow 1.9s linear infinite alternate;
    stroke: #d9d9d9;
  }
  
  .ShadowLeftLeg {
    stroke: #d9d9d9;
  }
  
  .ShadowRightLeg {
    stroke: #d9d9d9;
  }