:root {
          --teal: #008080;
          --win-blue: #000080;
          --win-gray: #c0c0c0;
          --win-light: #ffffff;
          --win-dark: #808080;
          --win-shadow: #404040;
      }

      * {
          box-sizing: border-box;
      }

      body {
          margin: 0;
          min-height: 100vh;

          display: flex;
          align-items: center;
          justify-content: center;

          padding: 20px;

          font-family: Tahoma, sans-serif;

          background:
              radial-gradient(circle at top left,
                  rgba(255, 255, 255, 0.06),
                  transparent 40%),
              var(--teal);

          color: black;
      }

      a {
          color: #0000ee;
          text-decoration: none;
      }

      .window {
          width: 1000px;
          max-width: 100%;

          background: var(--win-gray);

          border-top: 2px solid var(--win-light);
          border-left: 2px solid var(--win-light);
          border-right: 2px solid var(--win-shadow);
          border-bottom: 2px solid var(--win-shadow);

          box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.35);

          overflow: hidden;
      }

      .titlebar {
          height: 30px;

          display: flex;
          align-items: center;
          justify-content: space-between;

          padding: 0 8px;

          color: white;
          font-size: 14px;
          font-weight: bold;

          background: linear-gradient(to right, #0a2a8f, var(--win-blue));
      }

      .title {
          display: flex;
          align-items: center;
          gap: 8px;
      }

      .icon {
          width: 16px;
          height: 16px;

          border: 1px solid black;

          background:
              linear-gradient(135deg, #ffffff 25%, transparent 25%) 0 0 / 8px 8px,
              linear-gradient(225deg, #ffffff 25%, transparent 25%) 0 0 / 8px 8px,
              linear-gradient(315deg, #99ccff 25%, transparent 25%) 0 0 / 8px 8px,
              linear-gradient(45deg, #99ccff 25%, #ffffff 25%) 0 0 / 8px 8px;
      }

      .icon img {
          display: block;
          width: 100%;
          height: 100%;
          object-fit: contain;
      }

      .controls {
          display: flex;
          gap: 4px;
      }

      .control {
          width: 18px;
          height: 18px;

          display: flex;
          align-items: center;
          justify-content: center;

          font-size: 11px;

          color: black;
          background: var(--win-gray);

          border-top: 2px solid var(--win-light);
          border-left: 2px solid var(--win-light);
          border-right: 2px solid var(--win-dark);
          border-bottom: 2px solid var(--win-dark);
      }

      .navbar {
          display: flex;
          gap: 8px;
          flex-wrap: wrap;

          padding: 8px;

          background: #bdbdbd;

          border-top: 1px solid white;
          border-bottom: 1px solid #7a7a7a;
      }

      .nav-button,
      .button {
          display: inline-block;

          padding: 5px 10px;

          color: black;
          background: var(--win-gray);

          border-top: 2px solid var(--win-light);
          border-left: 2px solid var(--win-light);
          border-right: 2px solid var(--win-dark);
          border-bottom: 2px solid var(--win-dark);

          font-size: 14px;
      }

      .nav-button:active,
      .button:active {
          border-top: 2px solid var(--win-dark);
          border-left: 2px solid var(--win-dark);
          border-right: 2px solid var(--win-light);
          border-bottom: 2px solid var(--win-light);
      }

      .content {
          padding: 12px;
      }

      .projects-wrapper {
          position: relative;

          height: 600px;

          padding: 10px;

          overflow-y: auto;
          overflow-x: hidden;

          background:
              linear-gradient(to bottom,
                  rgba(255, 255, 255, 0.04),
                  rgba(0, 0, 0, 0.03)),
              #e9e9e9;

          border-top: 2px solid var(--win-light);
          border-left: 2px solid var(--win-light);
          border-right: 2px solid var(--win-dark);
          border-bottom: 2px solid var(--win-dark);
      }

      /* CRT scanlines */
      .projects-wrapper::before {
          content: "";

          position: absolute;
          inset: 0;

          pointer-events: none;

          background:
              repeating-linear-gradient(to bottom,
                  rgba(0, 0, 0, 0.07) 0px,
                  rgba(0, 0, 0, 0.07) 1px,
                  transparent 2px,
                  transparent 4px);

          opacity: 0.45;
      }

      /* CRT glow + vignette */
      .projects-wrapper::after {
          content: "";

          position: absolute;
          inset: 0;

          pointer-events: none;

          background:
              radial-gradient(circle at center,
                  transparent 55%,
                  rgba(0, 0, 0, 0.18) 100%),
              linear-gradient(to bottom,
                  rgba(255, 255, 255, 0.06),
                  rgba(255, 255, 255, 0));

          opacity: 0.7;
      }

      .projects {
          position: relative;
          z-index: 1;

          display: grid;
          grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
          gap: 12px;
      }

      .project {
          background: white;

          border-top: 2px solid #ffffff;
          border-left: 2px solid #ffffff;
          border-right: 2px solid #7f7f7f;
          border-bottom: 2px solid #7f7f7f;

          overflow: hidden;
      }

.status {
    font-size: 12px;
    font-weight: bold;
    margin-bottom: 6px;
    text-transform: uppercase;
}

/* finished */
.status-finished {
    color: #25a000;
}

/* in development */
.status-in-development {
    color: #d49500;
}

/* cancelled */
.status-cancelled {
    color: #e53935;
}

.banner {
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 16px;
    border-bottom: 2px solid #808080;

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    color: white;
    text-shadow:
        0 1px 2px rgba(0, 0, 0, 0.85),
        0 0 8px rgba(0, 0, 0, 0.6);
}

.banner--no-image {
    color: black;
    text-shadow: none;

    background:
        linear-gradient(45deg, #d9d9d9 25%, transparent 25%) 0 0 / 20px 20px,
        linear-gradient(-45deg, #d9d9d9 25%, transparent 25%) 0 10px / 20px 20px,
        linear-gradient(45deg, transparent 75%, #bcbcbc 75%) 10px 0 / 20px 20px,
        linear-gradient(-45deg, transparent 75%, #bcbcbc 75%) 10px 10px / 20px 20px,
        linear-gradient(to bottom, #efefef, #cfcfcf);
}

.projects-error {
    margin: 0;
    padding: 16px;
    font-size: 14px;
    line-height: 1.5;
}

.body {
    padding: 10px;
}


      .body h3 {
          margin: 0 0 8px;
          font-size: 16px;
      }

      .body p {
          margin: 0 0 12px;

          font-size: 14px;
          line-height: 1.45;
      }

      .footer {
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 8px;
          flex-wrap: wrap;

          padding: 5px;

          background: #bdbdbd;

          border-top: 1px solid #7a7a7a;
      }

      .footer-left,
      .footer-right {
          display: flex;
          gap: 8px;
          flex-wrap: wrap;
      }

      .footer-box {
          padding: 3px 8px;

          background: #d9d9d9;

          border: 1px inset #c0c0c0;

          font-size: 12px;
      }

      /* Scrollbar */

      .projects-wrapper::-webkit-scrollbar {
          width: 14px;
      }

      .projects-wrapper::-webkit-scrollbar-track {
          background: #c0c0c0;
      }

      .projects-wrapper::-webkit-scrollbar-thumb {
          background: #9a9a9a;

          border-top: 2px solid white;
          border-left: 2px solid white;
          border-right: 2px solid #5f5f5f;
          border-bottom: 2px solid #5f5f5f;
      }

      @media (max-width: 700px) {
          body {
              padding: 10px;
          }

          .projects {
              grid-template-columns: 1fr;
          }

          .projects-wrapper {
              height: 500px;
          }

          .footer {
              flex-direction: column;
              align-items: stretch;
          }
      }