.langsung_ke_konten {
    position: absolute;
    overflow: hidden;
    clip: rect(0 0 0 0);
    height: 1px;
    width: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
}

/*======
Animated Hamburger button
=======*/
.navbar-toggler:focus,
.navbar-toggler:hover {
    background-color: transparent;
    border: none;
    box-shadow: none;
}

.navbar-toggler {
    border: none;
}

.navbar-toggler .icon-bar {
  background-color: #0F1922;
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 1px;
  margin-bottom: 5px;
}

.navbar-toggler span.icon-bar {
    transition: all 0.15s;
}

.navbar-toggler span:nth-child(2) {
    transform: rotate(45deg);
    transform-origin: 10% 10%;
}

.navbar-toggler span:nth-child(3) {
    opacity: 0;
}

.navbar-toggler span:nth-child(4) {
    transform: rotate(-45deg);
    transform-origin: 0% 90%;
}

.navbar-toggler.collapsed span:nth-child(2),
.navbar-toggler.collapsed span:nth-child(4) {
    transform: rotate(0);
}

.navbar-toggler.collapsed span:nth-child(3) {
    opacity: 1;
}

/*======
Normal Desktop
Config
=======*/
@media (min-width: 992px) {
    .navbar,
    .navbar-collapse {
      flex-direction: column;
    }
    .navbar-expand-lg .navbar-nav {
      flex-direction: column;
    }
    .navbar {
      width: 370px;
      height: 100vh;
      align-items: flex-start;
    }
    .navbar-brand {
      padding-bottom: 0;
    }
    form input {
      margin-bottom: 0.7em;
    }
    .menuDitta>ul>li {
      font-size: 2em;
      margin-bottom: 5px;
    }
    .menuDitta {
      position: relative;
    }
    .menuDitta>ul {
      position: absolute;
      top: 30%;
      left: 50%;
      transform: translate(-50%,-50%);
    }
    .navbar-brand::before {
      content: "Ditta Amelia";
      font-family: "Kristi", cursive;
      font-optical-sizing: auto;
      color: rgba(19, 15, 73, 0.07);
      position: absolute;
      transform: translate(-50%, -50%);
      left: 50%;
      top: 203px;
      line-height: 1;
      font-size: 80px;
    }
    .profilePic img {
      width: 120px;
      height: 120px;
    }
    .fotoDitta {
      margin-left: 5px;
    }
    .footerDitta {
      position: absolute;
      bottom: 0px;
      width: 500px;
    }
    .introDitta {
      width: 50%;
    }
    header {
      border-right: 2px solid #803016;
    }
    main {
      flex-basis: 0;
      flex-grow: 999;
      min-inline-size: 50%
    }
    .listPorto {
      width: 49%;
    }
    .blogDitta {
      width: 65%;
    }
    @media (max-width: 1600px) {
      article h2 {
        inline-size: calc(100vw - 42rem);
        overflow-wrap: break-word;
      }
  }
    /*======
    For outlier display 
    (Eg: Nest Hub, NOOK, 7" LED, etc)
    =======*/
    @media (max-width: 1024px) {
      .navbar {
        width: 260px;
      }
      .menuDitta>ul>li {
        font-size: 1em;
        margin-bottom: 5px;
      }
      .introDitta {
        width: 100%;
      }
      .fotoDitta img {
        height: 500px;
        object-fit: cover;
      }
      .navbar-brand::before {
        font-size: 60px;
      }
      .footerDitta p, .poweredBy p {
        font-size: 14px;
      }
      .kreditFooter {
        font-size: 10px !important;
      }
      .listPorto {
        width: 49%;
      }
      .insideSpacer {
        width: 12.5% !important;
      }
      article h2 {
        inline-size: calc(100vw - 37rem);
        overflow-wrap: break-word;
      }
      .articleSpacer {
        background-image: linear-gradient(to right, rgb(227, 212, 190) 12%, rgb(23, 39, 52) 12% 14%, rgb(250, 188, 91) 14% 16%, rgb(128, 48, 22) 16% 18%, rgba(128, 48, 22, 0.75) 18% 30%, rgba(0, 0, 0, 0)) !important;
      }
    }
    @media (min-width: 1025px) AND (max-height: 600px) {
      .menuDitta>ul>li {
        font-size: 1em !important;
        margin-bottom: 5px;
      }
      .mb-lg-5 {
        margin-bottom: 1rem !important;
      }
      .navbar {
        width: 320px;
      }
    }
  }

