body {
  font-family: Arial, sans-serif;
  background-color: #f4f4f4;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

.container {
  max-width: 1600px;
  margin: 0 auto;
  padding: 20px;
  background: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  /* Added responsive design */
  @media (max-width: 1200px) {
    padding: 15px;
  }
  @media (max-width: 768px) {
    padding: 10px;
  }
}

h1 {
  text-align: center;
  color: #333;
  margin-bottom: 20px; /* Added margin bottom for better spacing */
}

.form-group {
  margin-bottom: 20px;
}

label {
  display: block;
  margin-bottom: 5px;
  color: #555;
}

input, select, button {
  width: 100%;
  padding: 10px;
  margin-top: 5px;
  border: 1px solid #ccc;
  border-radius: 4px;
  transition: box-shadow 0.3s, transform 0.3s;
}
/* Pseudo-element for glossy effect on input and select */
input:before, select:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0));
  border-radius: 4px;
  pointer-events: none;  /* Allow clicking through the pseudo-element */
  z-index: -1; /* Push behind the input/select */
}

/* Hover effect for inputs and select */
input:hover:before, select:hover:before {
  transform: scale(1.05);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}


input:focus, select:focus {
  border-color: #b9a2a2;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

button {
  background-color: rgba(73, 65, 60, 0.548);  /* Semi-transparent dark color to match the card */
  color: rgb(254, 255, 254);
  border: none;
  cursor: pointer;
  padding: 10px;
  border-radius: 4px;
  transition: background-color 0.2s;
}

button:hover {
  background-color: rgba(152, 155, 146, 0.4);  /* Slightly darker on hover */
}

#results {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: space-between;
}

.college-card {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0)), #e0f7fa;
  border-radius: 10px;
  padding: 20px;
  width: calc(25% - 20px);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  transition: transform 0.2s, background-color 0.2s;
  margin-bottom: 20px;

  position: relative;  /* For inner shadow */
}
.college-card:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0));
  border-radius: 10px;
  pointer-events: none;  /* Allow clicking through the pseudo-element */
}


.college-card:hover {
  transform: scale(1.05);
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
}


.college-card h2 {
  margin-top: 0;
}

.college-details {
  display: none;
  margin-top: 10px;
}

/* Random light colors */

.card-color-1 { background-color: #c1e8ed; }
.card-color-2 { background-color: #e2eec2; }
.card-color-3 { background-color: #ffe4b5; }
.card-color-4 { background-color: #d2d3e8; }
.card-color-5 { background-color: #ffd4d7; }
.card-color-6 { background-color: #fac0cf; }
.card-color-7 { background-color: #c4def7; }
.card-color-8 { background-color: #eef1b8; }
.card-color-9 { background-color: #fff6b8; }
.card-color-10 { background-color: #e8c7eb; }
.card-color-11 { background-color: #e0d8eb; }
.card-color-12 { background-color: #ffd6c5; }
.card-color-13 { background-color: #d8dee0; }
.card-color-14 { background-color: #ffda61; }
.card-color-15 { background-color: #b4978d; }
.card-color-16 { background-color: #bde09e; }
.card-color-17 { background-color: #f7a3b9; }
.card-color-18 { background-color: #c6b1e0; }
.card-color-19 { background-color: #a6d3a1; }
.card-color-20 { background-color: #a6e1f9; }



@media (max-width: 1024px) {
  .college-card {
    width: calc(50% - 20px);
  }
}

@media (max-width: 768px) {
  .college-card {
    width: calc(100% - 20px);
  }
}

/* Modal styles */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

.modal-content {
  background-color: #fefefe;
  margin: 15% auto; /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: 80%; /* Could be more or less, depending on screen size */
  text-align: center;
}

.modal-content p {
  font-size: 18px;
  margin-bottom: 20px;
}

.modal-content button {
  padding: 10px 20px;
  margin: 10px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.modal-content button:hover {
  background-color: #ddd;
}