/* max width is 720 px */

:root{
  --text: #000;
  --bg: #fff;
  --nm-text: #fff;
  --nm-bg: #000;
  --standard-radius: 3px;
  --layout-gap: 1em;
}

#grid-wrapper{
  /* width: 90vw; */
  min-width: 350px;
  max-width: 720px;
  margin: auto;
  display: grid;
  grid-template-columns: 0 1fr 8fr 1fr 0;
  grid-auto-rows: auto;
  gap: var(--layout-gap);
}

#content__headshot{
  min-width: 300px;
}

body {
  font-size: 16pt;
}

h1 {
  font-size: 13vw;
  overflow: hidden;
}

#content-topNav a {
  font-size: 4vw;
}

.layout-flexRow {
  flex-direction: column;
}

.content-flexSquare {
  flex-direction: row;
}

.content-form__tabular {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.content-form__tabular > *,
.content-form__tabular input[type=text],
.content-form__tabular textarea {
  width: 100%;
  font-size: 16pt;
}

.content-form__tabular label,
.content-form__tabular span {
  text-align: left;
}

.content-form__tabular legend {
  width: fit-content;
  text-align: left;
}

#content-form__submit {
  width: 100%;
  font-size: 16pt;

}

thead {
  display: none;
}

td {
  position: relative;
  display: block;
  padding:2px 2px 0 130px;
}

th {
  display: block;
}

td::before {
  position: absolute;
  text-align: right;
  width: 110px;
  left: 1px;
}

td:nth-of-type(1)::before {
  content: "First Name";
}
td:nth-of-type(2)::before {
  content: "Last Name";
}
td:nth-of-type(3)::before {
  content: "Job Title";
}

h1, h2, h3, h4{
  text-align: center;
}