windows retro neocities page layout

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="icon" type="image/x-icon" href="recs/favicon.ico">
  <title>recs</title>
  <style>
    body {
      margin: 0;
      padding: 20px;
      font-family: "MS Gothic", sans-serif;
      font-size: 20px;
      font-weight: bold;
      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;
    }

    .link {
      text-decoration: none;
      color: #000080; /* Dark blue links */
    }

    .link:hover {
      text-decoration: underline;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="title">recommendations</div>
    <p>Here are some fun and interesting recs just for you!
    <ul class="recommendations">
      <li><a href="/linkhere" class="link">📓 fave fics</a></li>
       <li><a href="/linkhere">🎵 playlists</a></li>
       <li><a href="https://youtube.com/playlist?list=PL4ed5BUFc6UpHDT486Y1zjGLad6R5_0QV&si=vd87DfLXVV6ttCxh">🐇 FAVES FAVE with Soobin!!!</a></li>
    </ul>
  </div>
</body>
</html>