.hind-me { display:none;
    }

h1 {
     margin:0px;
}
       .grid-container {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 16px;
            padding: 20px;
            margin: auto;
            font-size:18px;
        }

        .grid-item {
            text-align: center;
            padding-top:10px;
        }

        .card {
            display: none; /* Initially hidden */
            background-color: #f9f9f9;
            color:#000000;
            padding: 20px;
            margin-top: 10px;
            border-radius: 2px;
            border: 1px solid #ccc;
            text-align: center;
        }

//button {
//   font-size:18px;
//  background: none;
//  border: none;
//  color: #000080;
//  font-weight: 900; 
//}

// button:hover {
//   color: #910000;
//   font-weight: 900; 
// }

 /* Active button style */
.active-btn {
     background-color: #c0c0c0 !important;
}

.toggle-btn {
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  display: inline-block;
  line-height: 1.2;          /* avoid Safari clipping */
  font-size: 20px;
  padding: 10px 16px;        /* adjust as you like */
  color: #000;
  border: 1px solid transparent;   /* keeps box model sane */
  border-radius: 6px;        /* optional */
  min-height: 100px;          /* iOS tap target */
}

/* hover for mouse users */
.toggle-btn:hover {
  background-color: #d9d9d9;
}

/* active (pressed) for click or touch */
.toggle-btn.active {
  background-color: #c0c0c0;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
}

@media (max-width: 800px) { /* Adjust breakpoint as needed */
  .grid-container {
    gap: 8px; /* Adjust as needed */
    grid-template-columns: repeat(3, 1fr); /* 3 columns */
    padding:8px;
  }
  .toggle-btn {
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  display: inline-block;
  line-height: 1.2;          /* avoid Safari clipping */
  font-size: 20px;
  padding: 10px 16px;        /* adjust as you like */
  color: #000;
  border: 1px solid transparent;   /* keeps box model sane */
  border-radius: 6px;        /* optional */
  min-height: 44px;          /* iOS tap target */
}
}

@media (max-width: 600px) { /* Adjust breakpoint as needed */
  .grid-container {
     gap: 2px; /* Adjust as needed */
     grid-template-columns: repeat(1, 1fr); /* 1 column */
    line-height:45px; // I added this
    padding: 0 12px; // I changed this
  }
  .toggle-btn {
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  display: inline-block;
  line-height: 1.2;          /* avoid Safari clipping */
  font-size: 18px;
  padding: 10px 16px;        /* adjust as you like */
  color: #000;
  border: 1px solid transparent;   /* keeps box model sane */
  border-radius: 6px;        /* optional */
  min-height: 44px;          /* iOS tap target */
  }
}