/* ---------------------------------------------------------------------------
Template: BanditHijo.dev
Author  : Rizqi Nur Assyaufi
Email   : bandithijo@gmail.com
Created : Maret 2018
--------------------------------------------------------------------------- */

/* FONTS */
@import url(/assets/fonts/give_you_glory/Give-You-Glory.css);
@import url(/assets/fonts/fira_code_nerd_font/FiraCodeMediumNerdFont.css);
@import url(/assets/fonts/fira_code/FiraCode.css);
@import url(/assets/fonts/fira_sans/FiraSans.css);
@import url(/assets/fonts/fira_sans_condensed/FiraSansCondensed.css);

/* CODE COLORSCHEME */
@import url(/assets/css/codedark.css);

/* PRELOAD */
@import url(/assets/css/preload.css);

/* ADD TO HOMESCREEN */
@import url(/assets/css/add-to-homescreen.css);

/* ROOT THEME */
@import url(/assets/css/root.css);

/* COLOR THEME */
/* @import url(/assets/css/prefers-color-scheme-light.css); */
/* @import url(/assets/css/prefers-color-scheme-dark.css); */
@import url(/assets/css/prefers-color-scheme.css);

body {
  /* background: var(--BODY-OUTSIDE-YOUNG); */
  font: 16px/1.5 'Fira Sans';
  letter-spacing: 0;
  width: 100%;
  margin: 0;
}

.markdown-body p {
  margin-bottom: 6px !important;
  margin-top: 6px !important;
}


.markdown-body table {
  padding-bottom: 6px !important;
  margin-top: 6px !important;
}

pre, code {
  color: var(--WHITE);
  font-size: 13px !important;
  border-radius: 5px;
}

pre {
  margin-bottom: 5px !important;
  margin-top: 5px !important;
}

pre.highlight {
  border-radius: 5px;
}

pre.lineno {
  color: var(--BASE04);
  padding-right: 0 !important;
}

td.gutter.gl, td.code {
  background: var(--BASE00);
  padding-right: 0 !important;
  padding-left: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.markdown-body table.rouge-table {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

.markdown-body table.rouge-table td.gutter pre.lineno {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  padding-right: 0 !important;
  padding-left: 0 !important;
  margin-bottom: 0 !important;
}

.markdown-body table.rouge-table td.code pre {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
  border-radius: 0 !important;
}

.markdown-body figure.highlight {
  margin-top: 0 !important;
}

.markdown-body figure.highlight pre {
  padding: 8px !important;
  margin-top: 0 !important;
  border-radius: 0 0 5px 5px;
}

.markdown-body pre.caption {
  padding: 8px !important;
  margin-top: 0 !important;
  border-radius: 0 0 5px 5px !important;
}

.youtube {
  margin-bottom: 10px !important;
}

mark {
  padding: 0.1em;
  background-color: var(--MARK); /* <-- yellow */
  border-radius: 2px;
  color: var(--BLACK);
}

border {
  border: 1px solid var(--BLACK);
  border-radius: 3px;
  padding:1px 3px;
}

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}

/* Global ----------------------------------------------------------------- */
.container {
  /* background: var(--WHITE); */
  /* width: menggunakan % untuk responsif design */
  max-width: 980px;
  /* untuk membuat halaman menjadi center */
  margin: auto;
  /* untuk mencegah parameter float terabaikan */
  overflow: hidden;
}

img {
  border-radius: 5px;
  margin: auto;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

h1, h2, h6 {
  margin: 0;
}

ul {
  margin: 0;
  padding: 0;
}

li {
  list-style-position: outside;
  /* color: #999999; */
}

p {
  text-align: justify;
  margin: auto;
}

a, a:visited {
  text-decoration: none;
  /* color: var(--GREEN-01); */
}

a:hover {
  border-bottom: 1px dashed var(--GREEN-02);
}

kbd {
  display: inline-block;
  padding: 3px 5px;
  font-size: 13px monospace;
  font-weight: normal;
  line-height: 10px;
  color: var(--GREY-01);
  vertical-align: middle;
  background-color: var(--WHITE-01);
  border: solid 1px var(--WHITE-02);
  border-bottom-color: var(--WHITE-02);
  border-radius: 4px;
  box-shadow: inset 0 -1px 0 var(--WHITE-02);
}

/* pre color style */
.url {
  /* background-color: var(--WHITE) !important; */
  /* border-color: var(--BLACK) !important; */
  border-width: 1px !important;
  border-style: solid !important;
  /* color: var(--BLACK) !important; */
}

.whiteboard {
  /* background-color: var(--WHITE) !important; */
  /* border-color: var(--WHITE) !important; */
  border-width: 1px !important;
  border-style: solid !important;
  /* color: var(--BLACK) !important; */
  user-select: none !important;
  -webkit-user-select: none !important;
  -ms-user-select: none !important;
  -webkit-touch-callout: none !important;
  -o-user-select: none !important;
  -moz-user-select: none !important;
}

.is-comment {
  color: var(--GREY-02);
  font-style: italic;
}

.is-success {
  color: var(--GREEN-03);
}

.is-white {
  color: var(--WHITE);
}

.is-danger {
  color: var(--RED-01);
}

.is-warning {
  color: var(--MARK);
}

.has-text-weight-bold {
  font-weight: bold;
}

/* Header ----------------------------------------------------------------- */
#header {
  /* background: var(--BROWN-01); */
  /* border-bottom: 1px solid var(--BROWN-02); */
  border-bottom-width: 1px;
  border-bottom-style: solid;
  margin: 0;
  padding-top: 10px;
}

#header .container {
  /* background: var(--WHITE); */
  border-width: 20px 20px 0 20px;
  border-style: solid;
  /* border-color: var(--WHITE); */
  border-radius: 10px 10px 0 0;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  /* untuk menghilangkan border-bottom dari header */
  margin-bottom: -2px;
}

#header .container-inner {
  border-radius: 8px 8px 0 0;
  height: 100%;
  margin: 0 auto;
  padding: 0;
}

#header .container .title {
  font-weight: bold;
  text-align: right;
  letter-spacing: -2px;
  color: var(--WHITE);
  margin: 0 20px 10px 20px;
}

#header .container .title h1 {
  font-size: 370%;
}

#header .container .description {
  font-size: 8px;
  font-weight: normal;
  text-align: right;
  color: var(--WHITE);
  margin: -20px 20px 40px 25px;
}

/* Navigation Bar --------------------------------------------------------- */
#header .nav ul {
  margin-top: 2.7em;
  padding: 13px 15px;
  min-height: 22px;
  text-align: right;
}

#header .nav li {
  list-style: none;
  display: inline-block;
}

#header .nav li a {
  font-size: 16px;
  font-weight: bold;
  color: var(--WHITE);
  text-decoration: none;
  padding: 0 7.5px;
  border-bottom: none;
}

#header .nav li a:hover,
#header .nav li a:active {
  background: var(--WHITE);
  color: var(--GREEN-01);
  border-radius: 5px;
  padding: 5px 7.5px;
}

#header .nav .active {
  background: var(--WHITE);
  color: var(--GREEN-01);
  border-radius: 5px;
  padding: 5px 7.5px;
}

/* untuk media queries */
.toggle {
  background: var(--GREEN-04);
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  margin: auto;
  padding: 10px 0;
  color: var(--WHITE);
  font-size: 30px;
  font-weight: bold;
  display: none;
}

/* Header Logo ------------------------------------------------------------ */
#header .logo {
  float: left;
  margin: 0.7% 0 0 0;
}

#header .logo img {
  width: 80%;

}

/* Main ------------------------------------------------------------------- */
#main .container {
  border-width: 0 20px 0 20px;
  border-style: solid;
  /* border-color: var(--WHITE); */
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

