:root {
  --ui-primary-color: rgba(25, 25, 25, 1);
  --ui-secondary-color: rgb(32, 32, 32, 0.9);
  --ui-tertiary-color: var(--ui-primary-color);
  --ui-quaternary-color: var(--ui-primary-color);
  --ui-background-color: #151515;
  --ui-radius: 0.25rem;
  --ui-stroke: 0.125rem;
  --ui-border: var(--ui-stroke) rgba(255, 255, 255, 0.05) solid;
  --ui-blur: blur(18px);
  --ui-padding: 0.7rem;
  --ui-fs: 1rem;
  --ui-gap: var(--ui-padding);
  --ui-fc: #ffffff;
  --ui-sfc: #959595;
  --ui-shadow: 0.5;
  --ui-sp: 0.8rem;
  --ui-header-height: 5rem;
  --ui-sidebar-width: 18vw;
  --ui-bl: 0.5rem var(--ui-tertiary-color) solid;
  --pagefind-ui-primary: #eeeeee;
  --pagefind-ui-text: #eeeeee;
  --pagefind-ui-background: unset;
  --pagefind-ui-border: var(--ui-border);
  --pagefind-ui-tag: #152028;
  --pagefind-ui-border-radius: unset;
  --pagefind-ui-font: "Inter", sans-serif;
  --pagefind-ui-scale: 0.75;
  --pagefind-ui-outline: unset;
  color-scheme: dark;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  text-decoration: none;
  transition: all ease 0.3s 0.3s;
  outline: unset !important;
}

h1 {
  font-size: 2.25rem;
  text-wrap: wrap;
}

h2 {
  font-size: 2rem;
}

h3 {
  font-size: 1.6rem;
}

h4 {
  font-size: 1.3rem;
  text-wrap: nowrap;
  line-height: 1.9;
  height: fit-content;
}

p {
  font-size: 1.05rem;
}

i {
  text-wrap: wrap;
}

.nogap {
  gap: unset !important;
}

html {
  font-size: calc(0.2rem + 0.8vw);
}

body {
  display: grid;
  grid-template-columns: max-content auto auto;
  grid-template-areas:
    "sb main main"
    "sb main main";
  min-height: 100vh;
  /*background-image: radial-gradient(#202020 0.1rem, transparent 0.1rem);
  background-size: 32px 32px;*/
  font-family: "Inter", "Noto Color Emoji", sans-serif;
  background-color: var(--ui-background-color);
  overflow-y: auto;
}

.sidebar--wrapper {
  display: flex;
  justify-content: center;
  min-width: var(--ui-sidebar-width);
  max-width: var(--ui-sidebar-width);
  height: 100vh;
  position: sticky;
  top: 0;
}

.sidebar {
  width: 100%;
  height: 100%;
  background: var(--ui-secondary-color);
  border-right: var(--ui-border);
  overflow: auto;
}

.sidebar > {
  margin: 1.65rem 0;
}

.sidebar .container__header {
  background-color: unset;
}

.portfolio,
.home {
  list-style: none;
}

a {
  color: inherit;
  word-break: break-word;
}

.click,
.pagefind-ui__result-link,
.postingan__p p > a {
  color: #669bbc !important;
}

.flex {
  flex: 1;
}

.noflex {
  flex: unset;
}

.column {
  flex-direction: column;
}

.header {
  position: sticky;
  font-weight: 600;
  max-width: 100vw;
  font-size: 1.5rem;
  text-decoration: none;
  z-index: 100;
  height: var(--ui-header-height);
  max-height: var(--ui-header-height);
  align-items: center;
  top: 0;
}

.header__bar {
  min-width: 100%;
  display: flex;
  flex: 1;
  justify-content: space-between;
  z-index: 1000;
  font-size: 1em;
  padding: var(--ui-padding);
  gap: var(--ui-gap);
  height: 100%;
  flex-wrap: nowrap;
  flex-direction: ;
  border-bottom: var(--ui-border);
}

