* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Courier New", Courier, monospace; /* text font*/
}

body {
  /* background color of the whole page */
  background-color: #080808;

  /* prevents text select */
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */
}

h1,
ul,
li,
p {
  /* color of the text (links and time) */
  color: #f7f7f7;
}

.main {
  height: 100vh;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 2rem; /* Add padding to prevent content from touching edges */
}

.main-container {
  /* main container that encompasses all of the categories */
  width: 100%;
  max-width: 800px; /* Allow width to shrink */
  display: flex;
  justify-content: center;
  z-index: 1; /* displays text above the image, if they ever overlap */
  overflow: hidden; /* Hide overflow if title exceeds */
}

.title {
  /* category title */
  font-size: 1rem; /* Smaller initial font size */
  font-weight: 400;
  margin-bottom: 0.15rem;
  text-align: center; /* Center the text */
  white-space: pre-wrap; /* Preserve spaces and wraps text */
  overflow: hidden; /* Prevents overflowing */
  display: inline-block;
  transition: transform 0.3s ease, font-size 0.3s ease; /* Smooth scaling */
}

.dateTime {
  /* displays date and time at top right corner */
  color: #f7f7f7;
  position: fixed;
  font-size: 1rem; /* Use relative units for font size */
  top: 1.3rem;
  right: 2rem;
}


@media (max-width: 800px) {
  .title {
    transform: scale(0.8); /* Scale down slightly */
  }
}

@media (max-width: 600px) {
  .title {
    transform: scale(0.6); /* Scale down more */
  }
}

@media (max-width: 400px) {
  .title {
    transform: scale(0.4); /* Further scale down */
  }
}