#main .container-edge-border {
  border-width: 0 1px 0 1px;
  border-style: solid;
  /* border-color: var(--GREY-03); */
  /* padding-bottom: 30px; */
  /* untuk memunculkan properties di atas */
  overflow: hidden;
}

.flex-parent {
  display: flex;
}

.flex-child-1 {
  order: 2;
  flex-direction: column;
}

.flex-child-2 {
  order: 1;
}

.flex-child-3 {
  order: 3;
  flex-direction: column;
}

/* Post ------------------------------------------------------------------- */
article.homepage {
  padding: 15px 0;
}

article.homepage p {
  text-align: center;
  font-size: 24px;
  font-weight: bold;
}

.post {
  padding: 20px;
  /* width: 66.0%; */
  /* float: left; */
}

.post-disqus {
  padding: 0 20px;
  /* width: 66.0%; */
  /* float: left; */
}

img.post-header-img {
  width: 30px;
  float: left;
  margin-top: 0 !important;
  margin: 0;
  padding: 0;
  clear: both;
}

.post-pre-title {
  margin: 0px 20px;
}

.post-title {
  font-family: 'Fira Sans Condensed','Ubuntu Condensed';
  font-size: 34px;
  /* color: var(--BLACK); */
  /* border-bottom: 1px dashed var(--GREY-03); */
  border-bottom-width: 1px;
  border-bottom-style: dashed;
  padding-top: 14px;
  padding-bottom: 14px;
  text-align: left;
  line-height: 40px;
  /* untuk indentasi title*/
  /* padding-left: 40px; */
  /* text-indent: -35px; */
}

.post-title a {
  /* color: var(--BLACK); */
}

.post-title a:hover {
  /* color: var(--GREEN-01); */
  border-bottom: none;
}

p.post-title-index {
  font-size: 16px;
  /* color: var(--BLACK); */
  /* border-bottom: 1px dashed var(--GREY-03); */
  border-bottom-width: 1px;
  border-bottom-style: dashed;
  text-align: left;
  padding-top: 10px;
  /* untuk indentasi title*/
  padding-left: 0.8em;
  text-indent: -0.8em;
  /* untuk mempersingkat title-index */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 98%;
}

p.post-title-index a {
  /* color: var(--BLACK); */
  border-bottom:none;
}

p.post-title-index a:hover {
  /* color: var(--GREEN-04); */
  border-bottom: none;
}

.mono {
  font-family: 'FiraCodeNerdFontComplete-Medium';
  font-size: 16px;
  /* color: var(--BLACK); */
  text-align: left;
}

.post-title-tags {
  padding-left: 12px;
  line-height: 0;
}

.post-details {
  /* background: var(--BLACK); */
  /* color: var(--WHITE); */
  text-align: center;
  font-size: 14px;
  font-weight: bold;
  width: 26em;
  position: relative;
  top: -4px;
  padding: 0 2px;
  border-width: 1px;
  border-style: solid;
  /* border-color: var(--BLACK); */
}

p.post-details-index {
  color: var(--BLACK);
  font-family: 'Fira Code';
  font-size: 14px;
  text-align: right;
  background: var(--GREY-03);
  padding: 3px 4px;
  position: relative;
  top: -28px;
  float: right;
  margin: 0;
  border-radius: 0;
}

p.post-details-index a {
  color: var(--BLACK);
  border-bottom:none;
}

p.post-details-index:before {
  content: "";
  border-top: 8px solid transparent;
  border-right: 8px solid var(--GREY-03);
  border-bottom: 8px solid transparent;
  position: absolute;
  left: -7px;
  top: 6px;
}

p.post-details-index-pin {
  color: var(--BLACK);
  font-family: 'Fira Code';
  font-size: 14px;
  text-align: right;
  background: var(--ORANGE-01);
  padding: 3px 4px;
  position: relative;
  top: -28px;
  float: right;
  margin: 0;
  border-radius: 0;
}

p.post-details-index-pin a {
  color: var(--BLACK);
  border-bottom:none;
}

p.post-details-index-pin:before {
  content: "";
  border-top: 8px solid transparent;
  border-right: 8px solid var(--ORANGE-01);
  border-bottom: 8px solid transparent;
  position: absolute;
  left: -7px;
  top: 6px;
}

.post-title-spacer {
  padding: 7px;
}

.post-body-sidebar {
  margin: 0 20px 0 20px;
}

/* GUNAKAN INI! untuk image kecil menjadi full width */
.post-body-img {
  width: 100%;
  margin: auto;
  padding: 0;
}

/* untuk image dalam sidebar */
.post-body-img-sidebar {
  width: 100%;
  margin: auto;
  padding: 0;
  border-radius: 10px;
}

/* untuk image diatur otomatis oleh template */
.post-body img {
  max-width: 100%;
  margin: auto;
  padding: 0;
}

/* Text Formating on Post */
.post-body p {
  margin: 10px 0;
}

.post-body li {
  /* color: var(--BLACK); */
  margin: 0;
  padding: 0 0 0 10px;
}

/* Sidebar ---------------------------------------------------------------- */
article.sidebar {
  padding-bottom: 30px;
}

aside.sidebar {
  /* width: 27%; */
  /* float: right; */
  width: 100%;
  float: none;
  /* margin-right: 20px; */
  /* padding-bottom: 20px; */
}

aside p.sidebar-isi {
  text-align: left;
  /* untuk indentasi title*/
  padding-left: 30px;
  text-indent: -30px;
}

aside .sidebar-body {
  /* background: var(--SIDEBAR-BODY); */
  /* border: 1px dashed var(--GREY-03); */
  border-width: 1px;
  border-style: dashed;
  border-radius: 10px;
  /* width: 91%; */
  margin: 25px 0 0 0;
  padding: 5px 10px;
}

aside .sidebar-body-rss {
  /* background: var(--YELLOW-01); */
  /* border: 1px dashed var(--GREY-03); */
  border-width: 1px;
  border-style: dashed;
  border-radius: 10px;
  /* width: 91%; */
  margin: 25px 0 0 0;
  padding: 5px 10px;
}

aside .sidebar-body-hollow {
  background: transparent;
  border: 1px dashed var(--GREY-03);
  border-radius: 10px;
  /* width: 91%; */
  margin: 25px 0;
  padding: 5px 10px;
  border: 1px dashed var(--GREY-04);
}

aside .sidebar-body-helper {
  background: var(--YELLOW-01);
  border: 1px dashed var(--GREY-03);
  border-radius: 10px;
  /* width: 91%; */
  margin: 25px 0;
  padding: 5px 10px;
  display: none;
}

aside .sidebar-body-img {
  border-radius: 10px;
  width: 99%;
  margin: 25px 20px 25px -20px;
}

aside.sidebar h1 {
  /* color: var(--BLACK); */
  font-family: 'Fira Sans Condensed', 'Ubuntu Condensed';
  font-size: 1.5em;
  /* border-bottom: 1px dashed var(--GREY-05); */
  border-bottom-width: 1px;
  border-bottom-style: dashed;
  margin-bottom: 5px;
  display: flex !important;
}

div.sidebar-body h1 img {
  width: 25px !important;
  margin: 0 10px 0 0 !important;
}

div.sidebar-body-rss h1 img {
  width: 25px !important;
  margin: 0 10px 0 0 !important;
}

aside.sidebar ul {
  list-style-type: disc;
  /* color: var(--GREEN-04); */
  margin: 0 0 0 15px;
  padding: 5px 2px 5px 5px;
}

aside.sidebar li {
  text-align: left;
  font-size: 13px;
  margin-left: -5px;
}

aside.sidebar li span {
  margin-left: -2px;
}

aside.sidebar p {
  font-size: 13px;
  margin: 5px 0;
}

/* Footer ----------------------------------------------------------------- */
#footer {
  margin: 0;
  padding-bottom: 15px;
}

