* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  background-color: var(--bg);
  color: var(--text);
  font-family: neue-haas-unica,sans-serif;
}

:root{
  /* --bg: #ffffff; */
  --bg: #e6e6e6;
  --text: #000000;
  --muted: #161515;
  --accent: #A200FF;
  --social-bg: rgb(233, 234, 234);
  /* --sticky-bg: #ffffff; */
  --sticky-bg: #e6e6e6;
  --console-top-bg: #000000;
  --console-top-text: #ffffff;
  --console-terminal-bg: #000000;
  --console-text: #ffffff;
  --note-bg: rgb(238, 240, 240);
}

html.dark,
body.dark{
  --bg: #000000;
  --text: #ffffff;
  --muted: #111;
  --accent: #A200FF;
  --sticky-bg: black;
  --console-top-bg: #000000;
  --console-top-text: #ffffff;
  --console-terminal-bg: #000000;
  --console-text: #ffffff;
  --note-bg: rgb(22,21,21);
}

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    scroll-behavior: smooth;
}

.header {
  height: 10vh;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

/* Hamburguer~Blog Menu */
.parent,
.blog-home a {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: nowrap;
  padding-right:8px;
  font-size: 24px;
  text-decoration: none;
}
.parent p:hover {
  color:#A200FF;
}

.blog-home p:hover {
  color:#A200FF;
}
/***********************/

.switches {
  display: flex;
  align-items: center;
}

.switches select,
.switches button {
  border-color: transparent;
}

button#theme-toggle {
  font-size: 26px;
  margin: auto 4px;
}

body.dark #moon {
  vertical-align: middle;
  display: none;
}

body:not(.dark) #sun {
  display: none;
}

#theme-toggle{
  background-color: transparent;
  color: var(--text);
  border: none;
}

#sun { cursor: pointer; transition: stroke .15s ease, fill .15s ease; }
#sun:hover circle,
#sun:hover line {
  stroke: #FFD700;
}

#moon { cursor: pointer; transition: stroke .15s ease, fill .15s ease; }
#moon:hover path,
#moon:hover circle {
stroke: #9ecbff;
}

.button-sticky {
  overflow: visible;
  white-space: normal;
}

.sticky-navbar {
  background: var(--sticky-bg);
  color: var(--text);
  position: fixed;
  top: 0;
  left: 0px;
  right: 0px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  backdrop-filter: blur(6px);
  transition: transform 240ms ease, opacity 240ms ease;
  z-index: 999;
}

.sticky-navbar svg,
.sticky-navbar svg  {
  color: var(--text);
}

.sticky-navbar #sticky-logo,
.sticky-navbar #sticky-logo * {
  fill: var(--text);
}

.left-sticknav-container {
  display: flex;
  align-items: center;
  padding-left: 10px;
}

.hamburger-menu {
  /* padding-left: 16px; */
  padding-left: 8px;
  padding-right: 16px;
  font-size: 24px;
}

.right-sticknav-container {
  padding-right: 10px;
}
.sticky-nav-list {
  display: flex;
  justify-items: right;
  justify-content: right;
  gap: 0.75rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.button-sticky {
  color: var(--text);
  text-decoration: none;
  font-size: 16px;
  border: none;
  background: none;
  font-weight: 600;
  font-family: 'Poppins', sans-serif;
}

.button-sticky::before {
  margin-left: auto;
}

.button-sticky::after, .button-sticky::before {
  content: '';
  width: 0%;
  height: 2px;
  background: #A200FF;
  display: block;
  transition: 0.5s;
}

.button-sticky:hover::after, .button-sticky:hover::before {
  width: 100%;
}

/* ----------------------------------------------------------------------------- */
/* MENU OVERLAY */
.menu-overlay ul {
    list-style: none;
}

/* The side navigation menu */
.menu-overlay {
  height: 100%; /* 100% Full-height */
  width: 0; /* 0 width - change this with JavaScript */
  position: flex; /* Stay in place */
  flex-direction:column;
  z-index: 1; /* Stay on top */
  top: 8px; /* Stay at the top */
  left: 0;
  background: var(--sticky-bg);
  overflow-x: hidden; /* Disable horizontal scroll */
  padding-top: 60px; /* Place content 60px from the top */
  transition: 0.5s; /* 0.5 second transition effect to slide in the menu-overlay */
}

/* The navigation menu links */
.menu-overlay a {
  padding: 0px 0px 0px 10px;
  text-decoration: none;
  /* font-size: 25px; */
  color: var(--text);
  display: block;
  transition: 0.3s;
}

/* When you mouse over the navigation links, change their color */
.menu-overlay a:hover {
  color: #A200FF;
}

/* Position and style the close button (top right corner) */
.menu-overlay .closebtn {
  position: absolute;
  top: 50px;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
  background-color: transparent;
}

.menu-overlay {
  position: fixed;
}

/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
#main {
  transition: margin-left .5s;
  padding: 20px;
}

