/* 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: 0;
      padding: 20px;
      font-family: "MS Gothic", sans-serif;
      font-size: 20px;
      color: black;
      background-color: #c0c0c0; /* Classic Windows 95 gray */
    }
 
    .container {
      width: 65%;
      margin: auto;
      background-color: #ffffff; /* White background for the content box */
      border: 2px solid #000080; /* Dark blue border to match Windows 95 vibe */
      padding: 20px;
      box-shadow: 5px 5px 0px #808080; /* Simple 3D effect for retro look */
      overflow-y: auto;
      height: 70vh; /* Makes it scrollable */
    }
 
    .title {
      text-align: center;
      background-color: #000080; /* Dark blue title bar */
      color: white;
      padding: 10px;
      margin: -20px -20px 20px -20px;
      box-shadow: 0 2px #808080 inset;
    }
 
    .recommendations {
      list-style-type: none; /* Removes bullets */
      padding: 0;
    }
 
    .recommendations li {
      margin: 15px 0;
    }
    
/* Global: Removes underline from every link on the site */
a {
 text-decoration: none;
 color: #000000; 
}

/* Re-adding the underline only when the user interacts */
a:hover {
 text-decoration: underline;
}


    .right {
  text-align: right;
}