#footer .container {
  /* background: var(--WHITE); */
  border-width: 0 20px 20px 20px;
  border-style: solid;
  /* border-color: var(--WHITE); */
  border-radius: 0 0 10px 10px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  /* untuk merapatkan footer dengan #post */
  margin-top: -1px;
}

#footer .container-inner {
  /* background: var(--GREY-03); */
  border-radius: 0 0 8px 8px;
  height: 100%;
  margin: 0 auto;
  padding: 0;
}

.footer-line {
  /* untuk garis di dalma kotak footer bawah */
  border-width: 0 0 1px 0;
  border-style: solid;
  /* border-color: var(--GREY-06); */
  border-radius: 0 0 8px 8px;
}

#footer .container p {
  font-size: 12px;
  letter-spacing: 1px;
  text-align: left;
  padding: 20px 0 20px 20px;
}

p.footer-menu {
  margin-top: -30px;
}

.tech-i-used-mobile {
  display: none;
}

img.footer-img-1 {
  float: right;
  margin: -160px 198px 0 0;
  width: 100px;
  filter: opacity(80%);
}

img.footer-img-2 {
  float: right;
  margin: -160px 70px 0 0;
  width: 128px;
}

img.footer-img-3 {
  float: right;
  margin: -160px 20px 0 0;
  width: 60px;
}

.tech-i-used-desktop {
  display: block;
}

img.footer-img-jekyll {
  float: right;
  margin: -135px 40px 0 0;
  width: 120px;
}

img.footer-img-ruby {
  float: right;
  margin: -128px 160px 0 0;
  width: 120px;
}

img.footer-img-github {
  float: right;
  margin: -123px 165px 0 0;
  width: 110px;
}

img.footer-img-gitlab {
  float: right;
  margin: -123px 160px 0 0;
  width: 110px;
}

img.footer-img-netlify {
  float: right;
  margin: -124px 283px 0 0;
  width: 120px;
}

img.footer-img-githubactions {
  float: right;
  margin: -135px 287px 0 0;
  width: 135px;
}

img.footer-bedge-1 {
  float: right;
  margin: -195px 20px 0 0;
  filter: grayscale(100%) opacity(60%);
  width: 115px;
}


/* Image ------------------------------------------------------------------ */
.img-caption {
  text-align: center;
  font-size: 12px;
  padding-bottom: 20px !important;
}


/* Title Quote ------------------------------------------------------------ */
.title-quote {
  text-align: left;
  font-size: 22px;
  font-weight: bold;
  padding-bottom: 1.5%;
  border-bottom: 1px dashed var(--GREEN-01);
}

/* Post Navigation -------------------------------------------------------- */
.post-nav {
  margin-top: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* disable selected */
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}

a.btn-blue-l {
  color: var(--WHITE);
  border-bottom: none;
}

.btn-blue-l {
  background: var(--GREEN-02)!important;
  border-radius: 5px;
  padding: 8px 20px;
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  margin-right: 10%;
}

.btn-blue-l:active {
  color: var(--WHITE);
  transform: translateY(2px)
}

a.btn-blue-r {
  color: var(--WHITE);
  border-bottom: none;
}

.btn-blue-r {
  background: var(--GREEN-02)!important;
  border-radius: 5px;
  padding: 8px 20px;
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  margin-left: 10%;
}

.btn-blue-r:active {
  color: var(--WHITE);
  transform: translateY(2px)
}

a.btn-blue-c {
  color: var(--WHITE);
  border-bottom: none;
}

.btn-blue-c {
  background: var(--GREEN-02)!important;
  border-radius: 5px;
  padding: 8px 20px;
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  margin: 0;
}

.btn-blue-c:active {
  color: var(--WHITE);
  transform: translateY(2px)
}

.btn-img {
  width: 20px !important;
  margin-top: 5px !important;
  margin-bottom: 5px !important;
}