/* On smaller screens, where height is less than 450px, change the style of the menu-overlay (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
  .menu-overlay {padding-top: 15px;}
  .menu-overlay a {font-size: 18px;}
} 

 /* Style the buttons that are used to open and close the accordion panel */
.accordion {
  /* background-color: #eee; */
  /* color: #444; */
  cursor: pointer;
  padding: 18px;
  width: 100%;
  text-align: left;
  border: none;
  outline: none;
  transition: 0.4s;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.accordion:hover {
  background-color: #A200FF;
}
.accordion.active {
    color: #A200FF;
    font-weight: bold;
}
/* Style the accordion panel. Note: hidden by default */
.panel {
  padding: 0 18px;
  /* background-color: white; */
  display: none;
  overflow: hidden;
} 

.load-error {
  background: transparent;
  color: #a00;
  padding: 0;
  margin: 0 0 0.5rem 0;
  border-left: 3px solid #ff4d4d;
  font-size: 0.95rem;
  line-height: 1.25;
  border-radius: 0;
}

/* ----------------------------------------------------------------------------- */
/* menu-overlay stuff */
.blog-menu-btn {
  --btn-padding: 15px 20px;
  --btn-transition: .3s;
  --btn-letter-spacing: .1rem;
  --btn-animation-duration: 1.2s;
  --btn-shadow-color: rgba(0, 0, 0, 0.137);
  --btn-shadow: 0 2px 10px 0 var(--btn-shadow-color);
  --hover-btn-color: #A200FF;
  --default-btn-color: #fff;
  --font-size: 16px;
  /* 👆 this field should not be empty */
  --font-weight: 600;
  /* --font-family: 'Poppins', sans-serif; */
  /* --font-family: Menlo,Roboto Mono,monospace; */
  /* 👆 this field should not be empty */
  cursor:pointer;
}

/* button settings 👆 */

.blog-menu-btn {
  /* background-color: #eee; */
  /* color: #444; */
  cursor: pointer;
  font-size: var(--font-size);
  font-weight: var(--font-weight);
  /* padding: 18px; */
  padding-left: 18px;
  padding-bottom: 8px;
  padding-top: 8px;
  width: 100%;
  text-align: left;
  border: none;
  outline: none;
  transition: 0.4s;
}

.blog-menu-btn.active span {
  color: #A200FF;
}

.panel {
  padding: 0 18px;
  /* background-color: white; */
  display: none;
  overflow: hidden;
}
.blog-menu-btn span {
  letter-spacing: var(--btn-letter-spacing);
  transition: var(--btn-transition);
  box-sizing: border-box;
  position: relative;
}

.blog-menu-btn span::before {
  box-sizing: border-box;
  position: absolute;
  content: "";
  background: inherit;
}

.blog-menu-btn:hover span {
  color: var(--hover-btn-color);
}

.blog-menu-btn:not(.active):hover span::before,
.blog-menu-btn:not(.active):focus span::before {
animation: chitchat linear both var(--btn-animation-duration);
}


@keyframes chitchat {
  0% {
    content: "#";
  }

  5% {
    content: ".";
  }

  10% {
    content: "^{";
  }

  15% {
    content: "-!";
  }

  20% {
    content: "#$_";
  }

  25% {
    content: "№:0";
  }

  30% {
    content: "#$%+.";
  }

  35% {
    content: "@}-?_}]";
  }

  40% {
    content: "?{4@%)_1";
  }

  45% {
    content: "=.,^!\;\;]";
  }

  50% {
    
    content: "?2@%\;1}}]]";
  }

  55% {
    content: "!@#$%^&;:";
  }

  60% {
    content: "?{%:%@%0!";
    right: 0;
  }

  65% {
    content: "|{4%{f[4";
    right: 0;
  }

  70% {
    content: "{4%0%";
    right: 0;
  }

  75% {
    content: "'1_0<";
    right: 0;
  }

  80% {
    content: "{0%";
    right: 0;
  }

  85% {
    content: "]>'";
    right: 0;
  }

  90% {
    content: "4";
    right: 0;
  }

  95% {
    content: "2";
    right: 0;
  }

  100% {
    content: "";
    right: 0;
  }
}



/* ----------------------------------------------------------------------------- */
/* try to find a way to make h1 more to the left */
.main-content {
    position: fixed;
    top:48px;
    left: 0px;
    right: 0px;
    padding-left: 32px;
    padding-right: 32px;
    bottom:32px;
    overflow-y:auto;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
}
.main-content * {
  min-height: calc(100% - 3rem);
  box-sizing: border-box;
}

footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 32px;;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  color: var(--text);
}

/* =================================================== */
/* post section */
.all-blog-post {
  padding-bottom: 48px;
}

.all-post-title {
  padding-bottom: 4px;
}
.all-post-excerpt {
  display: flex;
  gap: 12px;
}

.all-blog-post a:hover{
  color:#A200FF;
}

.post-content {
  padding-top: 16px;
}

.blog-title,
.post-title {
  padding-bottom:24px;
}

.post-excerpt{
  padding-top: 16px;
}

.post-excerpt {
  display: flex;
  gap: 16px;
}

