/* latin-ext */
@font-face {
  font-family: 'Lato';
  font-display: swap;
  font-style: italic;
  font-weight: 400;
  src: local('Lato Italic'), local('Lato-Italic'), url(https://fonts.gstatic.com/s/lato/v15/S6u8w4BMUTPHjxsAUi-qNiXg7eU0.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Lato';
  font-display: swap;
  font-style: italic;
  font-weight: 400;
  src: local('Lato Italic'), local('Lato-Italic'), url(https://fonts.gstatic.com/s/lato/v15/S6u8w4BMUTPHjxsAXC-qNiXg7Q.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Lato';
  font-display: swap;
  font-style: italic;
  font-weight: 700;
  src: local('Lato Bold Italic'), local('Lato-BoldItalic'), url(https://fonts.gstatic.com/s/lato/v15/S6u_w4BMUTPHjxsI5wq_FQftx9897sxZ.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Lato';
  font-display: swap;
  font-style: italic;
  font-weight: 700;
  src: local('Lato Bold Italic'), local('Lato-BoldItalic'), url(https://fonts.gstatic.com/s/lato/v15/S6u_w4BMUTPHjxsI5wq_Gwftx9897g.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Lato';
  font-display: swap;
  font-style: normal;
  font-weight: 400;
  src: local('Lato Regular'), local('Lato-Regular'), url(https://fonts.gstatic.com/s/lato/v15/S6uyw4BMUTPHjxAwXiWtFCfQ7A.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Lato';
  font-display: swap;
  font-style: normal;
  font-weight: 400;
  src: local('Lato Regular'), local('Lato-Regular'), url(https://fonts.gstatic.com/s/lato/v15/S6uyw4BMUTPHjx4wXiWtFCc.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Lato';
  font-display: swap;
  font-style: normal;
  font-weight: 700;
  src: local('Lato Bold'), local('Lato-Bold'), url(https://fonts.gstatic.com/s/lato/v15/S6u9w4BMUTPHh6UVSwaPGQ3q5d0N7w.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Lato';
  font-display: swap;
  font-style: normal;
  font-weight: 700;
  src: local('Lato Bold'), local('Lato-Bold'), url(https://fonts.gstatic.com/s/lato/v15/S6u9w4BMUTPHh6UVSwiPGQ3q5d0.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

a {
  color: #1772d0;
  text-decoration: none;
}

a:focus,
a:hover {
  color: #f09228;
  text-decoration: none;
}

body,
td,
th,
tr,
p,
a {
  font-family: 'Lato', Verdana, Helvetica, sans-serif;
  font-size: 14px;
}

strong {
  font-family: 'Lato', Verdana, Helvetica, sans-serif;
  font-size: 14px;
}

h2 {
  margin: 0;
  font-weight: normal;
  font-family: 'Lato', Verdana, Helvetica, sans-serif;
  font-size: 22px;
}

.papertitle {
  font-family: 'Lato', Verdana, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: 700;
}

.name {
  padding-top: 20px;
  margin: 0;
  font-family: 'Lato', Verdana, Helvetica, sans-serif;
  font-size: 32px;
  font-weight: normal; /* .name is an <h1>; keep the original non-bold look. */
}

.one {
  width: 160px;
  height: 160px;
  position: relative;
}

.two {
  width: 160px;
  height: 160px;
  position: absolute;
  transition: opacity .2s ease-in-out;
  -moz-transition: opacity .2s ease-in-out;
  -webkit-transition: opacity .2s ease-in-out;
}

.fade {
  transition: opacity .2s ease-in-out;
  -moz-transition: opacity .2s ease-in-out;
  -webkit-transition: opacity .2s ease-in-out;
}

span.highlight {
  background-color: #ffffd0;
}

.colored-box {
    color: black;
    padding: 20px;
    display: inline-block;
    border-radius: 10px;
}

/* ===========================================================================
   Mobile / responsive.

   The layout is a set of nested <table>s with inline percentage widths, so the
   phone rules below unwind those cells into stacked blocks. The inline styles
   are more specific than a stylesheet rule, hence the !important on the
   properties that have an inline counterpart (width, max-width, padding).
   Nothing here applies above the breakpoint: the desktop look is unchanged.
   =========================================================================== */

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

html {
  /* Stop iOS Safari from inflating text on rotation. */
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  padding: 0 12px;
  overflow-wrap: break-word;
}

/* No image may push the page wider than the viewport. */
img {
  max-width: 100%;
  height: auto;
}

@media (max-width: 720px) {
  body {
    padding: 0 14px;
  }

  /* 14px is tight on a phone; nudge up and open the leading. */
  body,
  td,
  th,
  tr,
  p,
  a,
  strong,
  .papertitle {
    font-size: 15px;
  }

  p {
    line-height: 1.6;
  }

  .name {
    padding-top: 18px;
    font-size: 28px;
  }

  h2 {
    font-size: 20px;
  }

  /* Unwind every table wrapper to blocks. Leaving the outer .page as a real
     table lets the auto table algorithm factor the full-bleed negative margins
     below into its intrinsic width, which pushes the whole page wider than the
     viewport and clips the right edge. */
  .page,
  .page > tbody,
  .page > tbody > tr,
  .page > tbody > tr > td,
  .section,
  .section > tbody,
  .section tr,
  .section td,
  .footer,
  .footer > tbody,
  .footer tr,
  .footer td {
    display: block;
    width: auto !important;
    max-width: none !important;
  }

  /* ----- Header: photo on top, then name, bio, links ----- */
  .header,
  .header > tbody {
    display: block;
  }

  .header tr {
    display: flex;
    flex-direction: column;
  }

  .header td {
    display: block;
    width: auto !important;
    max-width: none !important;
    padding: 0 !important;
  }

  /* Needs to out-specify the `.header td` reset above, not just the inline
     max-width:37%, so it is qualified with the element. */
  .header td.header-photo {
    order: -1; /* the photo cell is second in source order */
    max-width: 190px !important;
    margin: 4px auto 0;
  }

  .links a,
  .webring a {
    /* Roomier tap targets than a bare inline link. */
    display: inline-block;
    padding: 6px 2px;
  }

  .webring a[style*="border"] {
    padding: 6px 16px !important;
  }

  /* ----- Section heading ----- */
  .section td {
    padding: 16px 0 !important;
  }

  /* ----- Entries: thumbnail above the text, full-bleed separators ----- */
  .entries,
  .entries > tbody,
  .entries tr,
  .entries td {
    display: block;
    width: auto !important;
  }

  .entries tr {
    /* Bleed into the body padding so a highlighted row spans the screen. */
    margin: 0 -14px;
    padding: 18px 14px;
  }

  .entries tr + tr {
    border-top: 1px solid #ececec;
  }

  .entries td {
    padding: 0 !important;
  }

  .entry-media {
    text-align: center;
  }

  /* Sized off the container, not the width attribute, so the reserved space
     matches the rendered size and the row does not shift on load. */
  .entry-media img {
    width: 100%;
    max-width: 300px;
  }

  .entry-media p {
    max-width: 44ch;
    margin: 6px auto 0 !important;
  }

  .entry-body {
    padding-top: 12px !important;
  }

  /* ----- Footer ----- */
  .footer p {
    text-align: left !important;
  }
}