/* 1. Set the page background and center the main container */
body {
  background: #F0F8FF;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  margin: 0;
}

/* NEW: Holds your image and text side-by-side in the middle of the screen */
.center-content {
  display: flex;
  flex-direction: row;      /* Places image on left, text on right */
  flex-wrap: wrap;          /* Keeps layout safe on mobile screens */
  align-items: flex-start;  /* Aligns items to the top */
  max-width: 800px;         /* Gives room for both image and text */
  padding: 20px;
  gap: 25px;                /* Creates a clean gap between image and text */
}

/* NEW: Styles your image so it stays small and next to the text */
.left-image {
  width: 150px;             /* Adjust this number to make the image bigger or smaller */
  height: auto;             /* Keeps proportions correct */
  flex-shrink: 0;           /* Prevents the image from getting squished */
}

/* NEW: Stacks your links neatly below the text */
.links-container {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin: 20px 0;
  width: 100%;              /* Forces links to take up their own row below */
}

/* 2. Style your headings and paragraphs */
h1 { 
  color: #6F8FAF; 
  font-family: Georgia, serif; 
  margin-top: 0;            /* Removes extra top gap so it aligns with the image */
}

h3 { 
  color: #D1E5F4; 
}

p { 
  color: #6F8FAF; 
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 
}

/* 3. Style your links */
a:link { color: #B7C9E2; }    /* Unvisited link */
a:visited { color: #B7C9E2; } /* Visited link */
a:hover { color: #B7C9E2; }   /* Hover state */
a:active { color: #B7C9E2; }  /* Active link */

cssa, button {
    cursor: url('cursor.gif'), auto ;
}