nav > .tertiary-container {
  border: unset;
  background-color: unset;
}
.secondary-header__bar {
  min-width: 100%;
  display: flex;
  min-height: 3vh;
  height: fit-content;
  flex: 1;
  justify-content: space-between;
  z-index: 10;
  font-size: 1em;
  border-bottom: var(--ui-border);
  padding: var(--ui-padding);
  gap: 0;
}

.header__bar:before {
  position: absolute;
  backdrop-filter: var(--ui-blur);
  display: block;
  content: "";
  height: 100%;
  width: 100%;
  left: 0;
  z-index: -1;
}

.nav-wrapper:before {
  position: absolute;
  backdrop-filter: var(--ui-blur);
  display: block;
  content: "";
  height: 54%;
  width: 100%;
  z-index: -1;
}

.nav-wrapper {
  padding-top: calc(var(--ui-header-height) - 2 * var(--ui-padding));
  min-width: 100%;
  margin-top: 0;
  flex: 1;
}

nav {
  display: flex;
  flex-direction: row;
  gap: var(--ui-gap);
  align-items: center;
}

.nav--bottom {
  flex-direction: row;
  display: flex;
  width: 100%;
  gap: var(--ui-gap);
}

.nav--bottom > a {
  flex: 1;
  width: auto;
}

.right {
  display: flex;
  flex-wrap: nowrap;
  color: var(--ui-fc);
  gap: var(--ui-gap);
  align-items: center;
}

.logo,
.logo--header-bar,
.logo--sidebar {
  display: flex;
  text-align: center;
  align-items: center;
  justify-content: center;
  align-content: center;
  left: 0;
  flex-direction: column;
}

.logo--sidebar {
  border-bottom: var(--ui-border);
  height: var(--ui-header-height);
  background-color: var(--ui-secondary-color);
  backdrop-filter: var(--ui-blur);
  position: sticky;
  top: 0;
}

.logo--header-bar {
  display: none;
}

.logo > img {
  max-height: 12rem;
  width: fit-content;
  flex: unset;
  border: unset;
}

.logo {
  color: var(--ui-sfc);
  text-align: center;
}

.wordmark__container {
  display: flex;
  min-height: fit-content;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--ui-fc);
}

.wordmark {
  max-height: 2rem;
  max-width: fit-content;
  flex: unset;
  border: unset;
}

.page {
  grid-area: ct;
  min-height: 100vh;
  height: auto;
}

.search-wrapper {
  height: calc(68px * var(--pagefind-ui-scale));
  width: 100%;
  z-index: 1000;
}

