.page {
  font-size: 16px;
  line-height: 1.6;

  &__header {
    display: flex;
    color: var(--color-text-second);

    @media (--mobile) {
      font-size: 13px;
    }

    &-nav {
      color: inherit;
      text-decoration: none;

      @media (--mobile) {
        display: none;
      }

      &:hover {
        color: var(--color-link-active);
      }

      &:not(:last-of-type) {
        &::after {
          content: '»';
          margin: 0 0.7em 0 0.45em;
        }
      }
    }

    &-time {
      margin-left: auto;

      @media (--mobile) {
        margin-left: 0;
      }
    }

    &-button {
      @apply --button;
      @apply --button-primary;
      padding: 5px 10px;
      font-size: 13px;
      margin-left: 10px;
    }
  }

  &__title {
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.04px;
    margin-bottom: -0.2em;
  }

  .cdx-marker {
    background: rgba(245,235,111,0.33);
    padding: 3px 0;
  }

  &__content {
    a {
      text-decoration: none;
      border-bottom: 1px solid #000;
      padding-bottom: 1px;
      color: inherit;

      &:hover {
        color: var(--color-link-active);
        border-bottom-color: var(--color-link-active);
      }
    }
  }

}

/**
 * Header
 * ==================
 */
.block-header {
  margin: 1.5em 0 0.5em;

  &--2 {
    font-size: 22px;
    font-weight: 500;
  }

  &--3 {
    font-size: 18px;
    font-weight: 500;
  }
}

/**
 * Code
 * ==================
 */
.block-code {
  padding: 20px !important;
  border-radius: 5px;
  font-size: 13px;
  //border: 1px solid var(--color-line-gray);
  font-family: Menlo,Monaco,Consolas,Courier New,monospace;
  line-height: 1.7em;
}

/**
 * List
 * ==================
 */
.block-list {
  li {
    margin: 10px 0;
  }
}

/**
 * Image
 * ==================
 */
.block-image {
 margin: 40px auto;
 text-align: center;

 &__content {
   img, video {
     vertical-align: bottom;
     max-width: 100%;
   }

   &--stretched {
     max-width: none !important;
     width: calc(100% + 120px) !important;
     margin-left: -60px;

     img, video {
       width: 100%;
     }
   }

   &--bordered {
     img, video {
       border: 3px solid var(--color-line-gray);
       box-sizing: border-box;
     }
   }

   &--with-background {
     padding: 15px;
     background: var(--color-line-gray);

     img, video {
       max-width: 60%;
       margin: 0 auto;
     }
   }
 }

 &__caption {
   margin: 1em auto;
   color: var(--color-text-second);
 }
}

/**
 * Delimiter
 * ==================
 */
.block-delimiter {
  line-height: 1.6em;
  width: 100%;
  text-align: center;

  &::before {
    display: inline-block;
    content: "***";
    font-size: 30px;
    line-height: 65px;
    height: 30px;
    letter-spacing: 0.2em;
  }
}

/**
 * Table
 * ==================
 */
.block-table {
  margin: 20px 0;
  table-layout: fixed;
  width: 100%;
  border-radius: 3px;
  border-collapse: collapse;
  border: 1px solid var(--color-line-gray);

  td {
    padding: 8px 10px;
    border: 1px solid var(--color-line-gray);
  }
}