@media screen and (min-width: 60em) {
  .md-sidebar--primary {
    display: none;
  }
  .md-content {
    margin-left: auto;
    margin-right: auto;
    /* Grow with the screen, but keep lines readable */
    max-width: clamp(42rem, 65vw, 60rem);
  }
}

/* Let the page use more than Material's default 61rem on large screens */
.md-grid {
  max-width: 80rem;
}

/* Comfortable reading typography */
.md-typeset {
  font-size: 0.85rem;
  line-height: 1.7;
}

.md-typeset h1 {
  font-weight: 700;
  color: var(--md-default-fg-color);
}

/* Media in posts: full width, rounded */
.md-typeset img,
.md-typeset video {
  max-width: 100%;
  height: auto;
  border-radius: 0.4rem;
}

/* Center images by default; { align=left|right } still floats them */
.md-typeset img:not([align]):not(.twemoji) {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* Separate posts on the index page */
.md-post--excerpt {
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--md-default-fg-color--lightest);
}

/* Figures spanning the full content width (e.g. a video grid) */
.md-typeset figure {
  width: auto;
}

.md-typeset figcaption {
  max-width: none;
  text-align: center;
  font-size: 0.75rem;
  color: var(--md-default-fg-color--light);
}

/* Side images: stop wrapping text on phones */
@media screen and (max-width: 44.984375em) {
  .md-typeset img[align] {
    float: none;
    width: 100%;
    margin: 1em 0;
  }
}

/* <div class="clear"></div> - push following content below floated images */
.md-typeset .clear {
  clear: both;
}

/* ``` { .lang .wrap } - wrap long lines instead of scrolling */
.md-typeset .wrap pre > code {
  white-space: pre-wrap;
  word-break: break-word;
}

/* ``` { .lang .collapse } - show the first few lines, fade the rest until clicked */
.md-typeset .collapse {
  position: relative;
}

.md-typeset .collapse:not(.expanded) {
  cursor: pointer;
}

.md-typeset .collapse:not(.expanded) pre > code {
  max-height: 10em;
  overflow: hidden;
  mask-image: linear-gradient(to bottom, black 30%, transparent);
}

.md-typeset .collapse:not(.expanded)::after {
  content: "Click to expand";
  position: absolute;
  bottom: 0.6em;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.7rem;
  color: var(--md-default-fg-color--light);
}