section {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

article {
  flex: 1;
  display: flex;
}

li > .primary-container {
  height: 100%;
}

.index__header {
  display: flex;
  grid-column-start: span 2;
  flex-wrap: wrap;
  justify-content: space-between;
}

.section-beranda__contact {
  display: flex;
  gap: 1em;
  flex-wrap: wrap;
}

.section-informasi__ul {
  display: grid;
  grid-auto-rows: auto;
  grid-template-columns: repeat(3, 1fr);
  grid-template-areas:
    "primary-container1 primary-container2"
    "primary-container3 primary-container4";
  gap: 1em;
  flex-wrap: wrap;
  height: fit-content;
  padding: 5%;
  flex: 1;
}

main {
  display: flex;
  flex-direction: column;
  grid-template-areas:
    "ct ct ct"
    "ft ft ft";
  flex: 1;
  height: 100%;
  padding-right: unset;
}

.home {
  display: block;
  font-weight: 500;
}

.home > div {
  margin: 1.65rem 0;
}

.portfolio {
  grid-template-columns: repeat(3, 1fr);
  grid-template-areas:
    "p1 p2 p3"
    "p4 p4 p4";
}

.section-informasi {
  display: block;
  overflow-y: scroll;
}

.footer {
  align-content: end;
  color: var(--ui-fc);
  min-width: 100%;
  display: flex;
  text-wrap: wrap;
  bottom: 0;
  font-size: 1rem;
  flex-direction: column;
  height: fit-content;
  justify-content: center;
  align-items: center;
  font-weight: 600;
}

.primary-container,
.container--style,
.tertiary-container {
  border: var(--ui-bordesr);
  border-left: unset;
  border-radius: var(--ui-radius);
}

.primary-container,
.primary-container--post-nav {
  text-align: left;
  width: 100%;
  align-items: flex-start;
  color: var(--ui-fc);
  max-height: 100%;
  box-sizing: border-box;
  align-content: start;
  text-wrap: wrap;
  flex-wrap: nowrap;
  flex-direction: column;
  align-items: stretch;
  box-shadow: var(--ui-shadow);
  flex: 1;
  font-size: var(--ui-fs);
  display: flex;
  border: var(--ui-border);
  background: var(--ui-primary-color);
}

.primary-container--post-nav {
  flex-direction: row;
  gap: var(--ui-gap);
  border: unset;
  align-items: strech;
  background: unset;
}

.secondary-container,
.secondary-container--styled,
.secondary-container--postingan,
.secondary-container--nogap,
.secondary-container--post-nav,
.secondary-container--post-nav__right,
.tertiary-container--styled {
  width: 100%;
  color: var(--ui-fc);
  flex-wrap: wrap;
  gap: var(--ui-gap);
  padding: var(--ui-padding);
  flex: 1;
  font-size: var(--ui-fs);
  display: flex;
}

.secondary-container--postingan {
  flex: unset;
  display: flex;
  padding: var(--ui-padding);
  flex-direction: row-reverse;
}

.secondary-container--nogap {
  gap: unset;
}

.secondary-container--post-nav {
  flex-direction: column;
  text-wrap: wrap;
}

.secondary-container--post-nav__right {
  flex-direction: row-reverse;
}

.secondary-container--post-nav,
.secondary-container--post-nav__right {
  text-align: center;
  justify-content: center;
  border-radius: var(--ui-radius);
  border: var(--ui-border);
  padding: var(--ui-padding) 0 0 0;
  overflow: hidden;
  background: var(--ui-primary-color);
}

.secondary-container--post-nav > a {
  text-wrap: wrap;
  background: var(--ui-secondary-color);
  color: var(--ui-fc);
  border: unset;
  border-radius: unset;
  border-top: var(--ui-border);
}

.secondary-container--post-nav__right > a {
  background: var(--ui-secondary-color);
  color: var(--ui-fc);
  min-width: 100%;
  text-wrap: wrap;
  border: unset;
  border-radius: unset;
  border-top: var(--ui-border);
}

.tertiary-container,
.tertiary-container--nostyle,
.tertiary-container--gamma,
.tertiary-container--styled {
  height: auto;
  width: auto;
  align-content: center;
  align-items: center;
  text-wrap: nowrap;
  justify-content: center;
  box-shadow: var(--ui-shadow);
  background-color: var(--ui-secondary-color);
  gap: var(--ui-gap);
  border: var(--ui-border);
  padding: var(--ui-padding);
  flex: 1;
  display: flex;
}

.right > .tertiary-container {
  flex: unset;
}

.tertiary-container--nostyle {
  border: unset;
  background-color: unset;
  box-shadow: unset;
}

.tertiary-container--nogap {
  gap: unset;
}

.secondary-container--footer {
  flex-direction: column;
  width: unset;
  text-wrap: nowrap;
  flex: unset;
}

.container--style {
  background-color: var(--ui-primary-color);
}

.secondary-container--nogap > .secondary-container > .secondary-container {
  border: var(--ui-border);
}

.container--vertical {
  flex-direction: column;
}

.container--horizontal {
  flex-direction: row;
}

.secondary-container--styled,
.tertiary-container--styled {
  border: var(--ui-border);
  padding: unset;
  border-radius: var(--ui-radius);
  gap: unset;
}

.container__content {
  min-width: unset;
  width: unset;
  margin: var(--ui-padding);
  flex-direction: column;
}

img {
  border-radius: var(--ui-radius);
  max-width: 100%;
  width: 100%;
  height: auto;
  display: block;
  flex: 1;
}

p > img {
  width: 200px;
  float: right;
  margin-bottom: 1.65rem;
}

.container__image-section-apollo {
  width: 100%;
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
}

.container__text-section-artemis {
  width: 100%;
}

.container__header {
  border-bottom: var(--ui-border);
  max-width: 100%;
  width: 100%;
  height: auto;
  font-size: 1em;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-wrap: wrap;
  background: var(--ui-secondary-color);
  color: var(--ui-fc);
  padding: calc(1 * var(--ui-padding));
  border-radius: var(--ui-radius) var(--ui-radius) 0 0;
  text-transform: capitalize;
}

.container__p {
  display: block;

  height: fit-content;
  text-wrap: wrap;
  padding: var(--ui-padding);
  flex-wrap: wrap;
  min-width: 100%;
}

.tertiary-container--alpha {
  align-items: unset;
  align-content: unset;
  flex-wrap: nowrap;
  font-size: 0.7em;
  flex-wrap: wrap;
  min-width: 48%;
  flex: 1;
  gap: var(--ui-gap);
}

.tertiary-container--delta,
.tertiary-container--gamma,
.tertiary-container--nogap {
  min-width: 100%;
  height: auto;
  flex: unset;
  align-items: unset;
  align-content: unset;
  flex-wrap: nowrap;
  font-size: 0.7em;
  flex-direction: column;
}

.tertiary-container--gamma {
  padding: unset;
}

.tertiary-container--beta {
  padding: calc(var(--ui-padding) + var(--ui-padding));
  background-color: rgba(var(--ui-tertiary-color));
  border-radius: var(--ui-radius);
}

/*.section-informasi__ul > li:nth-child(3) {
  border-image: repeating-linear-gradient(45deg, yellow, yellow 50px, black 50px, black 80px);
  border-style: solid;
  border-width: 20px;
  padding: 5px;
  border-image-slice: 30;
}*/

.tertiary-container:hover,
.section-beranda__contact:hover,
.tertiary-container--nostyle:hover,
.secondary-container > .container__header:hover {
  background: var(--ui-background-color);
  z-index: 1000;
}

.footer__top {
  min-width: 100%;
  display: flex;
  justify-content: center;
  flex-wrap: nowrap;
  text-wrap: nowrap;
  gap: 1rem;
}

.footer__top__fence {
  border-left: var(--ui-border);
  z-index: 1;
  min-height: 3rem;
}

.divider-text {
  display: inline-block;
  background-color: rgba(59, 59, 59, 0.5);
  max-width: 0.1rem;
  min-width: 0.1rem;
}

.footer__bottom {
  min-width: 100%;
  display: flex;
  justify-content: center;
  flex-wrap: nowrap;
}

.footer__content {
  display: flex;
  width: 100%;
  justify-content: center;
  flex-wrap: nowrap;
  text-wrap: nowrap;
  gap: var(--ui-padding);
  height: fit-content;
  flex: 1;
  border-top: var(--ui-border);
  color: var(--ui-sfc);
  padding: var(--ui-padding);
}

.secondary-container--footer > .secondary-container > .tertiary-container {
  text-transform: uppercase;
}

summary {
  text-align: right;
}

nav,
div > a {
  min-width: fit-content;
}

.header__nav-bar--mobile {
  display: none;
}

.limit li:nth-of-type(1n + 5) {
  display: none;
}

details .hamburger:before {
  content: " menu ";
}

details[open] .hamburger:before {
  content: "menu";
  display: none;
}

details[open] .hamburger:after {
  content: "close";
}

div > .primary-container {
  min-height: unset;
  height: fit-content;
}

#postingan > li {
  flex: unset;
}

