html {font-family: sans-serif; font-size: 16px; line-height: 1.4;}
body {max-width: 600px; margin: 0 auto 10px; position: relative;}

body .footer {
    padding-top: 35px;
}

header { margin: 1em 0 2em; column-span: all; }
header + section { margin: -1em 0 1em; }

header .logo {
    display: inline-block; margin: 0; height: 72px; width: 300px; padding: 0;
}
header nav {display: inline-block; vertical-align: top; clear: right;
           list-style: none inside;
           width: 290px; margin: 0; padding: 5px 0 0;}
header li {display: inline-block; width: 33px; margin: 5px 30px; line-height: 1.25; }
header li.nav-first-row:nth-child(-n + 2) {
  margin: 5px 24px 5px 30px;
  width: 4px;
}
header li.nav-first-row {
  margin: 5px 30px;
  width: 10px;
}
a {color: #2A6496; text-decoration: none;}
a:hover {color: #3072AB; text-decoration: underline;}

section { clear: left; }

p, dd, blockquote {
    padding: 0; margin: 20px 0; line-height: 1.4;
    text-rendering: optimizeLegibility; text-align: justify;
    hyphens: auto; -moz-hyphens: auto; -webkit-hyphens: auto;
}
li p {
    margin: 10px 0;
}

emph { font-weight: 800}

img {
    max-width: 100%
}

h1, h2, h3, h4, h5, h6 {
    margin: 0; clear: both; vertical-align: baseline;
    color: #4b2e83; font-family: 'Open Sans', sans-serif;
}

h1, .h1 { padding: 50px 0 20px; font-size: 50px; line-height: 60px; }
h2, .h2 { padding: 35px 0 15px; font-size: 40px; line-height: 50px; }
h3, .h3 { padding: 20px 0 10px; font-size: 25px; line-height: 30px; }
h4, .h4 { padding: 15px 0 10px; font-size: 20px; line-height: 25px; }
h5, .h5 { padding: 15px 0  5px; font-size: 20px; line-height: 20px; }
h6, .h6 { padding: 10px 0  5px; font-size: 20px; line-height: 20px; }

.text-paragraph { font-size: 1rem; color: black; font-weight: normal; }

a.icon img { height: 25px; vertical-align: sub; filter: grayscale(100%) contrast(500%) brightness(400%); }
a.icon.darken img { filter: brightness(0%); }
a.icon:hover img { filter: none; }
a.icon span { background: white; mix-blend-mode: screen; display: inline-block; }
a.icon:hover span { mix-blend-mode: normal; }
a.icon { background: #7cb1de; }
a.icon:hover { background: transparent; }

/* Usually used for schedules */
table {
    border-collapse: collapse; border-spacing: 0px;
    border: 1px solid #ddd;
}
td, th { text-align: left; padding: 8px; }
tr { border: 1px solid #ddd; }

.heading-right  {
    display: flex;
    flex-direction: row;
    align-items: center;
    float: right;
    margin: 0;
}
.layout .layout-cell {
    font-size: 25px;
    font-weight: normal;
    margin: 10px 0 0 20px;
}
.layout {
    border: 0px;
    background: none;
    width: fit-content;
}

ul.photo-list {
    list-style-type: none; list-style-position: inside;
    margin: 0; padding: 0; text-align: center;}
ul.photo-list li {
    float: left; width: 120px; height: 120px; margin: 0;
    text-align: center; color: transparent;
    overflow: hidden; position: relative; background: black; }
ul.photo-list img {display: block; width: 120px; margin: 0 auto; position: relative;}
ul.photo-list a {text-decoration: none; color: transparent;}

ul.photo-list .caption {
    background-color: rgba(0, 0, 0, .5); color: white; font-weight: bold; font-size: 90%;
    padding: .25em; left: 0; right: 0; bottom: 0; position: absolute; z-index: 100;
    line-height: 1.0;
}
ul.photo-list a:hover .caption { text-decoration: underline; color: #eee; }

#projects ul {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* this would make all rows the same size */
    /* grid-auto-rows: 1fr; */
    text-rendering: optimizeLegibility;
    hyphens: auto; -moz-hyphens: auto; -webkit-hyphens: auto;
    padding: 0;
    margin-left: -10px;
    margin-right: -10px;
}
#projects ul li {
    padding: 10px;
    font-size: 11px;
    list-style: none;
}
#projects ul a {
    /* make the whole box clickable */
    display: block; height: 100%;
    /* make the text seem non-linky */
    color: inherit; text-decoration: none;
}
#projects ul li:hover {
    background-color: #d9ecfd;
}
#projects ul h3 {
    font-size: 12px; padding: 0 0 4px 0;
    color: #2A6496; line-height: 15px;
    hyphens: none; -moz-hyphens: none; -webkit-hyphens: auto;
}
ul.long-list span {
    float: right;
    color: #000;
}
ul.long-list {
    list-style: none inside; padding: 0;
    column-count: 2; -moz-column-count: 2; -webkit-column-count: 2;
    line-height: 1.5;
}

