/* 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." */
@font-face {
  font-family: 'MyWebFont';
  src: url('webfontkit-20260531-004129/dinosaur_cake_demo-webfont.woff2') format('woff2'); /* No quotes around url path */
}

html, body, a, a:hover {
  cursor: url('green-apple-fc56688f-32.png') 32 32, auto;
}


















.top-nav-bar {
  position: absolute;
  top: 15px;               /* Position: drops the box 15px down from the top edge */
  left: 50%;               /* Starts centering calculation from the middle of the screen */
  transform: translateX(-50%); /* Locks the box perfectly in the center horizontally */
  
  /* 1. Box Shape Dimensions */
  width: 500px;            /* Sets the structural width of your box */
  height: 50px;            /* Sets the structural height of your box */
  box-sizing: border-box;  /* Keeps internal padding within these boundaries */
  
  /* 2. Visual Layer Block Styles */
  background: #ffffff;     /* Solid background fill color (change hex to match theme) */
  border: 3px solid #000000; /* Distinct thick border frame line */
  border-radius: 8px;      /* Softens the box corners to match your updates container */
  
  /* 3. The Layout Layer Anchor */
  z-index: 999;            /* HIGHEST LAYER priority: forces the box to sit on top of everything */
  
  /* 4. Text Alignment Engine */
  display: flex;           /* Turns on side-by-side alignment */
  justify-content: space-around; /* Spreads navigation text fields evenly across the box width */
  align-items: center;     /* Centers text vertically within the 50px box height */
}

/* 3. Creates a visual state change when the mouse hovers over it */
.text-button:hover {
  background-color: #000000; /* Swaps the background to black on hover */
  color: #ff66b2;            /* Swaps the text to pink on hover */
  cursor: url('https://cdn.cursors-4u.net/previews/starfruit-ad9c7fa6-32.webp') 32 32, pointer; /* Keeps your apple cursor working */
}



/* This styles only the paragraphs inside your update box */
.update-box p {
  color: #007FFF; /* Dark Aqua text */
}

/* 1. This targets ONLY the titles/headings inside your update box */
.update-box h3 {
  font-family: "MyWebFont", sans-serif;  /* Use your pixel font for headings */
  font-style: normal;             /* Font Style */
  font-weight: 400;               /* Font Weifhght */
  font-size: 24px;                  /* Make headings larger */
  color: #35D7CC;                   /* Keeps your custom heading color */
  margin-bottom: 10px;              /* Adds a clean gap below the title */
  /* 1. Centering Rule */
  text-align: center;           /* Centers the text horizontally inside the box */
  
  /* 2. Text Outline Rule (Black Outline Example) */
  text-shadow: 
    -1px -1px 0 #000,  
     1px -1px 0 #000,
    -1px  1px 0 #000,
     1px  1px 0 #000;           /* Creates a sharp, pixel-perfect border around letters */
  
}

body {
  background-color: black;
  color: black;
  font-family: Verdana;}

body {
  background-image: url("https://i.imgur.com/EMpQfUm.jpeg");
  background-size: cover;          /* Forces the image to fill the screen */
  background-position: fill;     /* Fills the image */
  background-repeat: no-repeat;    /* Prevents the image from duplicating */
  background-attachment: fixed;    /* Keeps background static while scrolling */
}

.update-box {
  width: 700px;           /* Sets a fixed width for the box */
  height: 400px;          /* Sets a fixed height for the box */
  
  /* The two most important lines to stop spilling: */
  box-sizing: border-box; /* Forces padding to stay INSIDE your width/height */
  overflow-y: auto;       /* Adds a vertical scrollbar automatically if text is too long */
  
  /* Optional styling to make it look nice over your background */
  background: rgba(146, 225, 255, 0.8); /* Semi-transparent white background */
  padding: 15px;          /* Adds breathing room for text inside the box */
  border: 2px solid #5AC3ED; /* Adds a clean border */
  word-wrap: break-word;  /* Forces long continuous words or links to break and wrap */
}

.update-box {
  /* ... keep your existing width, height, and positioning code ... */

  /* Adds rounded corners to the box */
  border-radius: 20px; 
}
.update-box {
  position: absolute;  /* This tells the browser to use the coordinates below */
  
  top: 35px;          /* Increase this number to push the box DOWN, decrease to pull it UP */
  left: 400px;         /* Increase this number to push the box RIGHT, decrease to pull it LEFT */

/* 1. Positions and shapes the horizontal bar container */



.update-box {
  position: absolute;
  top: 100px;
  left: 450px;
  /* ... other rules ... */
} /* <-- MAKE SURE THIS BRACKET IS NOT MISSING! */

.top-nav-bar {
  position: absolute;
  top: 20px;
  /* ... your nav styling ... */
}