/* 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: white;
  font-family: Verdana;
  background-image: url('https://heathenrygame.com/Textures/_BGtex.png'); 
  background-attachment: scroll; 
  background-position: top left;
  background-repeat: repeat; 

}
/* Global Reset for pixel art sharpness */
img {
  image-rendering: -moz-crisp-edges;
  image-rendering: -o-crisp-edges;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.box-container {
  position: relative;
  /* Set your desired box size here */
  width: 300px; 
  height: 200px;
  margin: 50px auto; /* Center the box */
  font-family: monospace;
  background-color: transparent;
}

/* --- Corners (Z-Index: 3 - Topmost) --- */
.corner {
  position: absolute;
  width: 7px;
  height: 7px;
  z-index: 3;
}
.tl { top: 0; left: 0; }
.tr { top: 0; right: 0; }
.bl { bottom: 0; left: 0; }
.br { bottom: 0; right: 0; }

/* --- Lines (Z-Index: 2 - Below corners, Above content) --- */
.line {
  position: absolute;
  z-index: 2;
}

/* Top Line */
.line.top {
  top: 0;
  left: 7px;
  right: 7px;
  height: 6px;
  width: calc(100% - 14px);
}

/* Bottom Line (FIXED) */
.line.bottom {
  bottom: 0;
  left: 7px;
  right: 7px;
  height: 6px;
  width: calc(100% - 14px);
  top: auto; /* Ensure top doesn't interfere */
}

/* Left Line */
.line.left {
  left: 0;
  top: 7px;
  bottom: 7px;
  width: 4px;
  height: calc(100% - 14px);
}

/* Right Line */
.line.right {
  right: 0;
  top: 7px;
  bottom: 7px;
  width: 4px;
  height: calc(100% - 14px);
}

/* --- Content Area (Z-Index: 1 - Bottom) --- */
.content {
  position: absolute;
  top: 7px;
  left: 4px;
  right: 4px;
  bottom: 7px;
  
  /* Use ABSOLUTE URL for background to match your HTML */
  background-image: url('https://heathenrygame.com/Textures/_BGtex.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  
  padding: 15px;
  color: #e0e0e0;
  font-size: 14px;
  line-height: 1.5;
  z-index: 1;
  overflow: auto;
}

/* --- Shading Overlay (Vignette) --- */
.content::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  
  /* Dark gradient: Darker at edges, lighter in center */
  /* Adjust the 0.6 alpha to make it darker (0.8) or lighter (0.3) */
  background: radial-gradient(
    circle, 
    rgba(0, 0, 0, 0) 40%, 
    rgba(0, 0, 0, 0.6) 100%
  );
  
  z-index: 0; /* Behind the text, on top of the background image */
  pointer-events: none;
}

/* Text Styling for Readability */
.content {
  /* Add text shadow so white text pops against the texture */
  text-shadow: 1px 1px 0 #000; 
}