.disabled,
.disabled a,
.disabled:active {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Embed Container -------------------------------------------------------- */
/* Such as: YouTube, dll -------------------------------------------------- */
.embed-container {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  max-width: 100%;
  border-radius: 5px;
}

.embed-container iframe,
.embed-container object,
.embed-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Notification Box ------------------------------------------------------- */
article.homepage .notif-home {
  width: 95%;
  padding: 1em 1em;
  font-size: 95%;
  font-weight: normal;
  margin: auto;
  margin-top: 10px;
  margin-bottom: 10px;
  /* border: 1px solid var(--BLACK); */
  border-width: 1px;
  border-style: solid;
  border-radius: 5px;
}

article.homepage .notif-home p,
article.homepage .notif-home a {
  /* color: var(--BLACK); */
  font-size: 95%;
  font-weight: normal;
  border-bottom: none;
  text-align: left;
  /* untuk indentasi title*/
  padding-left: 15px;
  text-indent: -27px;
}

p.kalender-item {
  border: 1px solid var(--BLACK) !important;
  border-radius: 5px;
  background:var(--WHITE);
  width: 100%;
  font-size: 90% !important;
  font-weight: normal;
  margin: auto;
  padding: 5px !important;
  /* untuk indentasi title*/
  padding-left: 84px !important;
  text-indent: -72px !important;
}

p.kalender-item.on {
  border: 1px solid var(--BLACK) !important;
  background: var(--YELLOW-02) !important;
}

p.kalender-item.off {
  border: 1px solid var(--GREY-03) !important;
  background: var(--GREY-07) !important;
  color: var(--GREY-03) !important;
}

p.kalender-item.next {
  border: 1px dashed var(--GREY-03) !important;
  background: var(--WHITE) !important;
  color: var(--GREY-03) !important;
}

.notif-rundown {
  width: 100%;
  padding: 0.3em 1em;
  font-size: 95%;
  font-weight: normal;
  margin: auto;
  margin-top: -10px;
  margin-bottom: 0;
  border: 1px solid var(--BLACK);
  border-radius: 5px;
  background:var(--WHITE);
}

.notif-rundown p,
.notif-rundown a {
  color: var(--BLACK);
  font-size: 95%;
  font-weight: normal;
  border-bottom: none;
  text-align: left;
  /* untuk indentasi title*/
  padding-left: 64px;
  text-indent: -128px;
}

p.rundown-item {
  border: 1px solid var(--BLACK) !important;
  border-radius: 5px;
  background:var(--WHITE);
  width: 100%;
  font-size: 90% !important;
  font-weight: normal;
  margin: 10px 0 !important;
  padding: 5px !important;
  /* untuk indentasi title*/
  padding-left: 86px !important;
  text-indent: -79px !important;
}

p.rundown-item.on {
  border: 1px solid var(--BLACK) !important;
  background: var(--YELLOW-02) !important;
}

p.rundown-item.off {
  border: 1px solid var(--GREY-03) !important;
  background: var(--GREY-07) !important;
  color: var(--GREY-03) !important;
}

p.rundown-item.next {
  border: 1px dashed var(--GREY-03) !important;
  background: var(--WHITE) !important;
  color: var(--GREY-03) !important;
}

p.notif-post {
  margin: auto;
  width: 100%;
  padding: 1em 1em;
  font-size: 25px;
  font-weight: bold;
  color: var(--WHITE);
  text-align: center;
  text-shadow:
  -2px -2px 0 #232323,
  0    -2px 0 #232323,
  2px  -2px 0 #232323,
  2px  0    0 #232323,
  2px  2px  0 #232323,
  0    2px  0 #232323,
  -2px 2px  0 #232323,
  -2px 0    0 #232323;
  /* border: 1px solid #F82C3B; */
  border: 2px solid #232323;
  border-radius: 5px;
  /* background:#FBD7D2; */
  background: repeating-linear-gradient(
  135deg,
  #FFCC00,
  #FFCC00 15px,
  #232323 15px,
  #232323 30px);
}

.tab {
  overflow: hidden;
  float: right;
  margin-right: -65px !important;
  margin-bottom: -20px !important;
  position: relative;
  top: -14.0em !important;
  right: 7.5em !important;
}

button.tablinks {
  background-color: #7C7C7C;
  color: #B8B8B8;
  outline: none;
  font-size: 10px;
  font-weight: bold;
  padding: 2px 3px;
  border: none;
  border-radius: 3px 3px 0 0;
}

button.active {
  background-color: #404040;
}

.tabcontent {
  display: none;
}

.notif-donasi {
  width: 43%;
  padding: 0 !important;
  color: #404040;
  border: 1px solid #404040;
  border-radius: 5px;
  display: flex;
  float: right;
  margin: auto;
  margin-top: -190px !important;
  margin-right: 20px !important;
}

.notif-donasi-col-1 {
  flex: 70%;
}

.notif-donasi-col-2 {
  flex: 30%;
  border-left: 1px dashed #404040;
}

.notif-donasi p {
  color: #404040;
  font-size: 11px !important;
  padding: 5px 5px !important;
  text-align: left !important;
}

.notif-donasi-img {
  padding: 5px !important;
  width: 120px !important;
}

.notif-info {
  width: 40%;
  padding: 0 !important;
  color: #404040;
  border: 1px solid #404040;
  border-radius: 5px;
  display: flex;
  float: right;
  margin: 0 auto;
}

.notif-info-col-1 {
  flex: 70%;
  padding: 5px 10px !important
}

.notif-info-col-2 {
  flex: 30%;
  border-left: 1px dashed #404040;
  padding: 5px !important;
}

.notif-info p {
  font-size: 10px !important;
  padding: 0 !important;
  font-weight: normal !important;
  text-align: left !important;
  margin: 0 !important;
}

.notif-info-img {
  padding: 5px !important;
}

/* HOT TUGAS -------------------------------------------------------------- */
.hot {
  background: red;
  border-radius: 2px;
  padding: 1px 2px;
  color: var(--WHITE);
  /* animation: 1s blink infinite; */
  font-size: 12px;
  font-weight: bold;
}

.new {
  background: red;
  border-radius: 2px;
  padding: 1px 2px;
  margin-left: 1px;
  color: var(--WHITE);
  font-size: 12px;
  font-weight: bold;
  /* animation: 1s blink infinite; */
  position: relative;
  top: 0;
}

.tag {
  background: #008352;
  border-radius: 2px;
  padding: 1px 2px;
  margin-left: 1px;
  color: var(--WHITE);
  font-size: 12px;
  position: relative;
  top: 0;
}

.tag a {
  color: var(--WHITE);
  border-bottom: none !important;
}

.wiptag_title {
  /* background: var(--BLACK); */
  border-radius: 3px;
  padding: 2px 10px;
  /* color: var(--WHITE); */
  font-weight: bold;
}

.wiptag {
  /* background: var(--BLACK); */
  border-radius: 3px;
  padding: 2px 3px;
  margin-left: 1px;
  /* color: var(--WHITE); */
  font-size: 10px;
  font-weight: bold;
  position: relative;
  top: -2px;
}

.voice {
  background: var(--BLACK);
  border-radius: 3px;
  padding: 2px 3px;
  margin-left: 1px;
  color: var(--WHITE);
  font-size: 10px;
  position: relative;
  top: -2px;
}

.notag {
  /* background: var(--WHITE); */
  border-radius: 3px;
  padding: 2px 3px;
  margin-left: 1px;
  /* color: var(--WHITE); */
  font-size: 10px;
  position: relative;
  top: -2px;
}

.emblem-l {
  background-color: transparent;
  border: 1px solid var(--WHITE);
  border-radius: 5px 0 0 5px;
  color: var(--WHITE);
  font-size: 12px;
  padding: 5px 5px 5px 5px;
}

.emblem-r {
  background-color: var(--WHITE);
  border: 1px solid var(--WHITE);
  border-radius: 0 5px 5px 0;
  color: #008352;
  font-size: 12px;
  padding: 5px 5px 5px 5px;
}

.emblem-f {
  background-color: var(--WHITE);
  border: 2px solid var(--WHITE);
  border-radius: 5em 2em 2em 5em;
  color: #008352;
  font-size: 12px;
  font-weight: bold;
  padding: 5px 0 5px 10px;
}

.emblem-e {
  background-color: #008352;
  border: 1px solid #008352;
  border-radius: 5px;
  color: var(--WHITE);
  font-size: 12px;
  font-weight: bold;
  padding: 3px 5px;
  margin: 5px 1px 5px 5px;
}

.tombol-a {
  background-color: var(--BLACK);
  border-radius: 5em;
  color: var(--WHITE);
  font-size: 12px;
  padding: 3px 8px;
  margin: 0;
}

.tags-hollow {
  background: transparent;
  border: 1px solid #8B8B8B;
  border-radius: 2px;
  padding: 1px 2px;
  margin-left: 1px;
  color: #8B8B8B;
  font-size: 10px;
  /* font-weight: bold; */
  position: relative;
  top: -1px;
}

.tags-on {
  background: transparent;
  border: 1px solid var(--BLACK);
  border-radius: 3px;
  padding: 2px 10px;
  margin-left: 2px;
  color: var(--BLACK);
  font-size: 90%;
  font-weight: normal;
  position: relative;
  top: -1px;
}

.tags-on-btn {
  background: var(--WHITE);
  border: 1px solid var(--BLACK);
  border-radius: 3px;
  padding: 2px 3px;
  margin-left: 2px;
  color: var(--BLACK);
  font-size: 90%;
  font-weight: normal;
  position: relative;
  top: -1px;
}

.tags-off {
  background: transparent;
  border: 1px solid #B8B8B8;
  border-radius: 3px;
  padding: 2px 10px;
  margin-left: 2px;
  color: #B8B8B8;
  font-size: 90%;
  font-weight: normal;
  position: relative;
  top: -1px;
}

.tags-off-btn {
  background: #B8B8B8;
  border: 1px solid transparent;
  border-radius: 3px;
  padding: 2px 3px;
  margin-left: 2px;
  color: var(--WHITE);
  font-size: 90%;
  font-weight: normal;
  position: relative;
  top: -1px;
}

.tags-next {
  background: transparent;
  border: 1px solid #B8B8B8;
  border-radius: 3px;
  padding: 2px 3px;
  margin-left: 2px;
  color: #B8B8B8;
  font-size: 90%;
  font-weight: normal;
  position: relative;
  top: -1px;
}

.tags-in-post {
  margin-top: 5px;
  color: var(--WHITE);
}

.tags {
  background: #008352;
  border-radius: 3px;
  padding: 2px 3px;
  font-size: 12px;
  text-transform: capitalize;
  white-space: nowrap;
}

.tags a {
  color: var(--WHITE);
  border-bottom: none !important;
}

.status-ok {
  background: #008352;
  border-radius: 2px;
  padding: 1px 2px;
  margin-left: 1px;
  color: var(--WHITE);
  font-size: 16px;
  font-weight: bold;
  position: relative;
  top: -1px;
}

.status-error {
  background: #FAA124;
  border-radius: 2px;
  padding: 1px 2px;
  margin-left: 1px;
  color: var(--WHITE);
  font-size: 16px;
  font-weight: bold;
  position: relative;
  top: -1px;
}

.status-failed {
  background: #FA0101;
  border-radius: 2px;
  padding: 1px 2px;
  margin-left: 1px;
  color: var(--WHITE);
  font-size: 16px;
  font-weight: bold;
  position: relative;
  top: -1px;
}

@keyframes blink {
  0% { opacity: 0.0; }
  100% { opacity: 1.0; }
}

/* BOX -------------------------------------------------------------------- */
.box-container {
  width: 100%;
  margin: auto;
  /* untuk membuat box berada di center dan rata atas */
  display: flex;
  justify-content: center;
}

.box {
  width: 27.5%;
  margin: 0 20px 40px 20px;
  border-radius: 5px;
  cursor: pointer;
}

.box-img {
  background: #F5FFDA;
  width: 100%;
  border-radius: 5px 5px 0 0;
}

.box-img:hover {
  background: #EBFFB4;
}

.box-text {
  text-align: center;
  color: var(--WHITE);
  padding: 10px;
  background: #008352;
  border-radius: 0 0 5px 5px;
  font-size: 12px;
}

/* banner-home ------------------------------------------------------------ */
.banner-home {
  margin: auto;
  padding: 5px 1.2em;
}

.banner-home img {
  background: var(--BLACK);
  width: 100%;
  border-radius: 6px;
  justify-content: center;
}

/* font-latin ------------------------------------------------------------- */
.font-latin {
  font: 18px 'Give You Glory';
  font-weight: bold;
}

.font-pixel {
  font-family: 'VT323';
}

/* stabilo ---------------------------------------------------------------- */
.stabilo {
  background: yellow;
  padding: 2px 5px;
  border-radius: 3px;
}

/* blockquote red --------------------------------------------------------- */
.blockquote-red {
  margin: 0;
  margin-top: 15px;
  margin-bottom: 15px;
  padding: 0.7em 0.7em;
  color: var(--BLACK);
  /* background color quote */
  background: #FBD7D2;
  border-left: 0.35em solid #F82C3B;
  border-radius: 0 5px 5px 0;
  /* disable selected */
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari */
  -khtml-user-select: none; /* Konqueror HTML */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none; /* Non-prefixed version, currently
  supported by Chrome and Opera */
}

.blockquote-red-title {
  font-family: 'Fira Sans Condensed','Ubuntu Condensed';
  font-size: 1.3em;
  font-weight: bold;
  color: var(--BLACK) !important;
  border-bottom: 1px dashed #BE7000 !important;
  margin-top: 0 !important;
  margin-bottom: 10px !important;
  padding-bottom: 10px !important;
  display: flex !important;
}

.blockquote-red-title img {
  width: 25px !important;
  margin: 0 10px 0 0 !important;
}

/* blockquote blue -------------------------------------------------------- */
.blockquote-blue {
  margin: 0;
  margin-top: 15px;
  margin-bottom: 15px;
  padding: 0.7em 0.7em;
  color: var(--BLACK);
  /* background color quote */
  background: #BDDFF1;
  border-left: 0.35em solid #2C76F8;
  border-radius: 0 5px 5px 0;
  /* disable selected */
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}

.blockquote-blue-title {
  font-family: 'Fira Sans Condensed','Ubuntu Condensed';
  font-size: 1.3em;
  font-weight: bold;
  color: var(--BLACK) !important;
  border-bottom: 1px dashed #0B4AB9 !important;
  margin-top: 0 !important;
  margin-bottom: 10px !important;
  padding-bottom: 10px !important;
  display: flex !important;
}

.blockquote-blue ol li {
  color: var(--BLACK);
}

.blockquote-blue-title img {
  width: 25px !important;
  margin: 0 10px 0 0 !important;
}

/* blockquote yellow ------------------------------------------------------ */
.blockquote-yellow {
  margin: 0;
  margin-top: 15px;
  margin-bottom: 15px;
  padding: 0.7em 0.7em;
  color: var(--BLACK);
  /* background color quote */
  background: #F3E681;
  border-left: 0.35em solid #F8A52C;
  border-radius: 0 5px 5px 0;
  /* disable selected */
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}

.blockquote-yellow-title {
  font-family: 'Fira Sans Condensed','Ubuntu Condensed';
  font-size: 1.3em;
  font-weight: bold;
  color: var(--BLACK) !important;
  border-bottom: 1px dashed #BE7000 !important;
  margin-top: 0 !important;
  margin-bottom: 10px !important;
  padding-bottom: 10px !important;
  display: flex !important;
}

.blockquote-yellow-title img {
  width: 25px !important;
  margin: 0 10px 0 0 !important;
}

/* license ---------------------------------------------------------------- */
.ccbysa-img {
  float: right;
  margin: 2px 10px 0 0;
}

.ccbysa-text {
  font-size: 14px;
}

/* penulis ---------------------------------------------------------------- */
.penulis-img {
  float: left;
  margin: 0 10px 0 0;
  width: 20%;
  border-radius: 50%;
}

.penulis-img img {
  width: 60%;
}

.penulis-text {
  padding-top: 0;
  font-size: 14px;
}

/* kontributor ------------------------------------------------------------ */
.kontributor-box {
  display: inline-block;
}

img.kontributor-img  {
  float:left;
  padding-right: 5px;
  width: 65px;
  border-radius: 50%;
  margin:0 auto;
}

/* collapsible ------------------------------------------------------------ */
.collapsible {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

.collapsible:hover {
  background-color: #ccc;
}

.content {
  padding: 0 18px;
  display: none;
  overflow: hidden;
  background-color: #f1f1f1;
}

/* dotfriends-page -------------------------------------------------------- */
.dotfriends-page {
  width: 100%;
}

.dotfriends-page-img {
  float: left;
  width: 20%;
}

.dotfriends-page-img img {
  border-radius: 50%;
  width: 70%;
}

.dotfriends-page-detail {
  float: left;
  width: 72%;
  margin-left: 15px;
  padding-left: 15px;
  border-left: 1px dashed #A09991;
}

/* 2 kata tidak terpisah ---------------------------------------------------*/
.nobr {
  white-space: nowrap;
}

/* log-page --------------------------------------------------------------- */
.log-page {
  width: 100%;
  margin-left: 0;
  padding-left: 20px;
}

.log-page ul {
  margin-left: -30px;
}

.log-page ul li {
  text-align: left;
  /* untuk indentasi list */
  padding-left: 77px;
  text-indent: -92px;
  list-style-position: inside;
}

.log-page a {
  color: #505154;
}

.log-page a:hover {
  color: #00653F;
  border-bottom: none;
}

/* Remove dotted outline border selected Firefox -------------------------- */
button:focus,
a:focus, a:active,
button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
select::-moz-focus-inner,
input[type="file"] > input[type="button"]::-moz-focus-inner {
  outline: none !important;
}

select:-moz-focusring {
  color: transparent;
  text-shadow: 0 0 0 var(--BLACK);
}

select:focus::-ms-value {
  background-color: none;
  color: none;
}

/* Checkbox --------------------------------------------------------------- */
ul.chkbox {
  list-style: none;
}

ul.chkbox li {
  text-align: left;
}

ul.chkbox li:before {
  content: "[ ]"; /* menggunakan unicode u+2000 */
  display: inline-block;
  padding-left: 0;
  text-indent: -33px;
}

ul.chkbox li.chkbox-checked:before {
  content: "[+]";
  display: inline-block;
  padding-left: 0;
  text-indent: -33px;

}

/* TOC -------------------------------------------------------------------- */

.toc {
  margin: 5px 0;
}

.toc .current {
  font-weight: bold;
}

/* BREADCRUMBS ------------------------------------------------------------ */
.breadcrumbs {
  font-size: 14px;
}

/* COOKIE-CONSENT --------------------------------------------------------- */
#cookie-notice {
  padding: 7px 15px;
  display: none;
  text-align: center;
  position: fixed;
  bottom: 0;
  width: 100%;
  background: #222;
  color: rgba(255,255,255,0.8);
}

#cookie-notice a {
  cursor: pointer;
  margin-left: 10px;
}
@media (max-width: 767px) {
  #cookie-notice span {
    display: block;
    padding-top: 3px;
    margin-bottom: 13px;
  }

  #cookie-notice a {
    position: relative;
    bottom: 4px;
  }
}

