body {
      margin: 0;
      background-color: #008080;
      font-family: 'MS Sans Serif', sans-serif;
      color: black;
      user-select: none;
    }

    .menu-bar {
      background-color: #c0c0c0;
      border-bottom: 2px solid #808080;
      display: flex;
      padding: 4px 10px;
    }

    .menu-bar > div {
      position: relative;
      margin-right: 20px;
      padding: 2px 6px;
      cursor: pointer;
    }

    .menu-bar > div:hover {
      background-color: #000080;
      color: white;
    }

    .dropdown {
      display: none;
      position: absolute;
      top: 100%;
      left: 0;
      background-color: #c0c0c0;
      border: 2px outset #fff;
      box-shadow: 2px 2px 0 #000;
      min-width: 150px;
      z-index: 1000;
    }

    .dropdown div {
      padding: 4px 8px;
      cursor: pointer;
    }

    .dropdown div:hover {
      background-color: #000080;
      color: white;
    }

    .menu-bar > div:hover .dropdown {
      display: block;
    }

    .main-container {
      display: flex;
      height: calc(100vh - 40px);
      padding: 10px;
    }

    .sidebar {
      width: 180px;
      background-color: #c0c0c0;
      border: 2px outset #fff;
      padding: 10px;
    }

    .sidebar ul {
      padding: 0;
      margin: 0;
      list-style: none;
    }

    .sidebar li {
      padding: 6px 8px;
      margin-bottom: 6px;
      cursor: pointer;
    }

    .sidebar li:hover {
      background-color: #a0a0a0;
      padding-left: 12px;
    }

    .window {
      flex-grow: 1;
      margin: 0 10px;
      background-color: #c0c0c0;
      border: 2px outset #fff;
      display: flex;
      flex-direction: column;
    }

    .title-bar {
      background: linear-gradient(to right, #000080, #0000ff);
      color: white;
      padding: 4px 8px;
      font-weight: bold;
    }

    .content {
      background-color: white;
      padding: 10px;
      border: 2px inset #808080;
      overflow-y: auto;
      flex-grow: 1;
    }

    .content ul {
      padding-left: 20px;
    }

    .content li {
      margin-bottom: 5px;
      cursor: pointer;
    }

    .content li:hover {
      background-color: #e0e0e0;
      padding-left: 5px;
    }

    .right-panel {
      width: 160px;
      background-color: #c0c0c0;
      border: 2px outset #fff;
      padding: 10px;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .clock {
      background: white;
      border: 2px inset #808080;
      padding: 5px;
      margin-bottom: 15px;
      text-align: center;
      font-family: monospace;
    }

    .quick-launch img {
      width: 32px;
      height: 32px;
      margin: 0 4px 12px;
      cursor: pointer;
      border: 2px outset #fff;
    }

    .quick-launch img:hover {
      border: 2px inset #808080;
    }

    .calendar {
      width: 100%;
      background-color: white;
      border: 2px inset #808080;
      padding: 5px;
      font-size: 12px;
    }

    .calendar-header {
      text-align: center;
      font-weight: bold;
      margin-bottom: 4px;
    }

    .calendar-days {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      text-align: center;
    }

    .calendar-days div {
      padding: 2px;
    }

    .today {
      background-color: #000080;
      color: white;
    }