.postingan {
  flex-wrap: wrap;
  max-width: calc(100vw - var(--ui-sidebar-width));
}

article > a {
  display: grid;
  grid-auto-rows: 1fr;
  flex: 1;
}

.postingan__item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--ui-secondary-color);
  padding: var(--ui-padding);
  border: var(--ui-border);
  border-radius: var(--ui-radius);
  flex-wrap: wrap;
}

.postingan__header {
  border: var(--ui-border);
}

.postingan__p,
.home {
  color: var(--ui-sfc);
  padding: 5%;
  text-wrap: balance;
  line-height: 1.6;
}

.postingan__p > .material-symbols-rounded {
  color: var(--ui-fc);
  font-size: 5rem;
}

.postingan__p > ul,
.home > ul,
.container__p > ul {
  list-style-type: disc;
  padding-left: 2rem;
  font-size: 1.25rem;
  margin: 1.6rem 0;
}

.container__p > ul {
  margin: unset;
}

.postingan__p > :where(h1, h2, h3, h4, h5),
.home > :where(h1, h2, h3, h4, h5) {
  color: var(--ui-fc);
  line-height: normal;
  margin: 1.65rem 0;
}

h1,
h2,
h3,
h4,
h5 {
  font-family: "Titillium Web", sans-serif;
  text-transform: capitalize;
}

