#arena {
    zoom: 30%;
    
}

html {
    margin: 0;
    background-image: radial-gradient( circle farthest-corner at 10% 20%, #d90000 0%, #d90000 100% );
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat;
    height: 100%;
}

body {
    font-family: 'Courier', monospace;
    background: #d90000;
}

.modak-regular {
  font-family: "Modak", system-ui;
  font-weight: 400;
  font-style: normal;
        font-size: 100px;
        width: 600px; 
}

.hover:hover {
    cursor: pointer;
}

@media (max-width: 400px) {
  .modak-regular {
      font-family: "Modak", system-ui;
      font-weight: 400;
      font-style: normal;
      font-size: 40px;
      width: 300px; 
    }
}

.courier {
    font-family: 'Courier', monospace;
}

#hud {
    zoom: 1.5;

}
@media only screen 
and (max-device-width: 1000px){
    #digi-7b {
        zoom: 0.1;
        transform: translate(175px,445px) scale(0.59); 
    }
}

.grid {
    border: .1px solid black;
    height: 300px;
    max-width: 300px;
    padding: 20px;
    text-align: left;
    font-family: 'Courier';
    margin: 20px;
    cursor: none;
}

.centre {
  position:absolute;
  left: 50%;
  text-align: center;
  margin-left: -170px; /*this is half of width of your div*/
}

.img-ar {
    max-width:100%;
    max-height:100%;
}

table, th, td {
  border: 1px solid red;
  padding: 20px;
}

.center {
  margin-left: auto;
  margin-right: auto;
}