/* Fonts */
@import url("https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Source+Code+Pro&display=swap");


/* Overall appearance */
html {
    font-family: "Atkinson Hyperlegible", sans-serif;
}
code {
    font-family: "Source Code Pro", monospace;
}
div.container {
    max-width: 64rem;
}

.large {
    font-size: 120%;
}

/* Wrap */
@media
 only screen and (max-width: 38em) {
  .row {
    flex-wrap: wrap;
  }
  .card {
    width: 96%;
  }
}

:root {
    --shadow: rgba(0, 0, 0, 0.2);
    --shadow-spacing: 15px 28px 25px -18px;
    --lightgray: #E8E8E8;
    --lightborder: 1px;
    --small-spacing: 0.25rem;
}

/* Flex grid */
.row {
    display: flex;
    flex-flow: row wrap;
    width: 100%
}

.row > * {
  flex: 1; /* allow children to grow when space available */
}

.col-1 { flex-basis: 8.33%; }
.col-2 { flex-basis: 16.66%; }
.col-3 { flex-basis: 25%; }
.col-4 { flex-basis: 33.33%; }
.col-5 { flex-basis: 41.66%; }
.col-6 { flex-basis: 50%; }
.col-7 { flex-basis: 58.33%; }
.col-8 { flex-basis: 66.66%; }
.col-9 { flex-basis: 75%; }
.col-10 { flex-basis: 83.33%; }
.col-11 { flex-basis: 91.66%; }
.col-12 { flex-basis: 100%; }

/* Generic positioning */

.left {
    text-align: left;
}

.right {
    text-align: right;
}

.center {
    text-align: center;
}

/* Cards */

div.card {
  box-shadow: var(--shadow-spacing) var(--shadow);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border: solid var(--lightgray) var(--lightborder);
  display: flex;
  flex-direction: column;
  position: relative;
  padding-left: var(--small-spacing);
  padding-right: var(--small-spacing);
  margin: 1rem;
}

div.card img {
    margin: auto;
    display: block;
}

div.card img:last-child {
    padding-bottom: var(--small-spacing);
}

/* Show a table with no extra space */
table.slim {
    width: auto;
}

/* Footer */
footer {
    border-top: solid 1px gray;
}

/* Citations and abstracts */
p.bib {
    background-color: #F8F8F8;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

blockquote.abstract {
    border-left: 0.5rem #F8F8F8;
}

/* Page titles */
.page-title {
    text-align: center;
}

/* Page navigation */
.page-navigation {
  font-size: 14px;
  display: block;
  width: auto;
  overflow: hidden;
}

.page-navigation a {
  display: block;
  width: 50%;
  float: left;
  margin: 1em 0;
}

.page-navigation .next {
  text-align: right;
}