h1 {
  margin-bottom: 1.5rem;
  text-align: center;
}

h5 {
  margin-bottom: 0.1rem;
  color: azure;
  text-decoration: none;
}

.content {
  padding-top: 10vh;
  padding-bottom: 5vh;
  padding-left: 10vw;
  padding-right: 10vw;
}

.projects {
  display: flex; /* use flexbox */
  flex-direction: column;
  justify-content: center; /* centers rows of cards */
  gap: 20px;
  align-items: center;
}

.project-card {
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: block;
  text-decoration: none;
  color: inherit;
  /*padding: 20px;*/
  text-align: center;
  border-radius: 30px;
  height: auto;
  max-width: fit-content;
}

.project-card:hover {
  background-color: rgba(255, 255, 255, 0.1);
  transition: background-color 0.3s ease-in-out;
}

.project-card a {
  display: flex;
  height: fit-content;
  align-items: start;
  color: inherit;
  padding: 15px;
  gap: 20px;
}

.card-text-container {
  height: 100%;
  width: 50%;
  text-align: left;
}

.project-card h3 {
  height: auto;
  margin: 0;
  font-size: clamp(1.2rem, 3vw, 25px);
}

.project-card h5 {
  height: auto;
  margin: 0;
  font-weight: 200;
  color: rgba(255, 255, 255, 0.7);
  width: 100%;
  max-width: 10rem;
  font-size: calc(0.6vw + 0.66rem);
}

.content-title {
  width: 100%;
}

.icon {
  width: 50%;
  max-width: 200px;
  height: auto;
  border-radius: 20px;
}