body {
      background-color: #1e1e1e; /* e zezė e butė */
      color: white;
      font-family: Arial, sans-serif;
      padding: 40px 20px;
    }

    .banner {
      background-color: #2a2a2a;
      padding: 30px;
      border-radius: 12px;
      max-width: 500px;
      box-shadow: 0 0 20px rgba(0, 255, 0, 0.2);
    }

    h2 {
      color: #00cc66;
    }

    label {
      font-size: 18px;
      display: block;
      margin-bottom: 10px;
    }

    input[type="text"] {
      padding: 10px;
      width: 80%;
      border-radius: 8px;
      border: 1px solid #00cc66;
      background-color: #1e1e1e;
      color: white;
      font-size: 16px;
      margin-bottom: 20px;
    }

    button {
      padding: 12px 24px;
      margin: 10px;
      font-size: 16px;
      border: none;
      border-radius: 8px;
      background-color: #00cc66;
      color: black;
      cursor: pointer;
      transition: background-color 0.3s;
    }

    button:hover {
      background-color: #00994d;
    }

    @media (max-width: 600px) {
      .banner {
        padding: 20px;
      }

      input[type="text"] {
        width: 100%;
      }

      button {
        width: 100%;
        margin-top: 10px;
      }
    }

.container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;  /* Hapėsira midis kutive */
  justify-content: center;
  padding: 20px;
}

.box {
  background-color: #222;  /* Mund ta ndryshosh ngjyrėn sipas dėshirės */
  color: white;
  border-radius: 10px;
  padding: 20px;
  flex: 1 1 300px; /* Bėhet responsive automatikisht */
  max-width: 350px;  /* Kufizon madhėsinė maksimale pėr desktop */
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

/* Pėr ekranet e mėdha: vendos 3 kuti nė njė rresht */
@media (min-width: 900px) {
  .box {
    flex: 1 1 calc(33.33% - 20px); /* 3 kuti me hapėsirė midis */
  }
}