/* Small screens (phones) */
@media screen and (max-width: 600px) {
    /* Styles for small screens */
    body {
      font-size: 14px;
    }
    .container {
      width: 90%; 
    }
}
  
  /* Medium screens (tablets) */
@media screen and (min-width: 601px) and (max-width: 960px) {
    /* Styles for medium screens */
    body {
      font-size: 16px;
    }
    .container {
      width: 70%; 
    }
}
  
  /* Large screens (desktops) */
@media screen and (min-width: 961px) {
    /* Styles for large screens */
    body {
      font-size: 18px;
    }
    .container {
      width: 50%; 
    }
}

body { 
    margin: 0;
    font-family: Arial, sans-serif; 
    display: flex; 
    flex-direction: column; 
    min-height: 100vh; 
    color: black ;
    background-color: aliceblue;
}

.main-content { 
    flex: 1; 
    padding: 20px;
}

.title-section { 
    padding: 20px; 
    text-align: center; 
  }

.menu-bar { 
    border-top: 2px solid black;    /* Line above the menu */
    border-bottom: 2px solid black; /* Line below the menu */
    padding: 5px 0;                  /* Adds space between text and lines */
    list-style-type: none;            /* Standard for horizontal nav bars */
    background-color: lightgreen;
    overflow: hidden; 
}

.menu-bar a { 
    float: left; 
    color: black; 
    padding: 14px 16px; 
    text-decoration: none; 
  }

.menu-bar a:hover {
    font-weight: bold;
}

.menu-bar a:focus {
    font-weight: bold;
    outline: none; /* Highly visible focus indicator */
}

.menu-bar a.disabled {
    color: #999;              /* Gray out the text */
    cursor: default;          /* Remove the hand pointer */
    text-decoration: none;    /* Remove underline */
    pointer-events: none;     /* Prevent all mouse interactions [[1](https://stackoverflow.com/questions/2091168/how-to-disable-a-link-using-only-css)] */
    font-weight: normal;      /* Ensure it doesn't stay bold */
}

footer { 
    color: black; 
    text-align: center; 
    padding: 10px; 
}