/*======
Mobile Screen
Config
=======*/
@media (max-width: 991px) {
  .borderNav {
    border-bottom: 1px solid #803016;
  }
  .navbar-brand {
    position: relative;
  }
  .navbar-brand::before {
    content: "Ditta Amelia";
    font-family: "Kristi", cursive;
    font-optical-sizing: auto;
    color: rgba(19, 15, 73, 0.07);
    position: absolute;
    transform: translate(-50%, -50%);
    left: 50%;
    top: 46%;
    line-height: 1;
    font-size: 1.8em;
  }
  @supports (-webkit-touch-callout: none) {
  /* CSS specific to iOS devices */
    .navbar-brand::before {
      font-size: 1.6em;
        }
  }
  .profilePic img {
    width: 70px;
    height: 70px;
  }
  .fotoDitta {
    width: 100% !important;
  }
  /*.footerDitta {
    margin-top: 10px;
    font-size: 12px;
  }*/
  .poweredBy {
    font-size: 12px;
  }
  .containerKolaborasi {
    width: 86vw !important;
  }
  .sidebarDitta {
    border-top: 1px solid #803016;
    border-left: none !important;
    min-height: 0px !important;
  }
  .blogDitta {
    min-height: 100vh !important;
  }
  .insideSpacer {
    width: 12.5% !important;
  }
  article h2 {
    inline-size: calc(100vw - 3rem);
    overflow-wrap: break-word;
  }
  .kategori {
    gap: 5px;
  }
  .kategori li {
    margin-bottom: 0px !important;
    margin-right: 5px;
  }
  .articleSpacer {
    background-image: linear-gradient(to right, rgb(227, 212, 190) 12%, rgb(23, 39, 52) 12% 14%, rgb(250, 188, 91) 14% 16%, rgb(128, 48, 22) 16% 18%, rgba(128, 48, 22, 0.75) 18% 30%, rgba(0, 0, 0, 0)) !important;
  }
  .separatorKomentar {
    width: 100% !important;
    height: 5px;
    margin-bottom: 10px;
  }
  .avatarKomentar {
    width: 100% !important;
    margin-bottom: 10px;
  }
  .avatarKomentar img {
    margin-right: 10px;
  }
  .avatarKomentar p {
    margin: 0 auto 0 0;
  }
  .month a {
    margin-right: 10px;
  }
}

/*======
Large Screen 
Container Config
=======*/
@media (min-width: 1400px) {
  .containerDitta {
    max-width: 1320px;
  }
  .containerDitta {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    width: 100%;
    padding-right: calc(var(--bs-gutter-x) * .5);
    padding-left: calc(var(--bs-gutter-x) * .5);
  }
  .introDitta {
    width: 70%;
  }
}

/*======
Main Config
=======*/
body {
  font-family: "Quicksand", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-optical-sizing: auto;
  color: #0F1922;
  font-size: 20px;
}

a {
  color: #063273;
}

.kuningDitta {
  background-color: #FABC5B;
}

.kremDitta {
  background-color: #E3D4BE;
}

.navyDitta {
  background-color: #172734;
}

.filterNavyDitta {
  filter: invert(12%) sepia(8%) saturate(3461%) hue-rotate(166deg) brightness(92%) contrast(91%);
}

.coklatDitta {
  background-color: #803016;
}

.menuDitta>ul>li {
  font-weight: 700;
}

.profilePic img {
  border-radius: 50%;
  border: 2px solid #803016;
  background-color: #ffffff;
  object-fit: cover;
}

header {
  background-color: #E3D4BE;
}

.footerDitta, .poweredBy {
  text-align: center;
}

.footerDitta>ul>li, .poweredBy>ul>li {
  list-style-type: none;
  margin-right: 5px;
}

.footerDitta>ul>li img, .poweredBy>ul>li img {
  width: 32px;
  height: 32px;
}

.introDitta {
  height: 100%;
}

.namaDitta {
  background-color: #172734;
  color: #fff;
  padding: 8px;
  border-radius: 8px;
  font-weight: 700;
}

