/*
Todo:

Make it component based.
Turn magic numbers into variables.
Redo it all with REM instead of EM, since EM makes everything
    dependent on the parent's font-size.
*/
/* ===========
Tooltips
============== */
#floating-tooltip {
  background-color: black;
  color: white;
  font-family: "Poppins", sans-serif;
  padding: 0.3em;
  position: absolute;
  transform: scale(0);
  opacity: 0;
  transition: transform 0.2s, opacity 0.1s;
}

#floating-tooltip-arrow {
  position: absolute;
  width: 10px;
  height: 10px;
  background-color: rgb(0, 0, 0);
  transform: rotate(45deg);
}

/* ===========
Projects page content
============== */
.project-container {
  display: grid;
  grid: auto/repeat(3, 1fr);
  gap: var(--project-gap);
  /* If items overflow container, make them do so in a centered way. */
  justify-items: center;
  justify-content: center;
  margin-top: 2rem;
  --project-width: 14.2375rem;
  --project-gap: 2.375rem;
  width: 70%;
  width: calc(var(--project-width) * 3 + var(--project-gap) * 2);
}
@media screen and (max-width: 960px) {
  .project-container {
    grid-template-columns: 1fr 1fr;
    width: 60%;
    width: calc(var(--project-width) * 2 + var(--project-gap) * 1);
  }
}
@media screen and (max-width: 640px) {
  .project-container {
    grid-template-columns: 1fr;
    justify-items: center;
    justify-content: center;
    width: 30%;
    width: calc(var(--project-width) * 1);
  }
}
.project-container .project {
  width: fit-content;
  /* prevent flicker on hover by easing the color from transparent */
  outline: 1px solid transparent;
  border-radius: 4px;
  transition: 0.3s ease-out outline-color;
}
.project-container .project:has(a:hover) {
  outline: 1px solid rgb(187, 186, 186);
}
.project-container .project .project__thumbnail {
  width: 13.438rem;
  height: 10.313rem;
  border-radius: 14px;
  background-color: #1D1B2C;
  display: flex;
  justify-content: center;
  align-items: center;
}
.project-container .project .project__thumbnail img.thumbnail__img {
  width: 12.5rem;
  height: 9.375rem;
  border-radius: 14px;
  object-fit: cover;
  /* Display document color behind image for a nice visual
  when image progressively loads due to low bandwidth */
  background: white;
  /* Hide broken image alt text */
  color: white;
  position: relative;
}
.project-container .project .icons {
  width: 13.438rem;
  height: 1.5rem;
  border-radius: 5px;
  background-color: #1D1B2C;
  margin-top: 0.688rem;
  margin-bottom: 0.938rem;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.125rem;
}
.project-container .project .project__info {
  /* Grid auto makes a row track for each item by default.
  (grid-auto-flow). Basically flex-direction: column; but shorter syntax. */
  display: grid;
  row-gap: 0.3125rem;
}
.project-container .project .project__info h2.info__heading {
  font-size: 1.25rem;
  margin-top: 0;
  line-height: 0.75em;
}
.project-container .project .project__info p.info__text {
  /* not sure why when I set the width equal to the project-thumbnail
      width, the p width isn't the same as the project-thumbnail. Weird...*/
  width: 19.438em;
  font-size: 0.688rem;
}
@media screen and (max-width: 640px) {
  .project-container .project .project__info p.info__text {
    font-size: 0.7rem;
  }
}
.project-container .project a.project__link {
  color: black;
  text-decoration: none;
  padding: 0.4rem;
  /*
      Inline elements can only contain other inline elements by default.
      Set the link to display flex (block container, flex children)
      ... so that we can have HTML5 compliance
      ... and have block children children in the clickable area.
      Also so we can position the block children.
      We could also do inline-flex, but that would be more characters.
      Many ways to pet the cat.
      https://stackoverflow.com/questions/8160494/how-to-make-a-whole-div-clickable-in-html-and-css-without-javascript
  */
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%; /* fill the whole of the parent (.project) instead of fit-content */
}

/*# sourceMappingURL=projects.css.map */