body, html {
  background-color: #191919;
  color: #63ff00;
  font-family: 'Perfect DOS VGA 437', monospace;
  margin: 0;
  padding: 0;
  height: 100%;
}

#background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  opacity: 0; /* This will start as invisible */
  transition: opacity 2s ease-in-out;
}

#textContent {
  position: absolute; /* Absolute positioning within #background */
  display: block; /* Visible by default */
  color: #63ff00; /* Green monochrome color */
  font-family: 'Perfect DOS VGA 437', monospace; /* Retro computer font */
  font-size: 7pt; /* Set an appropriate font size */
  overflow: auto; /* Adds scrollbars when content overflows */
  scrollbar-color: #63ff00 #191919; /* thumb and track */
  scrollbar-width: thin; /* Can be 'auto', 'thin', or 'none' */
}

/* Styles the scrollbar track */
#textContent::-webkit-scrollbar-track {
  background-color: #191919; /* Dark background, like the old monitor */
}

/* Styles the scrollbar handle */
#textContent::-webkit-scrollbar-thumb {
  background-color: #63ff00; /* Green to match the monochrome display */
  border-radius: 10px; /* Optional: adds rounded corners to the scrollbar handle */
}

/* Styles the scrollbar width and height */
#textContent::-webkit-scrollbar {
  width: 10px; /* Width of the scrollbar */
  height: 10px; /* Height of the scrollbar (relevant for horizontal scrollbars) */
}


.fade-in-background {
  animation: fadeInBackground 2s forwards;
}

@font-face {
        font-family: 'Perfect DOS VGA 437';
    src: url("../fonts/437.woff2")format("woff2"),
    src: url("../fonts/437.woff")format("woff");
    font-weight: normal;
    font-style: normal;
}

@keyframes fadeInBackground {
  to {
    opacity: 1;
  }
}

.button-position {
  position: absolute;
  transform: translate(-50%, -50%);
  background: none;
  border: none;
  cursor: pointer;
  width: 30px;
  height: 30px;
  opacity: 0;
}