/* DOA-AWAL & AKHIR ------------------------------------------------------- */
.doa-awal p {
  font-size: 30px;
  font-weight: bold;
  text-align: right;
}

.doa-akhir p {
  margin-top: 40px !important;
  font-size: 30px;
  font-weight: bold;
  text-align: center;
}

/* DISQUS ----------------------------------------------------------------- */
#disqus_thread {
  margin-top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.disqus_button {
  background: #008352;
  border-radius: 5px;
  padding: 5px 10px;
  white-space: nowrap;
}

a.disqus_button {
  color: var(--WHITE);
  font-size: 18px;
  font-weight: bold;
  text-transform: capitalize;
}

/* HIDE ASIDE ------------------------------------------------------------- */
.hideAside {
  float: right;
  text-align: center;
  border-radius: 0 0 5px 5px;
  background: #008352;
  width: 30px;
  height: 30px;
  font-weight: bold;
  font-size: 18px;
  color: var(--WHITE);
  cursor: pointer;
  position: relative;
  right: 0;
  top: -1px;
}

/* STRIPES ---------------------------------------------------------------- */

.container-inner-strip {
  background: repeating-linear-gradient(
  135deg,
  #007D4F,
  #007D4F 2px,
  #008352 2px,
  #008352 5px);
}

.nav-strip {
  background: repeating-linear-gradient(
  135deg,
  #0C4B33,
  #0C4B33 15px,
  #05452D 15px,
  #05452D 30px);
}

/* NEWSLINE --------------------------------------------------------------- */

.newsline-high {
  height: 25px;
  background: repeating-linear-gradient(
  45deg,
  #FF422F,
  #FF422F 15px,
  #FD2E19 15px,
  #FD2E19 30px);
}

.newsline-low {
  height: 25px;
  background: repeating-linear-gradient(
  45deg,
  #EA9700,
  #EA9700 15px,
  #FFA500 15px,
  #FFA500 30px);
}

.newsline-high p {
  color: var(--WHITE);
}

.newsline-high p a,
.newsline-high p a :hover {
  color: var(--WHITE);
  font-weight: bold;
  border-bottom-color: var(--WHITE);
}

.newsline-low p {
  color: var(--BLACK);
}

.newsline-low p a,
.newsline p a:hover {
  color: var(--BLACK);
  font-weight: bold;
  border-bottom-color: var(--BLACK);
}

.newsline-high, .newsline-low {
  font-size: 14px !important;
  font-weight: normal !important;
  width: 100%;
  margin: 0 auto;
  padding-top: 5px;
  text-align: center;
}

.sticky {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;
}

/* Add styles for the scrolling effect */
#newsline {
  overflow: hidden;
  white-space: nowrap;
  display: flex;
  align-items: center;
}

.scrolling-text {
  display: inline-block;
  white-space: nowrap;
  position: relative;
}

.scrolling-text p {
  display: inline-block;
  margin: 0;
  padding-right: 0%; /* Add spacing between repetitions */
  animation: scroll-left 25s linear infinite;
}

.scrolling-text p::after {
  content: attr(data-text); /* Dynamically duplicate the content */
}

@keyframes scroll-left {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
}

/* MODAL ------------------------------------------------------------------- */

.myImg {
  cursor: zoom-in;
  transition: 0.3s;
  max-width: 100%;
}

.myImg:hover {opacity: 0.9;}

.modal {
  display: none;
  z-index: 1;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0,0.9);
}

img.modal-content {
  margin: auto;
  display: block;
  max-width: 100%;
  max-height: 100%;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

@media only screen and (max-width: 700px){
  .modal-content {
    width: 100%;
  }
}

pre b,
code b {
  color: #FFCC00;
}

pre.url b {
  /* color: var(--BLACK) !important; */
}

pre span.cmd {
  user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  -webkit-touch-callout: none;
  -o-user-select: none;
  -moz-user-select: none;
}

.markdown-body table.rouge-table td.gutter pre.lineno {
  text-align: right;
  user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  -webkit-touch-callout: none;
  -o-user-select: none;
  -moz-user-select: none;
  border-radius: 0;
}

div.highlight-caption {
  padding-top: 4.25px;
  padding-right: 8.5px;
  padding-bottom: 6.25px;
  padding-left: 8.5px;
  background-color: var(--BASE01);
  border: 1px solid #ccc;
  border: 1px solid rgba(0,0,0,0.15);
  border-bottom: none;
  -webkit-border-radius: 4px 4px 0 0;
  -moz-border-radius: 4px 4px 0 0;
  border-radius: 5px 5px 0 0;
  overflow: auto;
  margin-top: 10px;
  white-space: nowrap;
}

div.highlight-caption span.label {
  display: inline;
  padding: .2em .6em .3em;
  font-size: 75%;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: .25em;
  background-color: var(--WHITE);
  color: var(--BLACK);
  user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  -webkit-touch-callout: none;
  -o-user-select: none;
  -moz-user-select: none;
}

div.highlight-caption code {
  border: none;
  background-color: var(--background-cap) !important;
  color: var(--WHITE);
  font-weight: bold;
  margin-left: 0.2em;
}

/* COLLAPSIBLE TITLE */
.collapsible-title {
  cursor: pointer;
  border: none;
  outline: none;
}

.collapsible-title:before {
  content: '\002B';
  /* color: var(--BLACK); */
  float: left;
  margin-right: 13px;
}

.collapsible-title.active:before {
  content: "\2212";
}

.content-title {
  padding: 0 13px;
  display: none;
  overflow: hidden;
  font-size: 14px;
  width: 92%;
  margin-top: -6px;
  margin-bottom: 6px;
  border-bottom: 1px dashed #B8B8B8;
}

.keyboard-mapping {
  /* border-color: var(--BLACK); */
  border-width: 1px;
  border-style: dashed;
  border-radius: 5px;
  font-family: 'Fira Sans';
  font-weight: bold;
  font-size: 30px;
  padding: 3px 8px;
}

/* Search */
input#search-input,
input#search-input:focus {
  /* background: var(--WHITE); */
  /* border-color: var(--WHITE); */
  border-width: 1px;
  border-style: solid;
  outline: none;
}
input[type="text" i] {
  padding: 0;
}
ul#results-container > li {
  padding: 0;
}

/* ------------------------------------------------------------------------ */
/*
 ████     ████              ██ ██
░██░██   ██░██             ░██░░
░██░░██ ██ ░██  █████      ░██ ██  ██████
░██ ░░███  ░██ ██░░░██  ██████░██ ░░░░░░██
░██  ░░█   ░██░███████ ██░░░██░██  ███████
░██   ░    ░██░██░░░░ ░██  ░██░██ ██░░░░██
░██        ░██░░██████░░██████░██░░████████
░░         ░░  ░░░░░░  ░░░░░░ ░░  ░░░░░░░░

   ███████                           ██
  ██░░░░░██                         ░░
 ██     ░░██  ██   ██  █████  ██████ ██  █████   ██████
░██      ░██ ░██  ░██ ██░░░██░░██░░█░██ ██░░░██ ██░░░░
░██    ██░██ ░██  ░██░███████ ░██ ░ ░██░███████░░█████
░░██  ░░ ██  ░██  ░██░██░░░░  ░██   ░██░██░░░░  ░░░░░██
░░███████ ██░░██████░░██████░███   ░██░░██████ ██████
░░░░░░░ ░░  ░░░░░░  ░░░░░░ ░░░    ░░  ░░░░░░ ░░░░░░
*/
/* ------------------------------------------------------------------------ */
/* Untuk mengcover layar fullhd */
@media (width: 1920px) {

  .container {
    /* max-width: 74%; */
    max-width: 940px;
    /* untuk membuat halaman menjadi center */
  }

  .post {
    padding: 20px;
    /* width: 67.0%; */
    /* float: left; */
  }
}

@media (max-width: 1320px) {
  .container {
    max-width: 74%;
    /* untuk membuat halaman menjadi center */
  }

  .post {
    padding: 20px;
  }
}

@media (max-width: 1268px) {

  #header .container .title h1 {
    font-size: 350%;
  }

  #header .logo {
    float: left;
    margin: 1.0% 0 0 0;
  }

  #header .logo img {
    width: 76%;
  }

  .container {
    max-width: 940px;
    /* untuk membuat halaman menjadi center */
  }

  .post {
    padding: 20px;
    /* padding-top: 0; */
  }
}

