body{
	background-color: black;
}
h1{
	color: white;
	text-align: center;
	font-size: 100px;
}
p{
	color: white;
	text-align: center;
	font-size: 20px; 
}
button{
	font-size: 20px; 
	border: 2px solid grey;
	color: grey; 
	background-color: white;
	border-radius: 25%; 
}
button:hover{
	color: black;
	background-color: grey;
}
label{
	color:white;
}
#buttons, #formEmail,#formUser, #formPassword, #formConfirm, #loginGo, #registerGo{
    margin: 20px auto;
    width: fit-content;
}
#formEmail, #formUser, #formPassword, #formConfirm, #loginGo, #registerGo{
	display: none;
	flex-direction: column;
    align-items: flex-start;
    margin-bottom: 10px;
}
#logo {
	display: block; 
    margin: 0px auto;
}
button.gamebutton{
	display: block; 
    margin: 10px auto;
	color: black; 
	background-color: white; 
	border: 2px solid white; 
}
button.gamebutton:hover{
	color: white; 
	background-color: black; 
}
#astralPanel {
  position: relative;
  overflow: hidden;
  background: green;
}

.astralContent {
  position: relative;
  z-index: 2;
}

.mist {
  position: absolute;
  inset: -20%;
  z-index: 1;
  pointer-events: none;
  opacity: 0.45;
  filter: blur(30px);
  background:
    background:
	radial-gradient(circle at 30% 40%, rgba(180, 255, 200, 0.12), transparent 30%),
	radial-gradient(circle at 70% 60%, rgba(150, 255, 180, 0.08), transparent 35%),
	radial-gradient(circle at 50% 20%, rgba(200, 255, 220, 0.10), transparent 25%);
  animation: driftMist 18s ease-in-out infinite alternate;
}

.mist::before,
.mist::after {
  content: "";
  position: absolute;
  inset: 0;
  filter: blur(40px);
  opacity: 0.7;
}

.mist::before {
  background:
    radial-gradient(circle at 30% 50%, rgba(220, 240, 255, 0.12) 0%, transparent 22%),
    radial-gradient(circle at 80% 70%, rgba(180, 210, 255, 0.10) 0%, transparent 26%);
  animation: driftMist2 24s ease-in-out infinite alternate;
}

.mist::after {
  background:
    radial-gradient(circle at 60% 20%, rgba(210, 230, 255, 0.10) 0%, transparent 20%),
    radial-gradient(circle at 15% 80%, rgba(180, 255, 255, 0.08) 0%, transparent 24%);
  animation: driftMist3 30s ease-in-out infinite alternate;
}

@keyframes driftMist {
  from {
    transform: translate(-2%, 0%) scale(1.05);
  }
  to {
    transform: translate(2%, -3%) scale(1.12);
  }
}

@keyframes driftMist2 {
  from {
    transform: translate(3%, 2%) scale(1);
  }
  to {
    transform: translate(-3%, -2%) scale(1.08);
  }
}

@keyframes driftMist3 {
  from {
    transform: translate(0%, 3%) scale(1.04);
  }
  to {
    transform: translate(2%, -1%) scale(1.1);
  }
}
#matrixPanel {
  position: relative;
  overflow: hidden;
  background: #050a1a; /* dark blue */
}

.matrixContent {
  position: relative;
  z-index: 2;
}

.matrixGrid {
  position: absolute;
  inset: -50%;
  z-index: 1;
  pointer-events: none;

  opacity: 0.35;

  background-image:
    linear-gradient(rgba(80, 160, 255, 0.22) 1px, transparent 1px),
    linear-gradient(90deg, rgba(80, 160, 255, 0.22) 1px, transparent 1px);

  background-size: 40px 40px;

  animation: matrixDrift 20s linear infinite;
  filter: drop-shadow(0 0 6px rgba(80, 160, 255, 0.4));
  transform: skew(-6deg);
}
@keyframes matrixDrift {
  from {
    transform: translate(0, 0);
  }
  to {
    transform: translate(40px, 20px);
  }
}