.fotoDitta {
  width: 50%;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' width='1080' height='1080' preserveAspectRatio='none' viewBox='0 0 1080 1080'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1129%26quot%3b)' fill='none'%3e%3cpath d='M754.704%2c605.723C783.698%2c604.568%2c808.94%2c589.522%2c825.296%2c565.554C844.547%2c537.343%2c861.58%2c502.493%2c845.828%2c472.188C829.264%2c440.322%2c790.597%2c428.517%2c754.704%2c429.744C721.047%2c430.895%2c690.479%2c448.831%2c673.771%2c478.071C657.195%2c507.081%2c655.761%2c543.375%2c673.652%2c571.593C690.476%2c598.129%2c723.309%2c606.973%2c754.704%2c605.723' fill='rgba(128%2c 48%2c 22%2c 0.47)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M737.5690029864842 728.326605576438L892.1827753909972 793.9562582013173 957.8124280158764 639.3424857968043 803.1986556113634 573.712833171925z' fill='rgba(128%2c 48%2c 22%2c 0.47)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M40.878%2c299.061C87.408%2c298.836%2c140.24%2c297.827%2c164.522%2c258.134C189.478%2c217.34%2c171.524%2c166.535%2c147.106%2c125.417C123.333%2c85.385%2c87.43%2c49.128%2c40.878%2c49.927C-4.678%2c50.709%2c-35.761%2c89.897%2c-59.214%2c128.96C-83.649%2c169.659%2c-108.925%2c218.423%2c-84.851%2c259.337C-60.961%2c299.937%2c-6.228%2c299.288%2c40.878%2c299.061' fill='rgba(128%2c 48%2c 22%2c 0.47)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M890.1749927940948 457.55878136775016L1064.5762497516928 289.14144521155356 896.1589135954962 114.74018825395558 721.7576566378982 283.1575244101522z' fill='rgba(128%2c 48%2c 22%2c 0.47)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M-100.45757272752931 825.5995737874854L50.72421433740345 912.8844192459931 106.06058899269851 642.46931591934z' fill='rgba(128%2c 48%2c 22%2c 0.47)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M495.9096718823792 670.9406709847738L449.73805102490195 962.4568121086725 741.2541921488007 1008.6284329661497 787.4258130062778 717.112291842251z' fill='rgba(128%2c 48%2c 22%2c 0.47)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M879.2765037022627-127.59046428580135L857.5274446034427 183.43557128392646 1190.3025392719906-105.8414051869814z' fill='rgba(128%2c 48%2c 22%2c 0.47)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M181.89440747496045 756.0850483705709L-58.280549369826446 912.05648904146 337.86584814584955 996.2600052153578z' fill='rgba(128%2c 48%2c 22%2c 0.47)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M139.87525905824037 225.35668537827468L315.86975199123054 262.7654696689699 353.27853628192577 86.77097673597976 177.28404334893563 49.36219244528451z' fill='rgba(128%2c 48%2c 22%2c 0.47)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M252.625%2c565.45C289.452%2c565.708%2c320.921%2c540.776%2c338.486%2c508.407C355.223%2c477.563%2c353.429%2c441.137%2c336.874%2c410.194C319.217%2c377.193%2c290.049%2c348.492%2c252.625%2c347.927C214.418%2c347.35%2c181.644%2c373.765%2c163.853%2c407.582C147.259%2c439.123%2c151.356%2c476.151%2c168.825%2c507.216C186.695%2c538.994%2c216.168%2c565.194%2c252.625%2c565.45' fill='rgba(128%2c 48%2c 22%2c 0.47)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M39.519%2c763.375C81.37%2c761.823%2c118.26%2c738.79%2c139.993%2c702.99C162.671%2c665.634%2c168.832%2c620.613%2c150.176%2c581.094C128.331%2c534.822%2c90.685%2c490.734%2c39.519%2c490.163C-12.307%2c489.585%2c-51.677%2c532.546%2c-75.499%2c578.576C-97.237%2c620.579%2c-99.741%2c670.801%2c-74.75%2c710.954C-51.017%2c749.086%2c-5.365%2c765.04%2c39.519%2c763.375' fill='rgba(128%2c 48%2c 22%2c 0.47)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M999.1541107356026 849.5941869797437L801.3912200498243 739.9724266311523 691.7694597012329 937.7353173169306 889.5323503870112 1047.357077665522z' fill='rgba(128%2c 48%2c 22%2c 0.47)' class='triangle-float1'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1129'%3e%3crect width='1080' height='1080' fill='white'%3e%3c/rect%3e%3c/mask%3e%3cstyle%3e %40keyframes float1 %7b 0%25%7btransform: translate(0%2c 0)%7d 50%25%7btransform: translate(-10px%2c 0)%7d 100%25%7btransform: translate(0%2c 0)%7d %7d .triangle-float1 %7b animation: float1 5s infinite%3b %7d %40keyframes float2 %7b 0%25%7btransform: translate(0%2c 0)%7d 50%25%7btransform: translate(-5px%2c -5px)%7d 100%25%7btransform: translate(0%2c 0)%7d %7d .triangle-float2 %7b animation: float2 4s infinite%3b %7d %40keyframes float3 %7b 0%25%7btransform: translate(0%2c 0)%7d 50%25%7btransform: translate(0%2c -10px)%7d 100%25%7btransform: translate(0%2c 0)%7d %7d .triangle-float3 %7b animation: float3 6s infinite%3b %7d %3c/style%3e%3c/defs%3e%3c/svg%3e");
  background-size: cover;
}