@media (max-width: 1150px) {

  #header .container .title h1 {
    font-size: 350%;
  }

  #header .logo {
    float: left;
    margin: 1.5% 0 0 0;
  }

  #header .logo img {
    width: 73%;
  }

  .container {
    max-width: 940px;
    /* untuk membuat halaman menjadi center */
  }
}

/* Untuk mengcover layar di bawah hd */

@media (max-width: 1024px) {
  .container {
    max-width: 92%;
  }

  #header .logo {
    float: left;
    margin: 1.5% 0 0 0;
  }

  #header .nav ul {
    margin-top: 2.9em;
  }
}

@media (max-width: 768px) {
  .container {
    max-width: 100%;
  }

  #header {
    padding-top: 0;
  }

  .post {
    padding: 20px;
    /* padding-top: 0; */
  }

  #footer {
    padding-bottom: 0;
  }

  .footer-line {
    border-radius: 0;
  }

  #header .container,
  #header .container-inner,
  #main .container,
  #footer .container,
  #footer .container-inner {
    border-width: 0;
    border-radius: 0;
    box-shadow: none;
  }

  #header .container {
    padding-top: 49px;
    height: 95vh;
    background: repeating-linear-gradient(
    135deg,
    #007D4F,
    #007D4F 2px,
    #008352 2px,
    #008352 5px);
  }

  #header .container .logo {
    float: none;
    text-align: center;
    width: 250px;
    margin: auto;
    padding-top: 20vh;
  }

  #header .container .title {
    text-align: center;
    margin: 5px 20px;
    display: none;
  }

  #header .container .title h1 {
    font-size: 220%;
  }

  #header .container .description {
    text-align: center;
    margin: 15px 20px 40px 20px;
  }

  .emblem-l {
    position: relative;
    top: 8px;
  }

  .emblem-r {
    position: relative;
    top: 8px;
  }

  .emblem-f {
    position: relative;
    top: 10px;
  }

  .emblem-e {
    position: relative;
    top: 0;
  }

  #header .nav .toggle {
    cursor: pointer;
    margin: 0 auto;
    padding: 5px 0;
    overflow: hidden;
    /* FIXED NAVBAR */
    position: fixed;
    top: 0;
    z-index: 100;
    display: flex;
    flex-direction: column;
  }

  #header .nav .toggle .menu .menu-title {
    display: inline;
    float: left;
    margin: 0 0 0 15px;
    font-size: 29px;
    cursor: default;
  }

  #header .nav .toggle .menu img {
    display: inline;
    float: right;
    margin: 7px 15px 0 0;
  }

  #header .nav ul {
    width: 100%;
    margin: 0;
    padding: 0;
    display: none;
    /* FIXED NAVBAR */
    position: fixed;
    top: 50px;
    z-index: 100;
  }

  #header .nav ul.active {
    display: block;
    background: #0C4B33;
    border-top: none;
    margin: 0 0 0 -8px;
  }

  #header .nav ul li {
    width: 100%;
    text-align: center;
    margin: 0;
    padding: 10px 0;
    border-top: 1px dashed #00603C;
  }

  #header .nav ul li a {
    font-size: 22px;
  }

  #header .nav .active {
    background: var(--WHITE);
    color: #00603C;
    border-radius: 5px;
    padding: 5px 7.5px;
  }

  #main .container-edge-border {
    padding-bottom: 0;
    border: none;
    /* untuk memunculkan properties di atas */
    overflow: hidden;
  }

  .sticky {
    top: 53px;
  }

  .post-title {
    margin-top: 10px;
    border-bottom: 0;
  }

  p.post-title-index {
    width: 93%;
    padding-right: 10%;
    margin-top: -30px;
    /* untuk membuat title index full */
    white-space: unset;
    overflow: unset;
    text-overflow: unset;
  }

  p.post-title-index a {
    word-break: keep-all;
  }

  article .post-body {
    margin: 10px 0;
  }

  article .post-body-sidebar {
    margin: 0;
    width: 100%;
  }

  article.sidebar {
    padding-bottom: 0;
  }

  aside.sidebar {
    float: none;
    width: 100%;
    /* margin-top: 20px; */
  }

  aside.sidebar h1,
  aside.sidebar p {
    text-align: justify;
    margin: 0;
    padding: 0.5% 5% 0 5%;
  }

  aside.sidebar ul {
    list-style-type: disc;
    margin: 0 0 0 25px;
    padding: 0;
  }

  aside.sidebar ol {
    margin: 0 0 0 3.5em;
    padding: 0;
  }

  aside.sidebar li {
    text-align: left;
    margin: 0;
    padding: 0;
  }

  aside p.sidebar-isi,
  aside p.sidebar-isi a {
    text-align: left;
    margin: 0 0 0 2.0%;
  }


  aside .sidebar-body {
    float: none;
    width: 100%;
    margin: 0;
    padding: 10px 0 20px 0;
    border-radius: 0;
    border: none;
  }

  aside .sidebar-body-rss {
    float: none;
    width: 100%;
    margin: 0;
    padding: 10px 0 20px 0;
    border-radius: 0;
    border: none;
  }

  aside .sidebar-body-hollow {
    float: none;
    width: 100%;
    margin: 0;
    padding: 10px 0 20px 0;
    border-radius: 0;
    border: none;
    display: block;
    border-left: 0;
    border-right: 0;
  }

  aside .sidebar-body-helper {
    float: none;
    width: 100%;
    margin: 0;
    padding: 10px 0 20px 0;
    border-radius: 0;
    border: none;
    display: block;
  }

  aside .sidebar-body-img {
    float: none;
    width: 100%;
    margin: -20px 0 10px 0;
    padding: 0;
    position: static;
  }

  img.post-body-img-sidebar {
    border-radius: 0;
    display: none;
  }

  article.homepage .notif-home {
    width: 83%;
    padding: 1em 1em;
    font-size: 95%;
    font-weight: normal;
    margin: auto;
    /* border: 1px solid var(--BLACK); */
    border-radius: 5px;
    /* background:var(--WHITE); */
  }

  article.homepage .notif-home p,
  article.homepage .notif-home a {
    /* untuk indentasi title*/
    /* padding-left: 67px; */
    /* text-indent: -135px; */
    padding-left: 16px;
    text-indent: -27px;
  }

  #footer .container p {
    font-size: 12px;
    letter-spacing:0;
    text-align: center;
    padding: 20px 0;
  }

  p.footer-menu {
    margin-top: -40px;
  }

  .tech-i-used-mobile {
    display: block;
    margin-bottom: -70px !important;
  }

  img.footer-img-1 {
    width: 60px;
    float: none;
    margin: auto;
    position: relative;
    top: 20px;
    right: 73px;
    filter: grayscale(80%) opacity(70%);
  }

  img.footer-img-2 {
    width: 80px;
    float: none;
    margin: auto;
    position: relative;
    top: -40px;
    left: 0;
    filter: grayscale(100%) opacity(80%);
  }

  img.footer-img-3 {
    width: 35px;
    float: none;
    margin: auto;
    position: relative;
    top: -100px;
    left: 55px;
    filter: grayscale(100%) opacity(80%);
  }

  img.footer-img-4 {
    width: 65px;
    float: none;
    margin: auto;
    position: relative;
    top: -40px;
    left: 0;
    filter: grayscale(100%) opacity(80%);
  }

  img.footer-img-jekyll-mobile {
    height: 80px;
    float: none;
    margin: auto;
    margin-bottom: 150px;
    position: relative;
    top: 20px;
    left: 0;
    filter: grayscale(100%) opacity(80%);
  }

  /* img.footer-img-jekyll-mobile { */
  /*   width: 35px; */
  /*   float: none; */
  /*   margin: auto; */
  /*   position: relative; */
  /*   top: -88px; */
  /*   left: 60px; */
  /*   filter: grayscale(100%) opacity(80%); */
  /* } */

  img.footer-img-ruby-mobile {
    width: 50px;
    float: none;
    margin: auto;
    position: relative;
    top: -35px;
    left: 0;
    filter: grayscale(100%) opacity(80%);
  }

  img.footer-img-netlify-mobile {
    width: 60px;
    float: none;
    margin: auto;
    position: relative;
    top: 20px;
    right: 73px;
    filter: grayscale(80%) opacity(70%);
  }

  .tech-i-used-desktop {
    display: none;
  }

  img.footer-img-jekyll {
    float: none;
    width: 150px;
    margin: auto;
    margin-top: -5px;
    margin-bottom: 20px;
  }

  img.footer-img-github {
    float: none;
    width: 145px;
    margin: auto;
    margin-top: -5px;
    margin-bottom: 20px;
  }

  img.footer-img-gitlab {
    float: none;
    width: 145px;
    margin: auto;
    margin-top: -5px;
    margin-bottom: 20px;
  }

  img.footer-img-netlify {
    float: none;
    width: 150px;
    margin: auto;
    margin-top: -5px;
    margin-bottom: 20px;
  }

  img.footer-img-travisci {
    float: none;
    width: 150px;
    margin: auto;
    margin-top: -5px;
    margin-bottom: 20px;
  }

  img.footer-bedge-1 {
    float: right;
    margin: -195px 20px 0 0;
    filter: grayscale(100%) opacity(60%);
    width: 115px;
  }


  img.footer-bedge-1 {
    float: none;
    margin: 0 auto;
    margin-top: 8px;
  }


  .toc {
    margin: 5px 20px 0 4.0%;
  }

  .post-nav {
    display: flex;
  }

  .container-inner-strip {
    background: repeating-linear-gradient(
    135deg,
    #007D4F,
    #007D4F 2px,
    #008352 2px,
    #008352 5px);
  }

  .tab {
    position: relative;
    top: 12.6em !important;
    right: 30.0em !important;
  }

  button.tablinks {
    border-radius: 0 0 3px 3px;
  }

  button.active {
    background-color: #404040;
  }

  .notif-donasi {
    width: 80%;
    max-width: 290px;
    padding: 0 !important;
    color: #404040;
    border: 0;
    /* border: 1px solid #404040; */
    /* border-radius: 5px; */
    display: block;
    float: none;
    margin: 0 auto !important;
    margin-bottom: 20px !important;
  }

  .notif-donasi-col-1 {
    margin: 0 auto;
    flex: none;
  }

  .notif-donasi-col-2 {
    margin: 0 auto;
    flex: none;
    border-left: none;
  }

  .notif-donasi p {
    font-size: 10px !important;
    padding: 5px 5px !important;
    text-align: center !important;
  }

  .notif-donasi-img {
    padding: 5px !important;
    margin-top: -5px;
    /* margin-bottom: 70px; */
  }

  .notif-info {
    width: 80%;
    max-width: 290px;
    padding: 0 !important;
    color: #404040;
    border: 1px solid #404040;
    border-radius: 5px;
    display: block;
    float: none;
    margin: 0 auto;
  }

  .notif-info-col-1 {
    margin: 0 auto;
    flex: none;
    padding: 5px 10px !important
  }

  .notif-info-col-2 {
    margin: 0 auto;
    flex: none;
    border-top: 1px dashed #404040;
    border-left: none;
    padding: 5px !important;
  }

  .notif-info p {
    font-size: 10px !important;
    padding: 0 !important;
    font-weight: normal !important;
    text-align: center !important;
    margin: 0 !important;
  }

  .notif-info-img {
    padding: 5px !important;
    margin-top: -5px;
  }


  /* dotfriends-page -------------------------------------------------------- */
  .dotfriends-page {
    background: none;
    width: 100%;
  }

  .dotfriends-page-detail {
    float: none;
    width: 100%;
    margin-left: 0;
    padding: 10px;
    border-top: 1px dashed #A09991;
    border-left: none;
  }

  /* log-page --------------------------------------------------------------- */

  .log-page ul {
    margin-left: -40px;
  }

  .log-page ul li {
    text-align: left;
    /* untuk indentasi list */
    /* padding-left: 85px; */
    /* text-indent: -90px; */
    padding-left: 85px;
    text-indent: -93px;
    list-style-position: inside;
  }

  .penulis-img {
    float: none;
    width:15%;
    margin: 0 auto;
  }

  .kontributor-img img {
    width: 15%;
  }

  .content-title {
    width: 100%;
    padding-bottom: 21px;
  }
}

