/* @keyframes wheeee {
  100% {
    transform: translateX(-512px);
  }
} */

html {
  font: 16px 'Helvetica', 'Arial', sans-serif;
}

body {
  background: #1C1E4B;
  color: #ddd;

  image-rendering: crisp-edges;
  image-rendering: pixelated;
  line-height: 1.8rem;

  margin: 0;
  padding: 0;
}

.spaaaaace {
  position: absolute;
  top:    0;
  left:   0;
  right:  0;
  bottom: 0;
  z-index: -1;
  overflow: hidden;
}

.stars {
  background-color: transparent;
  background-size: 512px;
  animation-name: wheeee;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  position: absolute;
  width: 200%;
  width: calc(100vw + 512px);
  height: 100%;
}

.stars-1 {
  background-image: url('../images/space-256-layer1.png');
  animation-duration: 30s;
  z-index: -10;
}

.stars-2 {
  background-image: url('../images/space-256-layer2.png');
  animation-duration: 35s;
  z-index: -20;
}

.stars-3 {
  background-image: url('../images/space-256-layer3.png');
  animation-duration: 50s;
  z-index: -30;
}

.stars-4 {
  background-image: url('../images/space-256-layer4.png');
  animation-duration: 55s;
  z-index: -40;
}

.stars-5 {
  background-image: url('../images/space-256-layer5.png');
  animation-duration: 70s;
  z-index: -50;
}

a, a:visited, a:active {
  color: #09f;
  text-decoration: none;
  transition: color .2s linear;
}

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

h1 {
  font-size: 1px;
  color: #1C1E4B;
}

h1 img {
  width: 29.625rem;
  height: 5.25rem;
}

h2 {
  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: 0;
}

h3 {
  font-size: 1rem;
  font-weight: bold;
  margin-bottom: 0;
}

p {
  margin-bottom: 0;
}

#main-column {
  max-width: 56rem;
  text-align: center;
  z-index: 100;
  height: 80%;
  margin: 0 auto;
}

#modal-parent {
  display: flex;
  justify-content: center; /* Horizontal centering */
  align-items: center; /* Vertical centering */
  height: 100vh; /* Set the container height to full viewport height */
}

#modal-child {
  min-height: 500px;
  max-width: 56rem;
  display: block
}

a.button {
  display: inline-block;
  line-height: 2.5em;
  background: #9647d9;
  box-shadow: 2px 2px 2px rgba(0, 0, 0, .25);
  border-radius: 6px;
  padding: 0 2rem;
  color: white;
  font-family: monospace;
  text-transform: uppercase;
  font-weight: bold;
  transition: background-color .2s linear;
}

a.button, a.button:visited, a.button:active {
  color: white;
}

.error-code {
  display: block;
  font-family: monospace;
  max-width: 600px;
  background: rgba(0, 0, 0, .75);
  padding: 1.5rem;
  text-align: left;
  border-radius: 1rem;
  margin: 1rem auto 0 auto;
}

.simple-error-message {
  font-size: 1.2rem;
  font-weight: bold;
}

.error-icon {
  vertical-align: text-bottom;
  width: 32px;
  height: 32px;
}

.progress-bar-container {
  display: inline-block;
  width: 260px;
  height: 32px;
  border: 4px solid white;
  border-radius: 8px;
  border-image: url('../images/progress-bar-border-24x24.png') 4;
  position: relative;
  margin: 28px auto 0 auto;
}

.spinner-bar-content {
  position: absolute;
  left: 3px;
  right: 3px;
  top: 3px;
  bottom: 3px;
  background: url('../images/spinner-bar-stripes-24x24.png') repeat;
  animation: spinner-bar-stripes .5s linear infinite;
}

@keyframes spinner-bar-stripes {
  100% {
    background-position: -24px 0;
  }
}

.profile-card {
  display: flex;
  align-items: stretch;
  justify-content: center;

  width: fit-content;
  padding: 1.5rem;
  background: rgba(0, 0, 0, .3);
  border-radius: 1rem;
  margin: 1rem auto 0 auto;
}

.profile-card-pic {
  margin-right: 1rem;
  width: 5rem;
  height: 5rem;
  min-width: 2rem;
  min-height: 2rem;
}

.profile-card-pic img {
  object-fit: contain;
  width: 100%;
  height: auto;

  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  font-size: 0;
}

.profile-card-details {
  display: flex;
  justify-content: center;
  flex-direction: column;
  text-align: left;
}

.profile-card-details-header {
  font-weight: bold;
  font-size: 1.5rem;
}

.profile-card-details-subheader {
  font-size: 1rem;
}

.purple-text {
  color: #C774F9;
}

.index-h3 {
  white-space: nowrap;
  margin-bottom: 0;
}

/* Wraps to the column's width instead of widening it to 56rem. */
.index-content {
  contain: inline-size;
}