.postingan__p > h1,
.home h1 {
  font-size: 2.5rem;
  margin: 1.65rem 0;
}

.postingan__p > h2,
.home > h2 {
  font-size: 2rem;
}

.postingan__p > h3,
.home > h3 {
  font-size: 1.6rem;
}

.postingan__p > h4,
.home > h4 {
  font-size: 1.4rem;
}

.postingan__p > h5,
.home > h5 {
  font-size: 1.3rem;
}

.postingan__p > p,
.home > p {
  font-size: 1.25rem;
  font-weight: 500;
  margin: 1.65rem 0;
}

.postingan__p > p > img {
  border: unset;
}

.postingan__p > div {
  margin: 1.6rem 0;
}

.postingan__p span,
.home span {
  text-wrap: nowrap;
  white-space: nowrap;
  display: inline-block;
}

.postingan__nav {
  position: sticky;
  top: var(--ui-header-height);
  height: fit-content;
  padding: 2.5%;
}

.table {
  overflow-x: auto;
  max-width: 80vw;
}

table,
th,
tr,
td {
  border: var(--ui-border);
  padding: var(--ui-padding);
  border-radius: var(--ui-radius);
  text-align: center;
  font-size: 1.6rem;
}

th {
  background-color: var(--ui-primary-color);
  color: var(--ui-fc);
}

li > ul {
  padding-left: 2rem;
  font-size: 1.25rem;
  font-weight: 500;
}

.postingan__p ul > li > a {
  color: #669bbc;
  font-weight: 500;
}

.postingan__p ul > li {
  font-weight: 500;
}

blockquote {
  border: var(--ui-stroke) #ffffff solid;
  border-left: 0.5rem #ffffff solid;
  padding-left: 0.5rem;
  padding: var(--ui-padding);
  border-radius: var(--ui-radius);
  color: var(--ui-fc);
  font-weight: 600;
  font-style: italic;
}

blockquote > p {
  font-size: 1.6rem;
}

pre {
  border: var(--ui-border);
  padding: var(--ui-padding);
  border-radius: var(--ui-radius) !important;
  font-size: 1rem !important;
  background-color: #172f5d;
  color: var(--ui-fc);
}

.direksi--abu,
.direksi--hijau,
.direksi--kuning,
.direksi--merah,
.postingan__date {
  padding-left: 0.5rem;
  background-color: var(--ui-tertiary-color);
  border: var(--ui-border);
  font-size: 1rem;
  padding: var(--ui-padding);
  border-radius: var(--ui-radius);
  display: flex;
  gap: var(--ui-gap);
  align-items: center;
  font-weight: 1000;
  text-transform: uppercase;
}

.postingan__date {
  border: unset;
  border-radius: unset;
}

.direksi--abu {
  border: var(--ui-stroke) gray solid;
  color: grey;
}

.direksi--kuning {
  border: var(--ui-stroke) #ffd700 solid;
  color: #ffd700;
}

.direksi--hijau {
  border: var(--ui-stroke) #06d6a0 solid;
  color: #06d6a0;
}

.direksi--merah {
  border: var(--ui-stroke) #e0115f solid;
  color: #e0115f;
}

.mula--main {
  background: #06d6a0;
}

.madya--main {
  background: #318ce7;
}

.wira--main {
  background: #ffd700;
}

.mula,
.mula--main {
  border: var(--ui-stroke) solid #06d6a0;
}

