@charset "UTF-8";
/* Extend or override Bulma's elements ../../node_modules/bulma/sass/elements */


.site-title {
  display: inline-block;
  width: 4.6em;
  word-break: keep-all; /* Shouldn't be needed but Chrome needs it. */
  font-size: 37px;
  line-height: 38px;
}

.user-account-menu li {
  display: inline-block;
  padding: .1rem .6rem;
}

/* Add a gradient across only a portion of the vertical width of the navbar. */
.header,
.sitename {
  background: linear-gradient(
    $body-background-color,
    $body-background-color 74px,
    $light-green 74px,
    $green 120px,
    $body-background-color 120px,
    $body-background-color
  );
}

#navbar-menu .navbar-item {
  font-size: 22px;
}

.slogan {
  box-shadow: 0 2px 0 0 whitesmoke;
  margin-bottom: 2px; /* Needed to see the boxshadow when we have the featured image directly below. */
  padding-bottom: 4px; /* Give just a little extra space at the bottom for the *appearance* of balance. */
  .title {
    color: $green-gray;
    font-size: 1.2rem;
  }
}

/* Give some space above the subtitle. */
.featured-image {
  margin-bottom: 0.5rem;
}

// TODO consider if this would look better with margin only on the content side
// so somehow removing left margin if the inline style has float: left applied.
// Also to consider decreasing the margin on mobile sizes.
.image-inline {
  margin: 1em;
}


.drum {
  margin-bottom: 1.2rem;
}

/* Remove empty gap from featured homepage image, to match look of content. */
.block--highlighted {
  margin-top: -1.5rem;
}

/* I know this is wrong but it seems to work flawlessly across sizes. */
.more-link {
  float: right;
  position: relative;
  top: -0.333rem;
}