html, body {
  margin: 0;
  height: 100%;
}

body {
  background-image: url("dianazheng_watercolor_bg_5.jpg");
  /* background-size: cover; */
  background-position: center;
  /* background-repeat: no-repeat; */
  background-attachment: fixed;
  background-size: 1617px 2299px;
}

.container {
  display: flex;
  justify-content: center;
  align-items: safe center;
  height: 100dvh;
  overflow-x: hidden;
  overflow-y: auto;

  /* height: 100dvh; */
  /* overflow: auto; */
}

.box {
  /* background: rgba(0,0,0,0.01); */

  margin: auto;
  color: #005B08;
  font-size: clamp(0.5rem, 1.50vmax, 1.1rem);
  max-width: 32em;
  padding: 1.5em;
  /* margin: 1.5em; */
  padding-top: 3em;
  padding-bottom: 3em;
  line-height: 1.3;
}

.box h1 {
  font-size: 2em;
  margin-bottom: 2em;
  display: grid;
  grid-template-columns: 2em 1fr 3em;
  gap: 0.5em;
  line-height: 0.9;
}

.box h1 > div {
  display: flex;
  justify-content: left;
  align-items: center;
}

.box h1 .name {
  font-family: var(--display-font), serif;
  font-size: 1.5em;
}

.box h1 .contact {
  font-size: 0.45em;
  display: flex;
  justify-content: right;
  align-items: center;
  aspect-ratio: 1 / 1;
  width: 100%;
  text-align: right;
  /* background-image: url("calyx.png"); */
  /* background-size: contain; */
}

.box h1 .contact a {
  display: block;
  padding: 0.25em 0;
}

.box p { font-size: 0.8em; text-align: center; }

.box img { width: 100%; }

.box a {
  color: #0d7d17;
}

.box .section {
  margin-bottom: 3em;
}

.box > a {
  display: block;
}

.box .intro {
  display: grid;
  grid-template-columns: 1fr 10em;
  align-items: center;
  gap: 1.5em;
}

.box .intro p {
  text-align: left;
}

.box .intro p:first-child {
  font-size: 1.2em;
  margin-bottom: 1em;
}

.box .intro img {
  border-radius: 50%;
}

.box .currently, .box .previously {
  display: grid;
  grid-template-columns: 4em 1fr 4em;
  align-items: center;
  gap: 1.5em;
}

.box .currently {
  margin-left: 2em;
}

.box .previously {
  grid-template-columns: 5em 1fr 5em;
  margin-right: 2em;
}

.box .connecting {
  display: grid;
  grid-template-columns: 8em 1fr;
  align-items: center;
  gap: 1.5em;
  margin-left: 3em;
}