/* ┬  ┌─┐┬ ┬┌─┐┬ ┬┌┬┐ */
/* │  ├─┤└┬┘│ ││ │ │  */
/* ┴─┘┴ ┴ ┴ └─┘└─┘ ┴  */
#about {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-direction: column;
}

#about > div {
  flex: 1 1 20%;
  width: 100%;
  padding: 2em 10% 0 10%;
  display: flex;
}

#about .left {
  justify-content: flex-start;
}

#about .right {
  justify-content: flex-end;
}

#about .right details > div {
  text-align: right;
}

#about .pic {
  flex: 2 1 20%;
  padding: 0;
  position: relative;
  overflow: hidden;
}
#about .pic img {
  position: absolute;
  width: 100%;
  object-fit: cover;
}

#about .underline {
  text-decoration: underline;
  font-size: inherit;
}

/* ┬ ┬┌┐┌┌─┐┌─┐┬  ┌┬┐┬┌┐┌┌─┐  ┌┬┐┌─┐┌┬┐┌─┐┬┬  ┌─┐ */
/* │ ││││├┤ │ ││   │││││││ ┬   ││├┤  │ ├─┤││  └─┐ */
/* └─┘┘└┘└  └─┘┴─┘─┴┘┴┘└┘└─┘  ─┴┘└─┘ ┴ ┴ ┴┴┴─┘└─┘ */
#about details {
  position: relative;
}

#about details summary {
  font-size: var(--h3-font-size);
}

#about details img {
  width: auto;
  height: 1.2em;
  margin: .2em;
  vertical-align: bottom;
  opacity: .5;
  transition: transform var(--transition-speed), opacity var(--transition-speed);
  cursor: pointer;
}
#about details img:hover {
  transform: scale(1.2);
  opacity: 1;
}

#about details > div {
  background: transparent;
  border: none;
  transition: opacity var(--transition-speed);
  opacity: 0;
}

#about details[open] > div {
  opacity: 1;
}