html {
  margin: 0;
  padding: 0;

  --off-white: #FAF8F1;
  --yellow: #FAEAB1;
  --teal: #34656D;
  --dark: #334443;
  --link-blue: #071155;
  --link-blue-hover: #051ba8;

  --max-width: 1100px;
  --side-padding: 24px;
  --section-margin: 40px;
}

@media only screen and (max-width: 500px) {
  html {
    --section-margin: 32px;
  }
}

* {
  box-sizing: content-box;
}

body {
  background: var(--off-white);
  color: black;
  margin: 0;
  padding: 0;
  font-size: 16px;
  line-height: 1.45em;
  font-family: Helvetica, Arial, sans-serif;
}

header {
  margin: 40px var(--side-padding);
  text-align: center;
  padding-bottom: 17px;
  border-bottom: 3px solid var(--teal);
}

h1 {
  font-family: "Playfair Display", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;

  font-size: 58px;
  line-height: 1em;
  color: var(--dark);
  padding: 0;
  margin: 0;
}

@media only screen and (max-width: 420px) {
  h1 {
    font-size: 48px;
  }
}

@media only screen and (max-width: 350px) {
  h1 {
    font-size: 40px;
  }
}

h2, h3, h4, h5, h6 {
  color: var(--dark);
  font-family: Garamond, Palatino, serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;

  padding: 0;
  margin: 0 0 8px;
}

h2 {
  font-size: 28px;
  margin-bottom: 12px;
}

h3 {
  font-size: 24px;
  margin-bottom: 8px;
}

p {
  padding: 0;
  margin: 0;
  margin-bottom: 1.5em;
}

p:last-child {
  margin-bottom: 0;
}

a {
  color: var(--link-blue);
}

a:hover {
  color: var(--link-blue-hover);
}

main {
  margin: 0 auto;
  max-width: var(--max-width);
}

section {
  margin: var(--side-padding) var(--side-padding) var(--section-margin);
}

.intro {
  --image-width: 280px;

  background-image: url(images/julia.jpg);
  background-repeat: no-repeat;
  background-position: left top;
  background-size: var(--image-width) auto;

  padding-left: calc(var(--side-padding) + var(--image-width));
  min-height: 280px;

  flex-direction: column;
  display: flex;
  gap: 8px;
}

.intro > ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.material-symbols-outlined {
  position: relative;
  top: 0.25em;
  padding-right: 3px;
}

@media only screen and (max-width: 650px) {
  .intro {
    --image-height: 240px;
    background-image: url(images/julia-wide.jpg);
    background-position: center top;
    background-size: auto var(--image-height);

    padding-left: 0;
    padding-top: calc(var(--side-padding) + var(--image-height));
  }
}

.contact-links {
  line-height: 2em;
}

.linked-in-logo {
  aspect-ratio: 635 / 540;
  height: 1em;
  padding-left: 4px;
  padding-right: 3px;
  position: relative;
  top: 2px;
}