style.css

@charset "UTF-8";

html,
body {
  user-select: none;
  -webkit-print-color-adjust: exact;
  height: 100%;
  margin: 0;
}

.menuDivs {
  position: relative;
  line-height: 8px;
  display: inline-block;
  text-align: center;
  margin: 1%;
  width: 10vw;
  height: 10vw;
  max-width: 40px;
  max-height: 40px;
}

.nam {
  position: absolute;
  top: 65px;
  text-align: center;
  line-height: 12px;
  width: 1px;
  width: 10vw;
  max-width: 40px;
  font-size: min(3.5vw, 11px);
}

.menuShips {
  border: 2px solid #445915;
  border-radius: 8px;
  text-align: center;
  color: gray;
  width: 100%;
  height: 100%;
  background-image: url("https://github.com/GameSphere-MultiPlayer/GameSphere/assets/56786344/0de2ae58-78fd-4b15-9ed6-d39a0ea17bbd");
  background-size: 800% 200%;
  background-repeat: no-repeat;
  background-color: black;
  image-rendering: crisp-edges;
}

.a1 {
  position: absolute;
  height: 80px;
  padding: 3%;
  width: 25%;
  text-align: center;
  border-radius: 10px;
  background-color: rgba(44, 44, 44, 0.8);
}

.a2 {
  position: absolute;
  color: yellow;
  font-weight: 100;
  opacity: 0.8;
}

.blink_me {
  animation: blinker 2s ease-in infinite;
}
@keyframes blinker {
  50% {
    opacity: 0.5;
  }
}

.blink_me2 {
  animation: blinker2 1.25s ease-in infinite;
}
@keyframes blinker2 {
  50% {
    opacity: 0.1;
  }
}

.knockout {
  margin-top: 20px;
  text-align: center;
  font-family: arial;
  font-size: min(10vw, 45px);
  text-shadow: 0 0 20px white;
  background: linear-gradient(140deg, #27cfcc 33.5%, rgba(0, 0, 0, 0) 33%),
    linear-gradient(140deg, yellow 34%, #ff5454 34%);
  background-size: 500%;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
}
.knockout {
  animation: Gradient 5s ease infinite;
  -webkit-animation: Gradient 5s ease infinite;
  -moz-animation: Gradient 5s ease infinite;
}

@-webkit-keyframes Gradient {
  0% {
    background-position: 30% 50%;
  }
  50% {
    background-position: 25% 50%;
  }
  100% {
    background-position: 30% 50%;
  }
}