#blog ul {
  list-style: none;
  padding: 0;
}

#blog > ul > li {
  padding-bottom: 12px;
  font-size: 105%;
}

#blog ul.post-info-parts {
  display: inline-block;
  vertical-align: top;
}

#blog li time {
    color: #666;
    display: inline-block;
    font-size: 85%;
    text-transform: uppercase;
}

#blog span.spacer {
  display: inline-block;
  width: 10px;
}

#more-blogs {
  text-align: center;
  /* font-size: 110%; */
  /* height: 50px; */
  vertical-align: middle;
  /* line-height: 50px; */
}

#news ol {
    list-style: none;
    padding: 0;
}
#news li { padding-bottom: 12px; }
#news li time {
    color: #666;
    display: block;
    font-size: 85%;
    text-transform: uppercase;
}

#news li p {
  margin: 0px 0px 0px 0px;
}

#news li p:not(:only-of-type):not(:first-of-type) {
    margin: 1em 0px 0px 0px;
}

#more-li { text-align: center; font: 150%; height: 50px; vertical-align: middle; line-height: 50px; }
#more-button { background: none; border: none; color: #2A6496; text-decoration: none; font-size: 1rem; }
#more-button:hover { text-decoration: underline; cursor: pointer; }

#projects_long h2 {font-size: 115%; margin: .85em 0 0; padding: 0; height: auto;}
#projects_long img { margin: 30px 10px 10px 0; float: left; width: 130px; height: auto;}

code {white-space: pre}
ol > li {padding-bottom: 4px;}

hr { margin: 5em 0; border-width: 1px 0 0; border-color: gray; }

/* mobile layout tweaks */
@media (max-width: 768px) {
    body { margin: 1em; }
    #projects ul { grid-template-columns: repeat(3, 1fr); }

    a.layout-cell { float: none; }
}
/* larger phones: 3 columns of photos */
@media
only screen
and (min-width : 375px)
and (max-width : 667px)
and (orientation : portrait) {
    #news a.layout-cell { display: none; }
    ul.photo-list li { width: 100px; height: 100px; }
    ul.photo-list img { width: 100px; }
    #projects ul { grid-template-columns: repeat(2, 1fr); };
}

/* untile project list and one-column alumni for narrow phones */
@media (max-width: 414px) {
    #news a.layout-cell { display: none; }
    ul.long-list { column-count: 1; -moz-column-count: 1; -webkit-column-count: 1; }
}

/* Makes sure that we skip all the floating boxes. */
.clearfix { clear: both; }

.visitor-photo {
  float: left;
  margin-right: 20px;
}

.visitor-table {
  width: 100%;
  margin: 0;
}

.meetings { margin: 20px 0; width: 100%; background: transparent; border: none; }
.meetings tr { border: none; }
.meetings td { padding: 4px; width: 8em; text-align: right; }
.meetings td:first-child { width: auto; text-align: left; }

.figure { margin: 1em auto; }

ul.list-unstyled {
    display: inline;
    list-style: none;
    margin: 0;
    padding: 0;
}

ul.list-unstyled > li {
    display: inline;
}


blockquote {
  margin: 0;
  padding: 0 1em;
  color: #111; /* needs to be dark-ish to also contrast against link text */
  border-left: .25em solid #d0d7de;
}