@import "../common.css";
@import "../header.css";
@import "../footer.css";

:root {
  --title-text-margin-top: 5.7vw;
  --title-text-margin-bottom: 6.6vw;
  --title-text-font-size: 3.4vw;
  --section-margin-top: 6vw;
  --vertical-line-height: 5vw;
  --credits-font-size: 1vw;
  --person-name-margin-top: 45.98vw;
  --person-name-margin-bottom: 36.77vw;
  --person-name-font-size: 3.2vw;
}

#title-text {
  color: #777777;
  margin-top: var(--title-text-margin-top);
  margin-bottom: var(--title-text-margin-bottom);
  text-transform: uppercase;
  font-size: var(--title-text-font-size);
}

#credits-text {
  font-size: var(--credits-font-size);
  color: #000000;
}

#credits {
  display: flex;
  flex-direction: column;
  align-items: left;
  text-align: left;
  margin-top: var(--section-margin-top);
}

.vertical-line {
  height: var(--vertical-line-height);
  width: 0.1vw;
  background-color: black;
  margin: 2vw auto;
}

#person-name {
  margin-top: var(--person-name-margin-top);
  margin-bottom: var(--person-name-margin-bottom);
  font-size: var(--person-name-font-size);
  display: flex;
  flex-direction: column;
  align-items: center;
}

#person-name *:first-child {
  color: #777777;
}
#person-name *:nth-child(2) {
  transform: translateX(50%);
}

#job-description {
  color: #777777;
  font-size: 2vw;
}

#developer-details {
  color: #777777;
  font-size: 1.3vw;
}
#developer-details > * {
  margin-right: 1vw;
}
#developer-details span {
  color: black;
}