.punchWords {
  position: relative;
}

.punchWords:after {
  content: '';
  display: block;
  width: 100%;
  height: 6px;
  border-radius: 6px;
  background: #803016;
  position: absolute;
  bottom: -5px;
  left: 0;
}

.brandingDitta {
  margin-bottom: 30px;
}

.infoDitta p {
  font-family: "Kristi", cursive;
  color: #172734;
  font-size: 5rem;
  position: relative;
  right: 77px;
  margin-bottom: -10px;
}

.infoDitta>ul>li {
  list-style-type: none;
}

footer {
  background-color: #E3D4BE;
  border-top: 1px solid #803016;
  padding-top: 15px;
}

.kreditFooter {
  font-size: 12px;
}

/*======
Halaman Tentang
=======*/
.coverDitta {
  height: 300px;
  width: 1200px;
  object-fit: cover;
  border-radius: 10px;
  outline: 2px solid #803016;
  outline-offset: -4px;
  box-shadow: rgba(0, 0, 0, 0.15) 0px 3px 3px 0px;
}

figure {
  position: relative;
}

figcaption span{
  position: absolute;
  display: block;
  transform: skewY(-13deg);
  top: 1px;
  padding-left: 12px;
  font-family: "Kristi", cursive;
  color: #172734;
  font-size: 5rem;
  text-shadow: 2px 4px 0 rgb(255, 255, 255);
}


/*======
Halaman Tentang - Carousel
=======*/

.card {
  padding: 10px;
}

.card-img {
  height: 150px;
}

.card-img img {
  object-fit: contain;
  height: inherit;
  margin: 0 auto;
}

.containerKolaborasi {
  width: 55vw;
  margin: 0 auto;
}

.owl-stage-outer {
  border-radius: 6px;
}

/*======
Halaman Portfolio
=======*/

#filters {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

#filters>li {
  list-style-type: none;
}

#filters>li>span {
  display: block;
  padding: 5px 20px;
  text-decoration: none;
  cursor: pointer;
  text-transform: uppercase;
  border: 1px solid #803016;
  margin-right: 5px;
  border-radius: 5px;
  transition: all ease-in-out 0.25s;
}

#filters>li>span.mixitup-control-active {
  background-color: #172734;
  color: #ffffff;
}

.filterDitta {
  list-style-type: none;
  background-color: #172734;
  color: #ffffff;
  padding: 5px;
  border-radius: 5px;
}

.filterDitta active {
  background-color: #E3D4BE;
  color: #172734;
}

.listPorto {
  margin: 0 5px 5px 0;
}

.portoDitta {
  height: 300px;
  object-fit: cover;
}

.card>ul>li>img {
  width:16px;
  height: 16px;
  margin-right: 5px;
  margin-top: -5px;
}

