@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400&display=swap');
@import url("https://fonts.googleapis.com/css2?family=Pacifico&display=swap");

.logo-text { font-family:'Pacifico',cursive; color:black; font-size:28px; font-weight:bold; }
.logo-text .highlight { color:crimson; font-size:28px; }

*{ margin:0; padding:0; box-sizing:border-box; text-decoration:none; outline:none; border:none; transition:all .2s linear; }
html{ font-size:62.5%; overflow-x:hidden; scroll-behavior:smooth; }
body{ background:#f7f7f7; font-family:'Poppins',sans-serif; }
*::selection{ background:#2b3dda; color:#fff; }
html::-webkit-scrollbar{ width:.8rem; }
html::-webkit-scrollbar-track{ background:rgb(235,202,245); }
html::-webkit-scrollbar-thumb{ background:#420177; }

/* navbar */
header{ position:fixed; top:0; left:0; right:0; z-index:1000; display:flex; align-items:center; justify-content:space-between; padding:1.7rem 10%; height:6.5rem; background:#fff; box-shadow:0 1px 4px rgba(146,161,176,.3); }
header .logo{ font-size:1.9rem; font-weight:800; color:#0E2431; display:inline-flex; align-items:center; gap:6px; }
#meta3d{ width:54px; height:23px; flex-shrink:0; }
header .logo:hover{ color:#0f46a2; }
header .navbar ul{ list-style:none; display:flex; justify-content:center; align-items:center; }
header .navbar li{ margin-left:2.5rem; }
header .navbar ul li a{ font-size:1.57rem; color:#0E2431; font-weight:600; text-transform:capitalize; letter-spacing:.04rem; }
header .navbar ul li a:hover{ color:#011aff; border-bottom:.2rem solid #011aff; padding:.5rem 0; }
#menu{ font-size:3rem; cursor:pointer; color:rgb(24,2,63); display:none; }

@media(max-width:768px){
  #menu{ display:block; }
  header .navbar{ position:fixed; top:6.5rem; right:-120%; width:75%; height:100%; background:#0e0f31; }
  header .navbar ul{ flex-flow:column; padding:1rem; }
  header .navbar ul li{ text-align:center; width:26rem; margin:1rem 0; border-radius:.5rem; }
  header .navbar ul li a{ display:block; padding:1rem; color:#fff; font-size:2rem; }
  header .navbar ul li a:hover{ padding:1rem; border-radius:.5rem; border-bottom:.5rem solid #011aff; }
  .fa-times{ transform:rotate(180deg); }
  header .navbar.nav-toggle{ right:0; }
}

/* article layout */
.post-page{ padding-top:9rem; padding-bottom:6rem; max-width:820px; margin:0 auto; padding-left:2rem; padding-right:2rem; }

.post-back{ display:inline-flex; align-items:center; gap:.6rem; font-size:1.4rem; font-family:'Nunito',sans-serif; font-weight:700; color:#0f46a2; margin-bottom:3rem; text-transform:capitalize; }
.post-back i{ font-size:1.3rem; transition:transform .2s; }
.post-back:hover i{ transform:translateX(-4px); }

.post-tag{ display:inline-block; padding:.3rem 1rem; border-radius:2rem; font-size:1.15rem; font-weight:700; font-family:'Nunito',sans-serif; margin-bottom:1.4rem; text-transform:capitalize; }
.post-tag.ml    { background:#e8f0ff; color:#0f46a2; }
.post-tag.nlp   { background:#f3e8ff; color:#6d02cc; }
.post-tag.ds    { background:#e6fff8; color:#007a5e; }
.post-tag.cloud { background:#fff8e1; color:#b45309; }
.post-tag.career{ background:#fff0f3; color:crimson; }
.post-tag.dist  { background:#e6fff6; color:#0d6e4e; }

.post-title{ font-size:3.2rem; font-weight:800; color:#0E2431; line-height:1.3; margin-bottom:1.2rem; text-transform:none; }
.post-meta{ font-size:1.3rem; color:#888; font-family:'Nunito',sans-serif; margin-bottom:3rem; text-transform:none; }
.post-meta i{ color:#0f46a2; margin-right:.3rem; }
.post-meta span{ margin-right:1.5rem; }

.post-divider{ border:none; border-top:2px solid #eee; margin-bottom:3rem; }

.post-body{ font-size:1.6rem; line-height:1.9; color:#333; text-transform:none; font-family:'Nunito',sans-serif; }
.post-body h2{ font-size:2.2rem; font-weight:800; color:#0E2431; margin:3rem 0 1.2rem; }
.post-body h3{ font-size:1.8rem; font-weight:700; color:#0f46a2; margin:2.5rem 0 1rem; }
.post-body p{ margin-bottom:1.8rem; }
.post-body ul, .post-body ol{ margin:1.2rem 0 1.8rem 2.5rem; }
.post-body li{ margin-bottom:.7rem; }
.post-body strong{ color:#0E2431; font-weight:700; }
.post-body code{ background:#f0f4ff; color:#0f46a2; padding:.15rem .5rem; border-radius:.3rem; font-family:monospace; font-size:1.4rem; }
.post-body pre{ background:#0e0f31; color:#a8d8ea; padding:2rem; border-radius:.8rem; overflow-x:auto; margin-bottom:2rem; }
.post-body pre code{ background:none; color:#a8d8ea; padding:0; font-size:1.4rem; }
.post-body blockquote{ border-left:4px solid #0f46a2; background:#f0f4ff; padding:1.5rem 2rem; border-radius:0 .6rem .6rem 0; margin:2rem 0; font-style:italic; color:#444; }
.post-body a{ color:#0f46a2; text-decoration:underline; }
.post-body a:hover{ color:#082e7a; }

.post-callout{ background:linear-gradient(135deg,rgba(15,70,162,.07),rgba(66,1,119,.05)); border-left:4px solid #0f46a2; border-radius:0 .8rem .8rem 0; padding:1.6rem 2rem; margin:2.5rem 0; }
.post-callout p{ margin-bottom:0; }

/* share bar */
.share-bar {
  margin-top: 4rem;
  padding-top: 2.5rem;
  border-top: 2px solid #eee;
  display: flex;
  align-items: center;
  gap: 1.2rem;
  flex-wrap: wrap;
}
.share-label {
  font-size: 1.4rem;
  font-weight: 700;
  color: #0E2431;
  font-family: 'Nunito', sans-serif;
  white-space: nowrap;
}
.share-btn {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .8rem 1.6rem;
  border-radius: 3rem;
  font-size: 1.3rem;
  font-weight: 700;
  font-family: 'Nunito', sans-serif;
  cursor: pointer;
  transition: transform .2s, box-shadow .2s;
  text-transform: none;
  border: none;
}
.share-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,.15); }
.share-btn.linkedin { background: #0a66c2; color: #fff; }
.share-btn.twitter  { background: #000; color: #fff; }
.share-btn.copy     { background: #f0f4ff; color: #0f46a2; border: 1.5px solid #d0dcff; }
.share-btn.copy.copied { background: #e6fff6; color: #007a5e; border-color: #b2f0d8; }
.share-btn i { font-size: 1.3rem; }

/* footer */
.footer{ min-height:auto; padding-top:0; background:rgb(0,1,43); }
.footer .box-container{ display:flex; justify-content:center; flex-wrap:wrap; }
.footer .box-container .box{ flex:1 1 25rem; margin:2rem; }
.footer .box-container .box h3{ font-size:2.5rem; color:#fff; padding-bottom:1rem; font-weight:normal; text-transform:capitalize; }
.footer .box-container .box p{ font-size:1.5rem; color:#ccc; padding:.7rem 0; text-transform:none; }
.footer .box-container .box p i{ padding-right:1rem; color:#421cecf5; }
.footer .box-container .box a{ font-size:1.5rem; color:rgb(238,238,238); padding:.3rem 0; display:block; text-transform:capitalize; }
.footer .box-container .box a:hover{ color:#421cecf5; }
.footer .box-container .box .share{ display:flex; flex-wrap:wrap; padding:1rem 0; }
.footer .box-container .box .share a{ height:4rem; width:4rem; padding:1rem; text-align:center; border-radius:5rem; font-size:1.7rem; margin-right:1rem; background:rgb(230,230,230); color:#02094b; }
.footer .box-container .box .share a:hover{ background:transparent; transform:scale(.98); border:.1rem solid rgb(180,178,178); color:#421cecf5; }
.footer .credit{ padding:1rem 0 0; text-align:center; font-size:1.5rem; font-family:'Nunito',sans-serif; font-weight:600; color:#fff; border-top:.1rem solid #fff3; }
.footer .credit a{ color:#421cecf5; }
.footer .fa{ color:#E90606; margin:0 .3rem; font-size:1.5rem; animation:pound .35s infinite alternate; }
@keyframes pound{ to{ transform:scale(1.1); } }

#scroll-top{ position:fixed; top:-140%; right:2rem; padding:1rem 1.5rem; font-size:2rem; background:#421cecf5; color:rgb(245,244,246); border-radius:5rem; transition:1s linear; z-index:1000; }
#scroll-top.active{ top:calc(100% - 12rem); }

/* code copy button */
.post-body pre { position: relative; }
.code-copy-btn {
  position: absolute;
  top: .8rem;
  right: .8rem;
  background: rgba(255,255,255,.1);
  color: #a8d8ea;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: .4rem;
  padding: .3rem .9rem;
  font-size: 1.15rem;
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  cursor: pointer;
  opacity: 0;
  transition: opacity .2s, background .2s;
  white-space: nowrap;
  z-index: 2;
}
.post-body pre:hover .code-copy-btn { opacity: 1; }
.code-copy-btn:hover { background: rgba(255,255,255,.22); color: #fff; }
.code-copy-btn.copied { background: rgba(0,194,160,.25); color: #00c2a0; border-color: #00c2a0; opacity: 1; }

/* diagrams & tables */
.diagram-wrap{ text-align:center; margin:2.5rem 0; }
.diagram-wrap svg{ max-width:100%; height:auto; }
.diagram-caption{ font-size:1.3rem; color:#888; font-family:'Nunito',sans-serif; margin-top:.8rem; font-style:italic; }
.post-table-wrap{ overflow-x:auto; margin:2.5rem 0; }
.post-table{ width:100%; border-collapse:collapse; font-size:1.45rem; font-family:'Nunito',sans-serif; }
.post-table th{ background:#0e0f31; color:#fff; padding:1rem 1.4rem; text-align:left; font-weight:700; }
.post-table td{ padding:.9rem 1.4rem; border-bottom:1px solid #e8eaf0; color:#333; }
.post-table tr:nth-child(even) td{ background:#f4f6ff; }
.post-table tr:hover td{ background:#edf0ff; }
.post-table td code{ font-size:1.3rem; }
.mermaid{ margin:2.5rem 0; border-radius:.8rem; overflow:hidden; background:#0e0f31; padding:1.5rem; }

@media(max-width:450px){
  html{ font-size:55%; }
  .post-title{ font-size:2.4rem; }
}