/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your HTML content. To learn how to do something, just try searching Google for questions like "how to change link color." */

body {
  background-color: black;
  color: #f1f1f1;
  font-family: Times, serif; /* Added a fallback font */
  font-size: 20px;
  padding: 0 20px; /* Use padding instead of fixed margins */
}

mark {
  background-color: white;
  color: black;
}

p {
  text-indent: 50px; /* You might want to remove this for mobile */
}

/* Link colors */
a:link {
  color: #61e0ff;
}

a:visited {
  color: #61e0ff;
}

.example {
  color: #61e0ff;
}

/* Media query for responsive adjustments */
@media (max-width: 600px) {
  body {
    padding: 0 10px; /* Less padding for smaller screens */
  }

  p {
    font-size: 14px; /* Smaller font size for mobile */
    text-indent: 0; /* Remove indentation on mobile */
  }

  .container {
    max-width: 100%; /* Allow the container to fill the screen */
    padding: 10px; /* Adjust padding for smaller screens */
  }
}

/* Container for centering content */
.container {
  max-width: 800px; /* Increase the max-width for larger screens */
  margin: auto; /* Center the container */
  background-color: white;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}