/* 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: chartreuse;
  font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}

.contentbox {
  margin: 1em;
  margin-right: 20%;
  margin-left: 30%;
}

.titlebox {
  margin: 1em;
  margin-right: 40%;
  margin-left: 40%;
  border: 2px dotted darkred;
  text-align: center;
}

.freeverse {
  white-space: pre;
}

.game-description {
  border: 3px solid yellow;
  padding: 10px;
}

.scanlines-container {
    position: relative; /* Essential for positioning the pseudo-element overlay */
    /* Add desired width, height, and background styles for your container */
    width: 100%;
    height: 100%;
    background-color: #000;
    color: #0f0; /* Retro green text color example */
    overflow: hidden; /* Ensures the overlay stays within the container boundaries */
}

.scanlines-container::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* Allows clicks/interactions with content underneath the overlay */
    background-image: linear-gradient(
        transparent 50%, 
        rgba(0, 0, 0, 0.5) 50%
    ); /* Creates alternating transparent and semi-opaque lines */
    background-size: 100% 1px; /* Controls the height of the line pattern (e.g., 2px line, 2px space) */
    opacity: 0.6; /* Adjust opacity for desired intensity */
}

a:visited {
  color: mediumpurple;
}