body {
  background-color: #000080;
}

h1 {
  font-family: papyrus;
  text-align: center;
  font-size: 60px;
  color: #FFFF00;
  
  
}
.welcome {
  font-family: papyrus;
  text-align: center;
  color: #FFFF00;
}
.capcom {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 20%;
}
img {
    transition: transform 0.2s; /* Smooth transition for the effect */
}

img:hover {
    transform: scale(1.05); /* Slightly enlarge image on hover */
}

  a {
    display: inline-block; /* Essential for transform properties to work well */
    padding: 10px 15px;
    text-decoration: none;
    color: #000;
    font-size: 60px;
    transition: transform 0.3s ease; /* Smooth transition when animation stops */
}

/* Apply the animation on hover */
a:hover {
    animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both; /* Apply the shake animation */
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    perspective: 1000px;
}

/* Defines the shake animation keyframes */
@keyframes shake {
    10%, 90% {
        transform: translate3d(-1px, 0, 0); /* Move left 1px */
    }
    20%, 80% {
        transform: translate3d(2px, 0, 0); /* Move right 2px */
    }
    30%, 50%, 70% {
        transform: translate3d(-4px, 0, 0); /* Move left 4px */
    }
    40%, 60% {
        transform: translate3d(4px, 0, 0); /* Move right 4px */
    }
    100% {
        transform: translate3d(0, 0, 0); /* Back to original position */
    }
}