/* 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 {
  margin: 100;
  padding: 100;
  font-family: "Noto Sans JP", sans-serif;
  background-color: #ffd9f6;
}

.top-bar {
  position: fixed;   /* Keeps the bar locked at the top while scrolling */
  display: flex;
  gap: 20px; 
  justify-content: center;
  align-items: center;
  top: 0;
  left: 0;
  width: 100%;       /* Spans across the entire screen */
  background-color: #aba7aa; /* Matches your pink theme (change HEX if needed) */
  padding: 15px 0;   /* Adds breathing room on top and bottom of text */
  text-align: center;/* Centers your links */
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); /* Adds a subtle shadow underneath */
  z-index: 1000;     /* Ensures the bar sits on top of all other elements */
}


.main-content {
  padding-top: 70px;       /* Match or exceed the height of your top bar */
  padding-left: 20px;      /* Standard spacing for side margins */
  padding-right: 20px;
}