.post-excerpt img {
  padding: 8px;
}

.blog-post p,
.all-blog-post p {
  box-sizing: border-box;
  /* margin-right: 100px; */
  font-size:16px;
  font-weight: 400;
  font-height: 24px;
  font-family: neue-haas-unica,sans-serif;
}

.blog-post a,
.all-blog-post a {
  text-decoration: none;
}

.blog-post p a,
.all-blog-post p a {
  font-weight: bold;
  color: #A200FF;
}

.blog-post p a:hover,
.all-blog-post p a:hover {
  text-decoration: underline;
}

.blog-post h2,
.blog-post h3,
.blog-post h4,
.blog-post h5 {
  padding-top: 16px;
  padding-bottom: 8px;
}

.blog-post {
  padding-bottom: 48px;
}

.post-content img {
  max-width: 90%;
  height: auto;
  display: block;
  margin: 0 auto;
  padding: 8px 0 16px 0;
}

.blog-post-contents p {
  box-sizing: border-box;
  margin-right: 100px;
}

code {
  color:#A200FF;
  font-size: 16px;
  font-weight: bold;
}

.console_container code {
  font-weight: normal;
}

.blog-post h1 code,
.blog-post h2 code,
.blog-post h3 code,
.blog-post h4 code,
.blog-post h5 code,
.blog-post h6 code {
  font-size: inherit;
  line-height: inherit;
  vertical-align: baseline;
}
/* ================================================ */
/* terminal */
.console_container {
  border: 3px solid #1a2332;
  border-radius: 4px;
  box-sizing: border-box;
  margin: 8px 0 16px;
  /* background-color: blue; */
}
/* header ================================= */
.console_top {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 2px solid #1a2332;
  /* background-color: red; */
  background-color: var(--console-top-bg);
}

.console_title {
  display: block;
  text-align: center;
  background:transparent;
  color: var(--console-top-text);
  margin: 0;
  min-height: 1em;
}

.console_title:empty::before {
  content: "\00a0";
}

.console_bar {
  position: absolute;
  right: 0px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  gap: 8px;
  padding: 6px 10px;
  z-index: 2;
  background: transparent;
}

.console_icon {
  width: 20px;
  height: 20px;
  stroke: #cfcfcf;
  stroke-width: 2;
  fill: none;
  opacity: 0.85;
  background: transparent;
  display: block;
}
/* ======================================== */
/* body =================================== */
.console_terminal {
  background-color: var(--console-terminal-bg);
  
  text-align: left;
  overflow-x: auto;
  box-sizing: border-box;
  min-width: 0;
  padding: 4px 4px 4px;
}

.console_shell,
.console_shell * {
  color: var(--console-text);
  background: transparent;
}
.console_shell {
  white-space: nowrap;
  font-size: 16px;
  font-family: monospace, ui-monospace, SFMono-Regular, "Roboto Mono", "Helvetica Neue", monospace;
  display: block;
}

.console_shell .token {
  display: inline;
  vertical-align: baseline;
}

.token.command .arguments,
.token.output {
  display: block;
  max-width: 100%;
  margin-top: 6px;
  white-space: pre;
  /* font-family: monospace, ui-monospace, SFMono-Regular, "Roboto Mono", "Helvetica Neue", monospace; */
  overflow-wrap: normal;
}

.token.shell {
  font-size: 0;
}
.token.shell .user,
.token.shell .at,
.token.shell .host,
.token.shell .console_div,
.token.shell .pwd,
.token.shell .shell_symbol,
.token.command .function,
.token.command .arguments {
  font-size: 16px;
  display: inline;
  margin: 0;
  padding: 0;
}

.token.shell .user,
.token.shell .at,
.token.shell .host {
  color: red;
}

.token.shell .shell_symbol {
  color: red;
  padding-right: 4px;
}

.token.shell .pwd {
  display: inline;
}

.token.command .function {
  color:#A200FF;
}
.copy {
  cursor: pointer;
  color:#A200FF;
}

.copy:hover {
  text-decoration: underline;
}

/* notes */
.note {
  border-left: 4px solid #a855f7;
  padding-left: 12px;
  margin-top: 10px;
  color: #d1d5db;
}

.note,
.note p {
  background-color: var(--note-bg)
}

.blog-post ul {
  padding-left: 20px;
  list-style-type:circle !important;
}

.console_container > .console_top {
  background-color: rgba(0,0,0,0.9) !important;
  z-index: 3 !important;
}


.menu-overlay{
  padding-top: 100px;
}

/* =================================================== */
/* overlay-menu Blog post menu */
.blog-post-menu li{
  font-size: 14px;
}

.blog-post-menu {
  padding: 0px 0 30px 0; 
  position: relative;
}

.blog-post-menu::after {
  content: '';
  position: absolute;
  left: 0;
  right: 50px;
  bottom: 8px;
  height: 2px;
  background-image: linear-gradient(to right, transparent 25%, #CCC, transparent 75%);
  pointer-events: none;
}
/* ========================================================= */