#projects {
  width: 100%;
  display: grid;
  gap: 10px;
  justify-content: center;
}

#repo-link {
  color: #00008b;
}

#repo-link:hover {
  color: #4c4cad;
  text-decoration: underline;
}

@media (max-width: 414px) {
  #projects {
    grid-template-columns: 100%;
  }
}

@media (min-width: 414px) and (max-width: 768px) {
  #projects {
    grid-template-columns: 49% 49%;
  }
}

@media (min-width: 768px) {
  #projects {
    grid-template-columns: 30% 30% 30%;
  }
}

#card {
  border: 2px solid #000000;
  border-radius: 5px;
  padding: 10px;
  height: 100%;
}

#card:hover {
  border: 2px solid #00bfff;
}

.project-card,
.project-card:hover {
  color: #000000;
  text-decoration: none;
}