body {
  margin: 0;
  padding: 0;
  background-color: #f8f8f8;
  color: #0066cc;
  font-family: 'Arial', sans-serif;
  font-size: 50px;
  font-style: italic;
  font-weight: bold;
  overflow-x: hidden; /* Prevent horizontal scroll */
}

.flex-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: flex-start;
  padding: 20px;
  box-sizing: border-box;
  height: 100vh; /* Adjusted height */
  overflow-y: auto; /* Allow vertical scroll only */
}

.flex-item {
  width: calc(30% - 40px); 
  height: 220px; 
  margin: 20px;
  padding: 20px;
  box-sizing: border-box;
  border: 10px solid #0066cc; /* Default border color */
  background-color: #000000;
  color: #ffffff;
  text-align: center;
  cursor: pointer;
}

/* Media Query for responsiveness */
@media screen and (max-width: 768px) {
  .flex-container {
      flex-direction: column;
  }

  .flex-item {
      width: 100%;
      box-sizing: border-box;
  }
}