/*ASCII Art Galaxy BG*/

#galaxy-container {
  position: fixed;
  inset: 0;

  z-index: 0;

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

  overflow: hidden;

  pointer-events: none;

  /*
   * Overall visibility.
   * Override this from JavaScript with CONFIG.opacity.
   */
  opacity: 0.35;

  /*
   * Softly fade the outer edges of the galaxy.
   */
  -webkit-mask-image:
    radial-gradient(
      ellipse 75% 70% at center,
      black 20%,
      rgba(0, 0, 0, 0.9) 55%,
      transparent 100%
    );

  mask-image:
    radial-gradient(
      ellipse 75% 70% at center,
      black 20%,
      rgba(0, 0, 0, 0.9) 55%,
      transparent 100%
    );
}


/*
 * Rotation Layer
 * JavaScript controls the speed through a CSS variable.
 */

#galaxy-rotation {
  position: absolute;

  left: 50%;
  top: 50%;

  transform-origin: center center;

  animation:
    galaxy-spin var(--galaxy-rotation-duration, 240s)
    linear infinite;
}


/*ASCII Art*/
#galaxy {
  position: relative;

  margin: 0;

  color: var(--galaxy-color, #087a4b);

  font-family:
    "SFMono-Regular",
    "Cascadia Code",
    "Roboto Mono",
    "Courier New",
    monospace;

  /*
   * VERY IMPORTANT
   * This preserves all of the Unicode whitespace used by the artwork.
   */
  white-space: pre;

  overflow: visible;

  font-size: 7px;

  line-height: 1;

  text-align: left;

  /*
   * Extremely subtle glow.
   */
  text-shadow:
  0 0 4px rgba(0, 160, 90, 0.18),
  0 0 12px rgba(0, 100, 60, 0.08);
}


 /*Atmospheric Vignette*/
#galaxy-container::after {
  content: "";

  position: absolute;
  inset: 0;

  background:
    radial-gradient(
      ellipse at center,
      transparent 25%,
      rgba(0, 0, 0, 0.15) 55%,
      rgba(0, 0, 0, 0.85) 100%
    );

  pointer-events: none;
}


 /* Rotation */
@keyframes galaxy-spin {

  from {
    transform:
      translate(-50%, -50%)
      rotate(0deg);
  }

  to {
    transform:
      translate(-50%, -50%)
      rotate(360deg);
  }

}


/*Accessibility*/
@media (prefers-reduced-motion: reduce) {

  #galaxy-rotation {
    animation: none;
  }

}


/*Mobile*/
@media (max-width: 600px) {

  #galaxy-container {
    opacity: 0.25;
  }

}

/* For centering tables */
.table-centered-class {
    display: flex;
    justify-content: center;
    max-width: 100%;
}

.table-centered-class table {
    max-width: 100%;
    border-collapse: collapse;
}

.table-centered-class th,
.table-centered-class td {
    overflow-wrap: anywhere;
    word-break: break-word;
    white-space: normal;
}


/* Misc */
html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  background: #000000;
  color: #00eaff;
}

h1 {
  margin: 0;

  color: #d5ffe1;
  font-size: clamp(2rem, 6vw, 5rem);
  letter-spacing: 0.2em;

  text-shadow:
    0 0 5px #00ff66,
    0 0 15px #00ff66,
    0 0 35px rgba(0, 255, 100, 0.6);
}

h2 {
    font-family: 'LocalNovaSquare';
    color: #ff0090;
    text-align: center;
    text-shadow: 0 0 8px #00eaff;
    border-bottom: 1px solid #00eaff33;
    padding-bottom: 4px;
} 

h3 {
    color: #00ff66;
    text-align: center;
    font-family: 'LocalNovaSquare';
}

h4 {
    background-color: #000000;
    color: #05FFA1;
    font-family: "LocalGenos", monospace;
    line-height: 1.6;
}

a {
    color: #05FFA1;
    text-decoration: none;
}

a:hover {
    color: #ffffff;
    text-shadow: 0 0 6px #00eaff;
}