/* General Styles */
body {
  margin: 0;
  font-family: 'Courier New', Courier, monospace;
  background-color: #000;
  color: #00ff00;
  overflow: auto;
  font-size: 22px; /* Increased overall font size */
}

#character-creation-container {
  padding: 20px;
}

#command-line {
  font-size: 22px;
  padding-bottom: 10px;
}

#blinking-cursor {
  animation: blink 1s step-start infinite;
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}


#command-line:focus {
  outline: none; /* Remove the focus outline */
}



#intro-text {
  width: 80%; /* Constrain the width of the intro text */
  max-width: 800px;
  margin-top: 20px;
  margin-left: 20px; /* Align the text with the command prompt */
  text-align: left; /* Left align the intro text, without justification */
}

#discover-container {
  text-align: left;
  margin-top: 50px;
  margin-left: 20px; /* Align the button under the intro text */
}

.styled-button {
  background-color: #000; /* Black background by default */
  color: #00ff00; /* Green text */
  border: 2px solid #00ff00; /* Green border */
  padding: 8px 16px; /* Reduced padding to make button smaller */
  font-size: 22px; /* Match button font size to command prompt text */
  font-family: 'Courier New', Courier, monospace; /* Use DOS font style */
  text-transform: uppercase; /* Ensure all caps */
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  font-weight: bold;
  border-radius: 5px;
}

.styled-button:hover {
  background-color: #00ff00; /* Switch to green background on hover */
  color: #000; /* Black text on hover */
  transform: scale(1.05);
}

/* Splash Page Styles */
#splash-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  text-align: center;
}

#splash-image {
  width: 80%;
  max-width: 800px;
  max-height: 800px;
  margin-bottom: -80px;
}

#enter-button {
  margin-top: 30px;
  font-size: 22px;
  text-decoration: none;
  color: #00ff00;
  font-weight: bold;
  border: 2px solid #00ff00;
  padding: 10px 20px;
  border-radius: 5px;
  transition: all 0.3s ease-in-out;
  text-transform: uppercase;
}

#enter-button:hover {
  background-color: #00ff00;
  color: black;
  transform: scale(1.1);
}


@media (max-width: 768px) {
  #enter-button {
    margin-top: 60px; /* Adds 20px more than the default value */
  }

  #splash-image {
    width: 100%; /* Make the image fill the screen width */
    height: auto; /* Maintain aspect ratio */
  }
}




/* Answer Button Styles */
.answer-button {
  background-color: #000; /* Black background by default */
  color: #00ff00; /* Green text */
  border: 2px solid #00ff00; /* Green border */
  padding: 10px 15px; /* Adjusted padding to make answer buttons smaller */
  font-size: 20px; /* Slightly smaller font size for answer buttons */
  font-family: 'Courier New', Courier, monospace; /* Use DOS font style */
  cursor: pointer;
  margin: 15px; /* Add space between answer buttons */
  transition: all 0.3s ease-in-out;
  width: 200px; /* Fixed width for consistent button size */
  height: 60px; /* Fixed height to keep all buttons uniform */
  max-width: 200px; /* Constrain the width */
  box-sizing: border-box; /* Ensure padding is included within the height/width */
}

.answer-button:hover {
  background-color: #00ff00; /* Switch to green background on hover */
  color: #000; /* Black text on hover */
}


/* Gameplay Page Styles */
#gameplay-container {
  padding: 20px; /* Add some space around the content */
  max-width: 800px; /* Center content within a reasonable width */
  margin: 0 auto; /* Center the container on the page */
  text-align: left; /* Align text to the left */
}




/* Gameplay Header */
#gameplay-header {
  display: none; /* Initially hidden */
  font-size: 20px; /* Font size */
  font-weight: normal; /* Normal font weight */
  margin-bottom: 10px; /* Space below the header */
  padding: 10px; /* Padding inside the header */
  max-width: 80%; /* Restrict the width for better readability */
  border: 2px solid #00ff00; /* Green border */
  margin: 10px auto; /* Ensure proper horizontal centering */
  text-align: center; /* Center-align the text */
  box-shadow: 0 0 10px #00ff00; /* Add glowing effect */
  background-color: black; /* Match background theme */
  color: #00ff00; /* Green text color */
  text-transform: uppercase; /* Force all text to be uppercase */
  line-height: 1.6; /* Add line spacing for better readability */
}


#gameplay-header p {
    margin: 0;
    line-height: 1.2;
}



/* Story Section */
#story-section {
  padding: 20px; /* Add padding around the story for better readability */
  max-width: 80%; /* Restrict the width to 80% of the container */
  margin: 20px auto; /* Center the story and add spacing from the header */
  text-align: left; /* Keep the text left-aligned */
  line-height: 1.8; /* Improve readability with more line spacing */
  color: #00ff00; /* Ensure the text matches the theme */
  background-color: black; /* Match the theme */
  border: 2px solid transparent; /* Optional: Add a border for a DOS-like effect */
}


/* Choices Section */
#choices-section {
  display: flex;
  flex-direction: column; /* Stack buttons vertically */
  align-items: center; /* Center the buttons within the section */
  margin-top: 20px; /* Add spacing above the choices */
}

/* Gameplay Option Button */
.gameplay-option-button {
  width: 90%; /* Set button width to 90% of the container */
  max-width: 800px; /* Limit button width for large screens */
  padding: 15px; /* Increase padding for better readability */
  margin-bottom: 15px; /* Add spacing between buttons */
  background-color: #000; /* Keep the DOS theme */
  color: #00ff00; /* Green text */
  border: 2px solid #00ff00; /* Green border */
  font-family: 'Courier New', Courier, monospace; /* DOS-style font */
  font-size: 18px; /* Adjust font size */
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}

.gameplay-option-button:hover {
  background-color: #00ff00; /* Green background on hover */
  color: #000; /* Black text on hover */
}



/* Dots Animation for Initializing */
#initializing {
  display: inline-block;
}

#initializing .dots::after {
  content: "";
  animation: dots 1.5s steps(3, end) infinite;
}

@keyframes dots {
  0% { content: ""; }
  33% { content: "."; }
  66% { content: ".."; }
  100% { content: "..."; }
}


#initializing-container {
  text-align: left; /* Align the text to the left */
  padding: 20px; /* Add padding to all sides */
  margin-top: 20px; /* Add space from the top of the page */
  font-size: 24px; /* Make the text more prominent */
  font-weight: bold; /* Bold for emphasis */
  color: #00ff00; /* DOS-style green text */
}