:root {
  --bg-dark: #1a1a1a;
  --bg-light: rgba(255, 255, 255, 0.1);
  --text-color: #fff;
  --highlight: #f39c12;
  --btn-bg: #333;
  --btn-hover: #555;
  --border-radius: 8px;
 }
 .avatar_stack {
 display: flex;
 align-items: center;
 gap: 0
}

.avatar_stack .avatar {
 width: 40px;
 height: 40px;
 border-radius: 50%;
 border: 2px solid #fff;
 cursor: pointer;
 transition: .3s
}

.avatar_stack .avatar:not(:first-child) {
 margin-left: -15px
}

.avatar_stack .avatar:hover {
 transform: scale(1.1)
}

.avatar_stack button.btn {
 background-color: var(--bg-light);
 color: var(--highlight);
 border-radius: 10px;
 padding: .75rem .85rem;
 transition: .2s ease-out;
 position: relative;
 border: none
}

.avatar_stack .badge_new_comment {
 background-color: var(--bg-light);
 color: var(--highlight);
 display: flex;
 align-items: center;
 justify-content: center;
 width: 30px;
 height: 30px;
 border-radius: 50%;
 font-size: 14px;
 position: absolute;
 top: -12px;
 right: -12px;
 text-align: center
}

.drawer_recent {
 position: fixed;
 right: -100%;
 top: 0;
 width: 300px;
 height: 100%;
 background: var(--bg-light);
 transition: .3s;
 overflow-y: auto;
 padding: 20px;
 z-index: 1000;
 box-shadow: -5px 0 10px rgba(0, 0, 0, .2)
}

.drawer_recent.active {
 right: 0
}

.drawer_recent h2 {
 font-size: 24px;
 color: var(--highlight)
}

.drawer_recent .close-btn {
 background: 0 0;
 border-radius: var(--btnclose-border-radius, 50%);
 border: 1px solid var(--btn-bg, #555);
 color: #fff;
 padding: 2px 6px;
 border: none;
 cursor: pointer;
 float: right;
 font-size: 16px;
 text-align: center
}

.overlay_bgdrawer_recent {
 display: none;
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background: rgba(0, 0, 0, .5)
}

.overlay_bgdrawer_recent.active {
 display: block
}

#comment_listrecent {
 overflow-y: auto;
 overflow-x: hidden;
 max-height: 80%
}

#comment_listrecent span.head_recent {
 display: flex;
 flex-wrap: wrap;
 gap: 5px
}

#comment_listrecent .comment_recenthr[data-author-id="https://www.blogger.com/profile/09057214253772093775"]>.comment_content>span.head_recent>a.link_post_head {
 position: relative;
 text-transform: uppercase;
 text-decoration: none;
 color: #fff;
 display: inline-block;
 background-size: 120% 100%;
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
 -moz-background-clip: text;
 -moz-text-fill-color: transparent;
 -ms-background-clip: text;
 -ms-text-fill-color: transparent;
 background-clip: text;
 text-fill-color: transparent;
 background-image: linear-gradient(45deg, #7794ff, #ab5aff, #ff1361, #fff800);
 animation: .8s infinite alternate shake
}

@keyframes shake {

 0%,
 10% {
  transform: skewX(-15deg)
 }

 15%,
 5% {
  transform: skewX(15deg)
 }

 100%,
 20% {
  transform: skewX(0)
 }
}

#comment_listrecent .comment_listrecent {
 margin-top: 10px
}

#comment_listrecent .comment_recenthr {
 display: flex;
 align-items: center;
 background: var(--bg-light);
 padding: 10px;
 border-radius: var(--border-radius);
 margin-bottom: 5px
}

#comment_listrecent .comment_recenthr img {
 border-radius: 50%;
 margin-right: 10px
}

#comment_listrecent a.link_post,
#comment_listrecent a.link_post_head {
 text-decoration: none;
 color: #ccc
}

#comment_listrecent .comment_content {
 flex: 1
}

#comment_listrecent .comment_recenthr p {
 margin: 0
}

#comment_drawer_recent .load_morerecent {
 background: var(--btn-bg, #333);
 color: #fff;
 padding: 8px;
 border-radius: var(--border-radius);
 border: 1px solid var(--btn-bg, #555);
 cursor: pointer;
 text-align: center;
 margin-top: 5px
}

#comment_drawer_recent .load_morerecent::hover {
 background: var(--btn-hover, #555)
}

#comment_drawer_recent .load_morerecent.loading {
 transition: .3s;
 position: relative;
 padding-right: 35px
}

#comment_drawer_recent .load_morerecent.loading::after {
 content: "";
 font-weight: 700;
 position: absolute;
 transform: translateY(-50%);
 top: 50%;
 width: 16px;
 height: 16px;
 vertical-align: text-bottom;
 border: 2px solid currentColor;
 border-right-color: transparent;
 border-radius: 50%;
 -webkit-animation: .75s linear infinite spinner-loader-recent;
 animation: .75s linear infinite spinner-loader-recent;
 margin-left: 7px
}

@keyframes spinner-loader-recent {
 to {
  transform: translateY(-50%) rotate(360deg)
 }
}

.hdnrecent {
 display: none
}