h1, h2, h3, h4 {
  font-family: Montserrat, Helvetica, sans-serif;
}

code {
  background-color: #e3f2f7;
  color: black;
}

img {
  max-width: 100%;
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-height: 350px;
}

.blog-post h3 a {
  color: black;
  font-family: Montserrat;
}

html, body {
  border-top: 3px solid #440154;
}

h3 {
  color: #26828E;
}

.container a, .panel_default h4 a, h5 a {
  color: #26828E;
}

.container-alert {
  background-color: #f2bcb8aa;
  padding: 1em;
  font-size: 15px;
}

.container-warning {
  background-color: #fbe58caa;
  padding: 1em;
  font-size: 15px;
}

a:hover {
  color: #440154;
}

div.footer {
  border-bottom: 5px solid #440154;
}

.container {
  max-width: 1000px
}

.talk-container {
  padding-top: 10px;
  font-size: 16px;
  width: auto;
  text-align: center;
}

.talk-info > ul {
  width: 50%;
  display: inline-flex;
  align-items: stretch;
  justify-content: space-between;
  font-size: 13px;
}

.talk-info > li {
  display: inline-block;
}

.talk-window {
  text-align: center;
}

.talk-window > iframe {
  display: inline-block;
  justify-content: center;
}

.profile {
  max-width: 200px;
}

.avatar {
  padding-top: 0%;
  padding-bottom: 3%;
}

.bio {
  font-size: 16px;
  max-width: 100%;
  text-align: left;
}

.bio h2 {
  font-family: Montserrat, sans-serif;
}

.twitter-tweet {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.posts {
  display: grid;
  grid-template-columns: 2fr 3fr;
  grid-template-rows: minmax(1fr, 50px);
  grid-template-areas:
    "title date";
  margin-bottom: 10px;
}

.talks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: minmax(1fr, 50px) minmax(1fr, 50px);
  grid-template-areas:
    "title description"
    "links venue";
  margin-bottom: 10px;
  font-size: 1.15em;
}

.projects {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: minmax(1fr, 50px) minmax(1fr, 50px) minmax(1fr, 50px);
  grid-template-areas:
    "title description"
    "date description"
    "links description";
  margin-bottom: 10px;
  font-size: 1.15em;
}



.talks > .title {
  grid-area: title;
  margin-right: 10px;
  margin-bottom: 5px;
}

.projects > .title {
  grid-area: title;
}

.projects h3 {
  color: black;
  margin-top: 0px;
  font-family: Montserrat;
}

.talks > .description, .projects > .description {
  grid-area: description;
}
.talks > .links, .projects > .links {
  grid-area: links;
}
.talks > .venue {
  .grid-area: venue;
}
.talks h4 {
  margin: 0px;
  font-family: Montserrat, Helvetica, sans-serif;
  font-size: 1.4em;
}

.navbar  {
  font-family: Montserrat, Helvetica, sans-serif;
}

.links p {
  font-size: 1.2em;
  font-weight: bold;
}
hr {
  border: none;
  border-top: 1px dashed;
  height: 1px;
}

/* https://meowni.ca/font-style-matcher/ */
@font-face {
  font-size: 17px
  line-height: 1.5
  font-family: Arial
  font-weight: 100
  letter-spacing: 0.6px
  word-spacing: -0.45px;
}

form.email-form {
  font-size: 1.2em;
  font-family: Montserrat;
  text-align: left;
  margin-bottom: 20px;
}

iframe.p5 {
  aspect-ratio: 3.2;
  width: 100%;
  height: 100%;
  display: block;
  border-style: none;
}

.rotate {
  display: none;
}

.rotate-icon {
  display: none;
}


@media screen and (orientation:portrait) {
    .rotate {
        background-color: rgb(0, 0,0, .5);
        height: 100%;
        position: absolute;
        display: block;
        top: 0;
        width: 100%;
        text-align: center;
    }

    .rotate-icon {
      display: block;
      background-color: white;
      height: 50%;
      position: absolute;
      width: auto;
    }
}

.rotate-holder {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.license {
  font-size: 1.3rem;
  justify-content: flex-end;
  align-content: flex-end;
}

.instructions {
  color: white;
  background-color: transparent;
  width: auto;
  height: auto;
}


/*
 * Thank you Robin Rendle!
 * https://css-tricks.com/exploring-what-the-details-and-summary-elements-can-do/
*/
details {
  border-radius: 3px;
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.15s background linear;
}

summary {
  background: #44015415;
}

details:hover,
details:focus {
  background: #44015415;
}