* {
  padding: 0;
  margin: 0;
}

body {
  margin: 0;
}

.starting-screen {
  background-color: rgba(0,0,0,0.9);
  position: absolute;
  z-index: 999999;
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.starting-screen h1 {
  color: white;
  font-size: 6rem;
  text-align: center;
  letter-spacing: 2px;
  font-family: 'Courier New', Courier, monospace;
  text-shadow: 
    0 0 10px rgba(255, 255, 255, 0.8),
    0 0 20px rgba(100, 200, 255, 0.6),
    0 0 30px rgba(100, 200, 255, 0.4),
    0 0 40px rgba(100, 200, 255, 0.3),
    0 0 70px rgba(100, 200, 255, 0.2),
    2px 2px 8px rgb(94, 94, 94);
  animation: spaceGlow 3s ease-in-out infinite, float 6s ease-in-out infinite;
  background: linear-gradient(
    90deg,
    #ffffff 0%,
    #64c8ff 25%,
    #ffffff 50%,
    #64c8ff 75%,
    #ffffff 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: spaceGlow 3s ease-in-out infinite, 
             float 6s ease-in-out infinite,
             shimmer 4s linear infinite;
}

@keyframes spaceGlow {
  0%, 100% {
    filter: brightness(1);
    text-shadow: 
      0 0 10px rgba(255, 255, 255, 0.8),
      0 0 20px rgba(100, 200, 255, 0.6),
      0 0 30px rgba(100, 200, 255, 0.4),
      0 0 40px rgba(100, 200, 255, 0.3),
      0 0 70px rgba(100, 200, 255, 0.2);
  }
  50% {
    filter: brightness(1.3);
    text-shadow: 
      0 0 20px rgba(255, 255, 255, 1),
      0 0 30px rgba(100, 200, 255, 0.8),
      0 0 40px rgba(100, 200, 255, 0.6),
      0 0 50px rgba(100, 200, 255, 0.5),
      0 0 100px rgba(100, 200, 255, 0.3);
  }
}

@keyframes float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
}

@keyframes shimmer {
  0% {
    background-position: 0% center;
  }
  100% {
    background-position: 200% center;
  }
}

.starting-screen input {
  display: block;
  margin: 40px auto 20px auto;
  padding: 10px;
  font-size: 24px;
  font-family: 'Courier New', Courier, monospace;
  border: none;
  border-radius: 5px;
  background-color: rgb(181, 181, 181);
  box-shadow: 2px 2px 8px rgb(94, 94, 94);
}

.starting-screen input:focus {
  outline: none;
  box-shadow: 0 0 10px rgba(96, 96, 96, 0.7),
              0 0 20px rgba(89, 89, 89, 0.5),
              2px 2px 8px rgb(94, 94, 94);
  transition: all 0.3s ease;
}

.starting-screen button {
  display: block;
  margin: 20px auto 0 auto;
  padding: 10px 20px;
  font-size: 24px;
  font-family: 'Courier New', Courier, monospace;
  cursor: pointer;
  background-color: rgba(12, 153, 12, 0.7);
  color: white;
  border: none;
  border-radius: 5px;
  box-shadow:
    0 0 10px rgba(12, 153, 12, 0.5),
    0 0 20px rgba(12, 153, 12, 0.3),
    0 0 30px rgba(12, 153, 12, 0.2),
    2px 2px 8px rgb(94, 94, 94);
  transition: all 0.3s ease;
}

.starting-screen button:hover {
  background-color: rgba(12, 153, 12, 1);
  box-shadow: 
    0 0 20px rgba(12, 153, 12, 0.8),
    0 0 30px rgba(12, 153, 12, 0.6),
    0 0 40px rgba(12, 153, 12, 0.4),
    0 0 50px rgba(12, 153, 12, 0.2),
    2px 2px 8px rgb(94, 94, 94);
  transform: scale(1.05);
}

.space-background {
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: -1;
  width: 100%;
  height: 75vh;
}

.dashboard-image {
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: -1;
  width: 100%;
  height: 100%;
}

@font-face{
    font-family: "digital-clock-font";
    src: url("../fonts/E1234.ttf") format(truetype);
    /* font-style: normal;
    font-weight: normal;
    font-display: swap; */
}

@font-face{
    font-family: "digital-clock-font";
    src: url("../fonts/E1234.ttf") format(truetype);
    /* font-style: normal;
    font-weight: normal;
    font-display: swap; */
}

.timer {
    background-color: black;
    font-family: digital-clock-font;
    font-size: 200%;
    /* margin-right: 5%;
    margin-top: 5%; */
    display: inline-block;
    text-align: center;
    position: absolute;
    bottom: 5%;
    right: 8%;
    border-radius: 5px;
    padding: 5px 10px;
    color: red;
    border: 5px solid rgb(52, 40, 40);
    box-shadow:rgb(52, 40, 40) 0px 0px 10px 2px;
}

.button-effects {
  background: rgba(19, 19, 19, 0.7);
  color: rgb(12, 153, 12);
  font-weight: bold;
  font-family:'Courier New', Courier, monospace;
  text-shadow: 2px 2px 8px rgb(94, 94, 94);
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: larger;
}

.slider-panel {
  position: absolute;
  top: 60vh;
  right: 37vw;
  width: 12vw;
  height: 50px;
}

.button-effects:hover {
  background: rgba(65, 65, 65, 0.7);
}

.chat-panel {
  position: absolute;
  top: 60vh;
  right: 64vw;
  width: 10vw;
  height: 50px;
}