A	     {color:blue}
A:hover  {color:red}

/* CSS ID Selector */ 
#banner    {position: relative;top: 5px;text-align: center;width: 600;letter-spacing: 1pt;color: green;font-weight: bold;font-style: italic;font-size:large}

#box       {position: relative;display: inline-block;width: 405px;font: 9pt cursive;background: #D7FEFF;color: #C9051B;text-align: center;border-style: outset;border-color: 

#002F5E;border-width: thin;padding: 3px;align: center;}

#box1      {position: relative;width: 275px;height: 150px;border-width: 2px;font: bold 9pt arial;background-color: lightcyan;color: black;text-align: center;border-style:
inset;border-color: darkred;padding: 15px}

#box7      {position: relative;width: 875px;border-width: 2px;font: bold 9pt arial;background-color: lightpink;color: black;text-align: left;border-style:
inset;border-color: darkred;padding: 15px}

#box8      {position: relative;width: 800px;border-width: 2px;font: bold 9pt arial;background-color: lightcyan;color: black;text-align: left;border-style:
inset;border-color: darkred;padding: 15px}

#box9      {position: fixed;width: 350px;font: bold 9pt arial;background: white;color: black;text-align: left;border-style:
inset;border-color: red;border-width: thin;padding: 5px;margin: auto}

#name      {font: bold 9pt "cursive", "Helvetica";}

.container {
  display: flex; gap: 5px; /* Makes the container a flex container */
  justify-content: center; /* Horizontally centers the flex items */
  align-items: center; /* Vertically centers the flex items (optional, but good for consistent height) */
}