/* 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-image: url("/purplepinksky.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  color: white;
  font-family: Verdana;
}
h1 {
  text-align: center;
}
/* 1. Tell the container to display its items side-by-side */
.main-container {
  display: flex;
  gap: 20px;          /* Adds space between the main content and the sidebar */
  max-width: 1000px;  /* Keeps your website from stretching too wide on huge monitors */
  margin: 0 auto;     /* Centers the entire layout on the screen */
}

/* 2. Give the main content area more breathing room */
.content-area {
  flex: 3;            /* Takes up 3 parts of the available space */
}

/* 3. Style the sidebar column */
.sidebar {
  flex: 1;            /* Takes up 1 part of the available space */
  background-color: rgba(255, 255, 255, 0.1); /* Adds a subtle, see-through background */
  padding: 15px;      /* Adds space inside the sidebar so text isn't cramped */
  border-radius: 8px; /* Rounds the corners of the sidebar box */
}