* {
  font-family: sans-serif;
  box-sizing: border-box;
  font-size: 16px;
}

body {
  background: #e9e9e9;
  padding: 10px;
}

dl {
  font-size: 20px;
  width: 600px;
}

dl div {
  /* Setup the DT (character) and DD (cast) items as a flexible layout. */
  display: flex;
  margin: 5px 0px 5px 0px;
}

dl dt {
  /*
				Setup the DT element as a NESTED flexible layout. This will control the
				IMPLICIT TEXT element (character) and the :after pseudo-element (dots)
				layouts.
			*/
  display: flex;
  /* Setup the DT (character) element to grow and take-up space. */
  flex: 1 1 auto;
  margin: 5px 0px 0px 0px;
}

dl dt:after {
  border-bottom: 2px dotted #787878;
  content: "";
  /*
				Setup the pseudo-element (dots) to grow and take-up space. This will fill
				the white-space with "dots" because it growing inside of another layout
				which is also growing.
			*/
  flex: 1 1 auto;
  margin: 0px 12px 12px 12px;
}

dl dd {
  /* Setup the DD (cast) element to shrink, allow for dots to fill space. */
  flex: 0 1 auto;
  margin: 0px 0px 0px 0px;
}

input {
  max-width: 5em;
  padding: 0.3em;
}

button {
  padding: 0.3em;
  display: block;
  margin: 30% auto;
}

h1 {
  font-size: 1.5em;
}


.last {
  border-top: 1px solid #999;
  margin-top: 1em;
  padding-top: 1em;
}

.first input {
  margin-left: 1em;
}

div[role="radiogroup"] {
  margin-top: 1em;
}


div#radioHeading {
  margin-bottom: .6em;
}

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: .5fr 1fr;
  gap: 1px 1px;
  grid-template-areas: "three-quarter three-quarter three-quarter one-quarter" "full full full full";
  max-width: 600px;
  border-top: 1px solid #999;
}

.three-quarter {
  grid-area: three-quarter;
  border-right: 1px solid #999;
  padding-top: 1em;
}

.one-quarter { grid-area: one-quarter; }

.full {
  grid-area: full;
  border-top: 1px solid #999;
}

.fairbarn-female {
  display: none;
}
.male .fairbarn-female,
.female .fairbarn-male {
  display: none;
}

.female .fairbarn-female,
.male .fairbarn-male {
  display: flex;
}

.article {
  padding:7% 25% 0 0;
}