/* ------------------------------------------------------------------------ */
@media (max-width: 640px) {
  .box-container {
    margin: auto;
    display: block;
    padding: 0 0 10px 0;
  }

  .box {
    width: 75%;
    /* untuk membuat box berada di center */
    margin: auto;
    margin-bottom: 20px;
    border-radius: 5px;
  }

  .ccbysa-img {
    float: none;
  }

  .ccbysa-text {
    text-align: center;
    padding-top: 10px;
  }

  .penulis-img {
    float: none;
    width: 40%;
    margin: 0 auto;
  }

  .dotfriends-page-img {
    float: none;
    width: 50%;
    margin: 0 auto;
    padding-top: 20px;
    position: relative;
    top: 0.0em;
  }

  article.sidebar {
    padding-bottom: 0;
  }

  aside p.sidebar-isi,
  aside p.sidebar-isi,
  aside p.sidebar-isi a {
    text-align: left;
    margin: 0 0 0 3.0%;
  }

  .hideAside {
    visibility: hidden;
    display: none;
  }

  .tab {
    position: relative;
    top: 12.6em !important;
    right: 21.5em !important;
  }

  button.tablinks {
    border-radius: 0 0 3px 3px;
  }

  button.active {
    background-color: #404040;
  }

}

/* ------------------------------------------------------------------------ */
@media (max-width: 360px) {
  article.sidebar {
    padding-bottom: 0;
  }

  .tab {
    position: relative;
    top: 12.6em !important;
    right: 7.5em !important;
  }

  button.tablinks {
    border-radius: 0 0 3px 3px;
  }

  button.active {
    background-color: #404040;
  }

}

@media (max-width: 350px) {
  article.sidebar {
    padding-bottom: 0;
  }

  .tab {
    position: relative;
    top: 13.7em !important;
    right: 7.0em !important;
  }

  button.tablinks {
    border-radius: 0 0 3px 3px;
  }

  button.active {
    background-color: #404040;
  }
}

/* ------------------------------------------------------------------------ */
@media (max-width: 320px) {
  article.sidebar {
    padding-bottom: 0;
  }

  aside p.sidebar-isi,
  aside p.sidebar-isi a {
    text-align: left;
    margin: 0 0 0 5.0%;
  }

  .tab {
    position: relative;
    top: 13.7em !important;
    right: 7.0em !important;
  }

  button.tablinks {
    border-radius: 0 0 3px 3px;
  }

  button.active {
    background-color: #404040;
  }
}