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:.8;}

.blink_me {
	animation: blinker 2s ease-in infinite;
}
@keyframes blinker {  
	50% { opacity: .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%}
=======
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("img/SPRTshipsicons.png");
  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%;
  }

}

.HB{
  text-align: center;
  border-radius: 100%;
  padding-top: 7px;
  height: 30px;
  width:35px;
  background-color: rgba(0, 0, 0, 0);
  cursor: pointer;
  position: fixed;
  z-index: 2000;
  transition: background-color 0.2s;
}
.HB .tooltip{
    opacity: 0;
    color: azure;
    white-space: nowrap;
    pointer-events: none;
    transition: opacity 0.2s;
    font-family: 'Roboto',"Arial", sans-serif;
    font-size: 0.8rem;
    position: absolute;
    top: 40px;
  
}
.HB:hover .tooltip{
  opacity: 0.7;
}
.HB:hover{
  background-color: #333;
}

.menuShips{
  cursor: pointer;
}

#botonPlayInfo:hover{
  background-color: #27cfcc;
}