body{
background: #000;
background: -webkit-linear-gradient(to bottom right, #000000, #b60000);
background: linear-gradient(to bottom right, #0d002c, #001b1f);
min-height: 100vh;
max-width: 100%;
  margin: 0;
  padding: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

#game{
  background: #000;
  background: -webkit-linear-gradient(to bottom right, #000000, #b60000);
  background: linear-gradient(to bottom right, #738f38, #478a1a);
}
.h1{
  font-size: 7em;
  text-align: center;
  margin-top: 1%;
  background-color: rgb(5, 5, 22);
  line-height: 0px;
}

.headr{
  height: 215px;
  background-color: rgb(5, 5, 22);
  position: static;
  

}

.card {
  --border-radius: 15px;
  --border-width: 6px;
  appearance: none;
  position: absolute;
  padding: 305px 304px;
  border: 0;
  color: #fff;
  border-radius: 15px;
  z-index: 2;
 }
 
 .card::after {
  --m-i: linear-gradient(#000, #000);
  --m-o: content-box, padding-box;
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 610px;
  padding: var(--border-width);
  border-radius: var(--border-radius);
  background-image: conic-gradient(
          #0062ff,
      #00ffd5,
      #e5ff00,
      #ff9900,
      #ff00bf,
      #2f1dfc,
      #0062ff
     );
  -webkit-mask-image: var(--m-i), var(--m-i);
  mask-image: var(--m-i), var(--m-i);
  -webkit-mask-origin: var(--m-o);
  mask-origin: var(--m-o);
  -webkit-mask-clip: var(--m-o);
  mask-composite: exclude;
  -webkit-mask-composite: destination-out;
  filter: hue-rotate(0);
  animation: rotate-hue linear 800ms infinite;
  animation-play-state: running;
 }
 @keyframes rotate-hue {
  to {
   filter: hue-rotate(1turn);
  }
 }
 
 .card,
 .card::after {
  box-sizing: border-box;
 }
 
 .card:active {
  --border-width: 5px;
 }