/* 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." */

/* 1. TILING BACKGROUND CONFIGURATION */
body {
  /* Replace 'bg.png' with your actual image path or URL */
  background-image: url('bg.png'); 
  /* 'repeat' causes the image to tile horizontally and vertically */
  background-repeat: repeat; 
  /* Fallback background color while image loads */
  background-color: #1a1a2e; 
  
  /* Global font setup */
  font-family: 'Courier New', Courier, monospace; 
  color: #e0e0e0;
  margin: 0;
  padding: 20px;
}

/* 2. COOL EXTRA: CENTERED CONTENT CONTAINER */
/* This makes a solid box so your text is readable over a busy background pattern */
.main-container {
  max-width: 800px;
  margin: 40px auto;
  background-color: #16161a; /* Solid color box */
  padding: 30px;
  border: 2px solid #7289da; /* Colored border */
  border-radius: 8px; /* Slightly rounded corners */
  box-shadow: 5px 5px 0px #7289da; /* Retro hard shadow effect */
}

/* 3. FONTS, HEADERS, AND COLORS */
h1 {
  font-family: 'Georgia', serif;
  color: #ff79c6; /* Pink header */
  font-size: 2.5rem;
  border-bottom: 2px dashed #ff79c6;
  padding-bottom: 10px;
}

p {
  font-size: 1.1rem;
  line-height: 1.6;
  color: #f8f8f2; /* Off-white text */
}

/* Custom bullet point styles */
ul {
  list-style-type: "✧ "; /* Custom cool bullet icon */
  color: #8be9fd;
  padding-left: 20px;
}

li {
  color: #f8f8f2;
  margin-bottom: 8px;
}

/* 4. CUSTOM LINK STYLING */
a:link, a:visited {
  color: #50fa7b; /* Bright green links */
  text-decoration: none;
  font-weight: bold;
  border-bottom: 1px solid #50fa7b;
  transition: all 0.2s ease;
}

a:hover {
  color: #ffb86c; /* Turns orange on hover */
  border-bottom: 2px solid #ffb86c;
  background-color: #282a36; /* Subtle highlight box behind link */
}