/* vars */

:root {
  /* sizing */
  --project-data-width: 50vw;
  --project-data-max-width: 75em;
}

/* project data */

div.project-data-container {
  width: min(var(--project-data-width), var(--project-data-max-width));
  margin: 2em 0;
}
div.project-statistics {
  display: flex;
  border-bottom: 1px solid black;
}
div.project-statistics p {
  width: 50%;
  text-align: center;
  margin: 0;
  font-size: min(5vw, 1.75em);
}
div.project-statistics p:first-child {
  border-right: 1px solid black;
}
div.project-statistics p:last-child {
  border-left: 1px solid black;
}
p.developer-commentary {
  font-size: min(3vw, 1.3em);
  text-align: justify;
}

/* iframe */

iframe {
  display: block;
  border: 0;
  touch-action: none;
}

/* mobile view */

a.external-app-launch, div.project-unavailable {
  display: none;
  position: relative;
  width: 80vw;
  height: 80vw;
  max-width: 50vh;
  max-height: 50vh;
  background-color: rgb(61, 61, 61);
}

a.external-app-launch img, a.external-app-launch i, div.project-unavailable img, div.project-unavailable p {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

a.external-app-launch img, div.project-unavailable img {
  opacity: 0.6;
}

a.external-app-launch i, div.project-unavailable p {
  display: flex;
  color: white;
  position: absolute;
  align-items: center;

}

a.external-app-launch i {
  justify-content: center;
  font-size: min(50vw, 32vh);
  transform: translate(2.4%, -2.4%);
}

div.project-unavailable p {
  margin: 0;
  font-size: min(5vw, 3.16vh);
  text-align: center;
}

a.external-app-launch.always-external, a.external-app-launch.desktop-only {
  display: flex;
}

/* mobile specific styles */

@media only screen and (max-width: 600px),
only screen and (max-height: 600px) {
  :root {
    --project-data-width: 80vw;
  }

  iframe, a.external-app-launch.desktop-only {
    display: none;
  }

  a.external-app-launch:not(.desktop-only), div.project-unavailable {
    display: flex;
  }
}