/* Name text on the first page. */
#title-img {
  height: calc(100vh - 133px);
  flex: 0;
}
#title-box {
  display: flex;
  flex-flow: column nowrap;
  flex: 1 1 auto;
  justify-content: center;
  align-items: center;
  gap: 8px;
}
#name {
  margin: 0px;
  padding: 0px;
	font-size: 2.875rem;
}
#name-subtext {
  margin: 0px;
  padding: 0px;
	font-size: 2rem;
}

/* Flexbox which vertically seperates potrait from text in the about section. */
#about-box {
	display: flex;
  width: 100%;
	justify-content: center;
	align-items: center;
	gap: 0px;
}
#portrait {
  margin: 0;
  padding: 4px 32px 4px 32px;
  width: min(65vw, 416px);
}
#about-text {
	display: flex;
	flex-flow: column nowrap;
	justify-content: center;
	align-items: flex-start;
}

.bio-box {
	width: 100%;
	display: inline-grid;
	grid: "tl tr" auto "bl br" auto / auto auto;
	place-content: space-evenly / stretch;
	place-items: start / center;
}
.bio-box-cell {
	margin: 4px 16px 4px 16px;
}
.one {
	grid-area: "tl";
}
.two {
	grid-area: "tr";
}
.three {
	grid-area: "bl";
}
.four {
	grid-area: "br";
}

.resume-box {
	width: 100%;
	display: flex;
  flex-flow: row nowrap;
	justify-content: center;
	align-items: flex-start;
	gap: 16px;
}
@media screen and (max-aspect-ratio: 4/5) {
  .resume-box {
    width: 100%;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    gap: 16px;
  }
}

.resume-column {
	width: max(40vw, 90vw);
	display: flex;
	flex-flow: column nowrap;
	justify-content: flex-start;
	align-items: stretch;
  gap: 8px;
}
.resume-column > .large-font {
  padding: 0px 8px 0 8px;
}
.resume-column-box {
	flex: 1 0 auto;
	padding: 4px 16px 4px 16px;
	background-color: #1f1e1e;
	font-size: 1.125rem;
  padding: 1rem;
}

.skills-grid {
	padding: 3rem 0 3rem 0;
	display: grid;
	grid: "title title title title" 1fr
				"subti subti subti2 subti2" 1fr
				"skil1 lvl1 skil2 lvl2" 1fr
				"skil3 lvl3 skil4 lvl4" 1fr
				"skil5 lvl5 skil6 lvl6" 1fr
				"subti3 subti3 subti4 subti4" 1fr
				"skil7 lvl7 skil8 lvl8" 1fr
				"skil9 lvl9 skil10 lvl10" 1fr
				"skil11 lvl11 skil12 lvl12" 1fr
				"skil13 lvl13 skil14 lvl14" 1fr
				/ 1fr 1fr 1fr 1fr;
	column-gap: 124px;
	row-gap: 6px;
	justify-content: center;
	align-content: start;
	justify-items: start;
	align-items: center;
	grid-auto-flow: column;
	width: 100%;
	height: auto;
}
@media screen and (max-aspect-ratio: 1/1) {
  .skills-grid {
    padding: 3rem 1rem 3rem 1rem;
    display: grid;
    grid: "title title" 1fr
          "subti subti" 1fr
          "skil1 lvl1" 1fr
          "skil3 lvl3" 1fr
          "skil5 lvl5" 1fr
          "subti3 subti3" 1fr
          "skil7 lvl7" 1fr
          "skil9 lvl9" 1fr
          "skil11 lvl11" 1fr
          "skil13 lvl13" 1fr
          "subti2 subti2" 1fr
          "skil2 lvl2" 1fr
          "skil4 lvl4" 1fr
          "skil6 lvl6" 1fr
          "subti4 subti4" 1fr
          "skil8 lvl8" 1fr
          "skil10 lvl10" 1fr
          "skil12 lvl12" 1fr
          "skil14 lvl14" 1fr
          / 1fr 1fr;
    column-gap: 0px;
    row-gap: 0.4rem;
    justify-content: center;
    align-content: start;
    justify-items: start;
    align-items: center;
    grid-auto-flow: column;
    width: 100%;
    height: auto;
  }
}
.skills-grid-item {
}
.skills-title {
	grid-area: title;
}
.skills-subtitle {
	grid-area: subti;
}
.end-justified-item {
	justify-self: end;
}
.skills-subtitle2 {
	grid-area: subti2;
}


/* A simple, evenly spaced grid, populated from left-right and top-down. */
#portfolio-grid {
  width: 100%;
	display: grid;
  grid-template-columns: repeat(auto-fill, 18.75rem);
  gap: 52px 20px;
  justify-content: center;
  align-content: center;
  justify-items: center;
  align-items: center;
  padding: 26px 0 26px 0;
}
/* Flexbox which contains all of the elements in a single porfolio grid cell. */
.grid-box {
  display: flex;
  flex-flow: column nowrap;
  flex: 0;
  justify-content: center;
  align-items: flex-start;
}
.grid-text-spacer {
  padding: 12px 0 0 0;
}
.grid-img {
  width: 18.75rem;
  height: 17.1875rem;
}
@media screen and (max-aspect-ratio: 4/5) and (max-width: 800) {
.test-img {
	width: 275px;
  height: 225px;
}