@keyframes zoomin {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

.lightbox-carousel img {
  animation: zoomin 10s linear infinite;
}

/*======
Halaman blog
=======*/

.metaAtas {
  font-size: 16px;
}

/*
.metaTag:before {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z'%3E%3C/path%3E%3C/svg%3E");
  margin: 0 5px 0 0;
  position: relative;
  top: 2px;
}
*/

.metaTag {
  list-style-type: none;
  flex-wrap: wrap;
  gap: 5px;
}

.metaTag li {
  display: inline;
  border: 1px solid #172734;
  background-color: #172734;
  color:#ffffff;
  border-radius: 3px;
  padding: 5px 15px 5px 15px;
  font-size: 0.7em;
}

.metaTag li a {
  color: #ffffff;
}

.featuredImage {
  height: 200px;
}

.featuredImage img {
  object-fit: cover;
  height: 100%;
  width: 100%;
  border-radius: 10px;
  outline: 2px solid #803016;
  outline-offset: -4px;
}

article:not(:first-child) {
  margin-top: 3rem !important;
}

article h2 {
  font-weight: 700;
}

article h2>a, .kategori li>a {
  text-decoration: none;
  color: #0F1922;
}

article h2>a:hover, .kategori li>a:hover {
  text-decoration: underline;
}

.pratinjauArtikel p {
  max-height: calc(4rem * 1.33);
  overflow: hidden;
  position: relative;
}

.pratinjauArtikel p:after {
  content: "";
  background: linear-gradient(to right, transparent, #FABC5B 80%);
  display: block;
  height: calc(1rem * 1.9 + 1px);
  position: absolute;
  inset-block-end: 0;
  pointer-events: none;
  width: 100%;
}

.articleSpacer {
  background-image: linear-gradient(to right, rgb(0, 0, 0, 0), rgb(227, 212, 190) 1% 7.5%, rgb(23, 39, 52) 7.5% 9%, rgb(250, 188, 91) 9% 10.5%, rgb(128, 48, 22) 10.5% 12%, rgba(128, 48, 22, 0.75) 12% 30%, rgba(0, 0, 0, 0));
  border-right: none;
  border-left: 1px solid #803016;
  border-top: 1px solid #803016;
  border-bottom: 1px solid #803016;
}

.insideSpacer {
  display: block;
  width: 7.5%;
  text-align: center;
  font-family: "Kristi", cursive;
  color: #172734;
  font-size: 15px;
  background-color: rgb(227, 212, 190);
}

.sidebarDitta {
  border-left: 1px solid #803016;
}

.sidebarDitta span {
  height: 5px;
  /*width: 10px;*/
  /*border-right: 5px solid #172734;*/
}

.kategori li {
  list-style-type: none;
  margin-bottom: 5px;
}

.kategori li:before {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z'%3E%3C/path%3E%3C/svg%3E");
  margin: 0 5px 0 0;
  position: relative;
  top: 1px;
}

.artikelDitta img{
  max-width: 100%;
  height: auto;
}

.blogDitta h1 {
  font-weight: 700;
  overflow-wrap: anywhere;
}

.blogDitta h1>a {
  text-decoration: none;
  color: #0F1922;
}

.artikelDitta h2 {
  font-weight: 400;
}

.artikelDitta blockquote {
  box-shadow: inset 5px 0 rgb(23, 39, 52);
  padding-left: 1em;
  margin-left: .1em;
}

.artikelDitta {
  overflow-wrap: anywhere;
}

.bodiKomentar {
  border: 1px solid #803016;
}
  
div:nth-child(even of .bodiKomentar) {
  background-color: #E3D4BE;
}

.komentarDitta img {
    border-radius: 50%;
    border: 2px solid #803016;
    object-fit: cover;
}

.separatorKomentar {
  background-image: linear-gradient(to right, rgb(23, 39, 52) 33.3%, rgb(250, 188, 91) 33.3% 66.6%, rgb(128, 48, 22) 66.6% 100%);
  width: 7px;
  min-width: 7px;
}

.avatarKomentar {
  width: 108px;
  min-width: 108px;
  word-break: break-word;
}

.avatarKomentar p {
  text-align: center;
}

.isiKomentar {
  overflow-wrap: anywhere;
}

.active>.page-link {
  background-color: #172734 !important;
  color: #ffffff !important;
  border-color: #803016;
}

.page-link {
  color: #172734;
  border-color: #803016;
  background-color: #FABC5B;
}

.page-item a:hover {
  border-color: #803016;
}

.disabled>.page-link, .page-link.disabled {
  color: var(--bs-pagination-disabled-color);
  background-color: #dda44c;
  border-color: #803016;
}

.btnCari, .btnCari:focus-visible {
  height: 39px;
  border: 1px solid #172734;
  background-color: #172734;
}

.btnCari:hover {
  background-color: #ffffff;
  color: #172734;
  border-color: #803016;
}

.btnCari:active {
  background-color: #172734 !important;
}

.month a::before {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
  margin: 0 5px 0 0;
  position: relative;
  top: 1px;
}

.month a {
  text-decoration: none;
  color: #172734;
}

.month a:hover {
  text-decoration: underline;
}