/* for the dialog box (credits) */
::backdrop { background: rgb(19, 19, 19); opacity: 0.9; }

@font-face {
  /* main font from microsoft */
  font-family: gothic;
  src: url(/MSGOTHIC.TTF);
}

body {
  /* main stuff, as well as getting that space gif in the background */
  background-image: url('/images/patterns/space.gif');
  font-family: gothic;
  font-display: swap;
  font-size: 17px;
  margin: 0;
  height: 100vh;

  display: flex;
  align-items: center;
  justify-content: center;

  animation: moveBackground 10s linear infinite;
  transition: background-image 1s ease-in-out;
}


table.main {
  width: 100%;
  max-width: 1000px;
  color: white;
}

td {
  vertical-align: top;
}

/* for the foreground divs/tables depending on how you use it */
td.main {
  background-image: url('/images/patterns/patterndark.png');
  vertical-align: top;
  border: 3px solid transparent;
  border-image: url('/images/patterns/pattern.gif') 3 repeat;
  padding: 10px;
}

td.main.header {
  background-image: url("/images/patterns/patternreallydark.png");
}

.credits {
  background-image: url('/images/patterns/patterndark.png');
  border: 3px solid transparent;
  border-image: url('/images/patterns/pattern.gif') 3 repeat;
  padding: 10px;
  color: white;
}

/* for the index.html so you can actually scroll without the main context being really big */
.scrollable {
  max-height: 350px;
  overflow-y: auto;
  overflow-x: hidden;
}

/* evil <a> default coloring will not be accepted in this household */
a {
  color: #c4c4c4;
  text-decoration: underline;
}

a:hover {
  color: #d6d6d6;
  text-decoration: none;
}

@keyframes moveBackground {
  /* what this SHOULD do is move the space gif background its size so its an
     infinite loop, looking like youre in space. thats crazy...
  */
  from {
    background-position: 0 0;
  }
  to {
    background-position: 512px 512px;
  }
}