:root {
  /* typography */
  --h6: 0.7rem;
  --h5: 0.8rem;
  --h4: 1rem; /* default font-size */
  --h3: 1.2rem;
  --h2: 1.4rem;
  --h1: 1.9rem;
  --lh: 1.5; /* base line-height */
  --body: 1rem;
  --lead: 1.5rem;
  --font: "Roboto", sans-serif;
  /* other visual */
  --nav-shadow: 0 -0.4em 0.8em 0.2em rgba(0, 0, 0, 0.1);
  --input-shadow: 0 0.1em 0.4em 0 rgba(0, 0, 0, 0.1);
  --shadow: 0 0.2em 0.8em 0.2em rgba(0, 0, 0, 0.1);
  --max-width: 50em;
  --time: 0.4s;
  --easing: cubic-bezier(0.5, 1, 0.5, 1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-weight: 400;
  font-family: var(--font);
  line-height: var(--lh);
  color: #333;
  overflow-y: scroll;
  font-size: var(--body);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 900;
  font-family: var(--font);
  line-height: 0.95;
  margin: 0;
  margin-bottom: 0.1em;
}

a {
  color: inherit;
  text-decoration: none;
}
a:hover {
  color: #777;
}

p {
  margin: 0;
  margin-bottom: 1.4em;
}
p a {
  color: black;
  font-weight: bold;
}
p a:hover {
  color: #555;
}
p.lead {
  font-size: var(--lead);
  line-height: 1.2;
  text-align: center;
}
h1 {
  font-size: var(--h1);
}
h2 {
  font-size: var(--h2);
}
h3 {
  font-size: var(--h3);
}
h4 {
  font-size: var(--h4);
}
h5 {
  font-size: var(--h5);
}
h6 {
  font-size: var(--h6);
}

@media (min-width: 1000px) {
  body {
    font-size: calc(1.25 * var(--body));
  }
  p.lead {
    font-size: calc(1.25 * var(--lead));
  }
  h1 {
    font-size: calc(1.25 * var(--h1));
  }
  h2 {
    font-size: calc(1.25 * var(--h2));
  }
  h3 {
    font-size: calc(1.25 * var(--h3));
  }
  h4 {
    font-size: calc(1.25 * var(--h4));
  }
  h5 {
    font-size: calc(1.25 * var(--h5));
  }
  h6 {
    font-size: calc(1.25 * var(--h6));
  }
}
@media (min-width: 1600px) {
  body {
    font-size: calc(1.5 * var(--body));
  }
  p.lead {
    font-size: calc(1.5 * var(--lead));
  }
  h1 {
    font-size: calc(1.5 * var(--h1));
  }
  h2 {
    font-size: calc(1.5 * var(--h2));
  }
  h3 {
    font-size: calc(1.5 * var(--h3));
  }
  h4 {
    font-size: calc(1.5 * var(--h4));
  }
  h5 {
    font-size: calc(1.5 * var(--h5));
  }
  h6 {
    font-size: calc(1.5 * var(--h6));
  }
}

figure.photo {
  margin: 2em auto;
}

figure.photo img,
figure.photo video {
  border-radius: 12px;
  border: 6px solid white;
  box-shadow: var(--shadow);
  height: auto;
  max-width: 100%;
}