#bber{margin-top:2em;width:580px;}
  #bber pre{color: #fff;}
  .timeline ul {margin:0;}
  .timeline ul li {background:#3b3d42;list-style-type:none;position:relative;width:3px;margin-left:1em;padding:0.8em 0 2em;}
  .timeline ul li::after {transform: rotate(45deg);content:'';background-color: #3b3d42;display: block;position: absolute;top: 10px;left: -5px;width: 0.8em;height: 0.8em;outline:15px solid #fff;}
  .timeline ul li .itemdiv {position:relative;top:-13px;left:1em;width:670px;padding:0px 16px 0px;}
  .timeline ul li .datatime,.load button{color: #fafafa;font-size: 0.75em;font-style: italic;background-color: #3b3d42;display: inline-block;padding:4px 12px;}
  .timeline ul li .datacont{margin:0.65em 0 0.3em;}
  .timeline ul li .datacont img[src*="emotion"]{display:inline-block;width:auto;}
  .timeline ul li .datafrom{color: #aaa;font-size: 0.75em !important;font-style: italic;}
  .timeline ul li p{margin:0;font-size:16px;letter-spacing:1px;color: #3b3d42;}
  .load button{border-radius:0;border:0;padding:10px 22px;}
  .dark-theme .timeline ul li .itemdiv p{color:#fafafa;}
  .dark-theme .timeline ul li .itemdiv p svg{fill:#fafafa;}
  .dark-theme .timeline ul li .datafrom{color: #aaa;}
  .dark-theme .timeline ul li{background:#3b3d42;}
  .dark-theme .timeline ul li::after{outline: 15px solid #2f2f2f;}
  @media (max-width:860px) {
    .timeline ul li{margin-left:0;}
    .timeline ul li .itemdiv{width:calc(100vw - 75px);left:20px;}
  }
  .datacont .tag-span{color: #42b983;}
  .datasource a{font-size: 0.8rem;}
  .datacont .img{cursor:pointer;border:1px solid #3b3d42;}
  .datacont .img.square{height:180px;width:180px;object-fit:cover;}
  .resimg.grid{
      display: grid;
      grid-template-columns: repeat(3,1fr);
      grid-template-rows:auto;
      gap: 4px;
      width: calc(100%* 2 / 3);
      box-sizing: border-box;
      margin: 4px 0 0;
  }
  .resimg.grid-2{
    grid-template-columns: repeat(2, 1fr);
    width: 80%;
  }
  .resimg.grid-4{
    grid-template-columns: repeat(2, 1fr);
    width: calc(80% * 2 / 3);
  }
  .resimg.grid figure.gallery-thumbnail {
    position: relative;
    width: 100%;
    height: 0;
    padding-top: 100%;
    cursor: zoom-in;
  }
  .resimg figure{
    text-align: left;
    max-height:50%;
  }
  .resimg figure img{
    max-height:50vh;
  }
  .resimg.grid figure, figcaption {
    margin: 0 !important;
  }
  .resimg.grid figure.gallery-thumbnail > img.thumbnail-image {
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
  }