.madya,
.madya--main {
  border: var(--ui-stroke) solid #318ce7;
}

.wira,
.wira--main {
  border: var(--ui-stroke) solid #ffd700;
}

.footer--mobile {
  display: none;
}

.grid-item {
  flex: 1;
}

#search {
  border: var(--ui-border);
  background-color: var(--ui-tertiary-color);
  width: 100%;
  flex: 1;
  left: var(--ui-sidebar-width);
  top: 0;
  border-radius: var(--ui-radius);
  background-color: var(--ui-tertiary-color);
  border: var(--ui-border);
  height: 100%;
}

.pagefind-ui__drawer {
  background-color: var(--ui-background-color);
  border-radius: var(--ui-radius);
  border: var(--ui-border);
  backdrop-filter: var(--ui-blur);
  padding: var(--ui-padding);
  overflow: auto;
  max-height: 50vh;
}
.pagefind-ui__results-area {
  margin-top: unset !important;
}

.pagefind-ui__results {
  gap: var(--ui-gap) !important;
  display: flex;
  flex-direction: column;
}

.pagefind-ui__result {
  border: var(--ui-border) !important;
  padding: var(--ui-padding) !important;
  border-radius: var(--ui-radius);
  flex: 1;
}
.pagefind-ui__result-inner {
  margin: unset !important;
}

.separator,
.separator--vertical {
  background-color: rgba(255, 255, 255, 0.05);
}

.separator--vertical {
  min-height: 100%;
  width: max(var(--ui-stroke));
}

.separator {
  min-width: 100%;
  height: max(var(--ui-stroke));
}

.polarity {
  display: flex;
  flex-direction: column-reverse;
}

.skill-container {
  flex-direction: row;
  padding-top: unset;
}

.header__nav-bar--desktop {
  display: flex;
  flex-direction: row;
  gap: var(--ui-gap);
}

.row {
  flex-direction: row;
  align-items: center;
}

.four__header,
.four__description {
  padding: var(--ui-padding);
}

.four__description {
  background-color: red;
  border-radius: var(--ui-radius);
}

.secondary-container--postingan .container__header {
border-bottom: unset;
}

.footer--desktop {
padding: 0 5% 0 5%;
}

@media (max-width: 600px) {
  .sidebar--wrapper,
  .desktop {
    display: none;
  }
  .logo--header-bar {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--ui-gap);
  }

  .footer--desktop {
    display: none;
  
  }

  .footer--mobile {
    display: flex;
    margin-top: var(--ui-padding);
    justify-content: center;
    flex-direction: column;
    color: var(--ui-sfc);
    text-align: center;
    text-wrap: wrap;
  }

  .footer--mobile::before {
    padding: var(--ui-padding);
  }

  body {
    display: flow;
    max-height: unset;
    overflow: unset;
  }

  html {
    font-size: min(16px);
  }
  .page,
  main {
    width: unset;
    height: auto;
  }

  .header__bar,
  .header {
    max-height: unset;
    height: unset;
    flex-wrap: wrap;
  }

  #search {
    min-height: 100%;
  }
  .header__nav-bar--desktop {
    display: none;
    position: fixed;
  }

  .header__nav-bar--mobile {
    display: flex;
    gap: var(--ui-gap);
  }

  nav {
    flex-direction: column;
    position: absolute;
    flex: 1;
    gap: 3rem;
    border-radius: 0px;
    left: 0;
    gap: var(--ui-gap);
  }

  nav > div {
    border-bottom: var(--ui-border);
    min-width: fit-content;
  }

  .tertiary-container--delta {
    flex: 0;
  }

  .primary-container,
  .secondary-container {
    flex-wrap: wrap;
    flex: 1 1;
  }

  .container__text-section-artemis {
    min-width: 100%;
  }

  .container__image-section-apollo > img {
    min-width: 20rem;
    height: auto;
  }
  .portfolio {
    display: flex;
  }
  .content {
    flex-direction: column;
  }
  .postingan {
    max-width: unset;
  }
  .section-informasi__ul {
    height: fit-content;
    flex-direction: column;
    max-width: 100vw;
  }
}