@font-face {
  font-family: 'Nunito';
  src:
    url('../font/Nunito-Regular.woff2') format('woff2'),
    url('../font/Nunito-Regular.woff') format('woff'),
    url('../font/Nunito-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* Trick which changes nothing visually but makes the footnote anchors,
superscript backlinks and headings anchor virtually lower.
Otherwise the fixed navbar is just above the footnote link when going 
back from the bottom. That way, either footnotes or anchors are in 
the middle of the page, making navigation easier */
sup[id*=fn] {
  padding-top: 20% !important;
  margin-top: -20% !important;
}

li[id*=fn] {
  padding-top: 15% !important;
  margin-top: -15% !important;
}

h1, h2, h3, h4, h5, h6 { 
  padding-top: 10% !important;
  margin-top: -10% !important;
}

/* Useful to force cards to have the same height */
.has-equal-height {
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* Justify all content but not titles nor figure captions */
p:not(.title, .subtitle, figcaption p) {
  text-align: justify;
}

/* Used only in page header, add transparency */
.box {
  background: rgba(0, 0, 0, 0.3);
}

/* Used to disable click on incoming posts in thematic series */
a.disabled {
  pointer-events: none;
  cursor: default;
}

/* New font is "smaller" in feeling */
.navbar-dropdown {
  font-size: 1rem;
}

figcaption h4, figcaption p {
  margin-top: 10px;
  font-size: 1rem !important;
  font-weight: 400 !important;
  font-style: normal;
  line-height: 1.5 !important;
  color: dimgray;
}

figure img {
  filter: drop-shadow(4px 4px 5px grey)
}

.menu-label {
  text-justify: none;
}

a.title {
  line-height: 1.5;
}

/* Workaround for horizontal scrollbar, 
probably because I'm messing with containers,
sections and columns, but I do not understand
CSS enough to fix it properly.
See https://github.com/jgthms/bulma/issues/449 */
body {
  overflow-x: hidden;
}

.content figure:not(:last-child) {
  margin-bottom: 1em !important;
}

/* Let links have a color in hero contents
so visitors can see them */
.hero .subtitle a {
  text-decoration: none;
  color: #dff5fb !important;
}

.hero a:hover {
  text-decoration: underline;
}