@font-face {
  font-family: 'vcr_osd_mono';
  src: url('/fonts/vcr_osd_mono.woff');
  font-weight: normal;
  font-style: normal;
}

body {
  
  background-image: url("/bgs/charbg.png");
  font-family: "vcr_osd_mono";
  color: white;
  text-shadow: 2px 2px #5A1818;
  overflow: auto;
}

.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  animation: none !important;
 transition: none !important;
}

.guy {
  width: 240px;
  height: 240px
}

.parent {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(5, 1fr);
  grid-column-gap: 0px;
  grid-row-gap: 10px;
}

.mainbox { grid-area: 1 / 2 / 6 / 5; 
  background-color: rgba(0,0,0,0.5);
  border-style: solid;
  border-color: red;
  border-width: 0.5px;
  padding: 40px;
  margin-left: auto;
  margin-right: auto;
  }
.titlebox { grid-area: 1 / 2 / 2 / 5;}

  img:hover {

  animation: shake 0.5s;

  /* When the animation is finished, start again */
  animation-iteration-count: infinite;
}

@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}

footer {
                background-color: rgba(0,0,0,0);
                width: 100%;
                height: 40px;
                
                text-align: center;
                text-shadow: 2px 2px #5a1818;

}

th, td {
  padding: 10px;
}