/*-----------------------------------*\ 
  #CUSTOM PROPERTY
\*-----------------------------------*/
.light-theme {
  
    /**
     * light theme colors 
     */
     --blackWhite:#000;
     --white:#fff;
    --background-primary: hsl(0, 0%, 100%);
    --background-secondary: hsl(0, 0%, 97%);
  
    --action-primary: hsl(214, 32%, 91%);
    --action-secondary: hsl(210, 38%, 95%);
  
    --foreground-primary: hsl(218, 23%, 23%);
    --foreground-secondary: hsl(216, 15%, 52%);
    --foreground-tertiary: hsl(214, 20%, 69%);
  
    --foreground-search: hsl(214, 14%, 56%);
    --foreground-search2:rgb(16, 17, 18);
    --accent: hsl(229, 76%, 66%);
    --accent2:hsl(229, 76%, 66%);
    --goldColor: hsl(53, 94%, 51%);
    --selection: hsl(310, 100%, 61%);
    --backgroundSamurai: url('/assets/images/samurai-day-good-clean.svg');
  /* hero cv/project button */
    --width:40%;
    --height:50%;
    --sizeDownloadCv : 3.0rem;
    --boxShadowSword:0 0 150px 85px hsla(229, 76%, 66%, .4);
    /* Table of contents */
    --alink: hsl(229, 76%, 66%);
    --navColor: rgb(48, 48, 48) !important;
  }
  
  .dark-theme {
  
    /**
     * dark theme colors 
     */
  
     --blackWhite:#fff;
    --white:#fff;
    --background-primary: hsl(218, 23%, 23%);
    --background-secondary: hsl(220, 26%, 14%);
  
    --action-primary: hsl(216, 15%, 52%);
    --action-secondary: hsl(218, 23%, 23%);
  
    --foreground-primary: hsl(210, 38%, 95%);
    --foreground-secondary: hsl(211, 25%, 84%);
    --foreground-tertiary: hsl(214, 20%, 69%);
    
    --foreground-search: hsl(0, 0%, 96%);
    --foreground-search2:rgb(244, 244, 244);
    --accent: hsl(229, 76%, 66%);
    --accent2:hsl(310, 100%, 61%);
    --goldColor: hsl(314, 94%, 51%);
    --selection: hsl(244, 100%, 61%);
    --backgroundSamurai: url('/assets/images/samurai-night-good-clean.svg');
  /* hero cv/project button */
    --width:42%;
    --height:%;
    --sizeDownloadCv : 2.8rem; 
    --boxShadowSword:0 0 150px 85px rgba(255, 0, 212, 0.5);
  /* Table of contents */
      --alink:hsl(0, 0%, 99%);
      --navColor: rgb(241, 241, 241) !important;
  }
    /** * scrollbar style */
    ::-webkit-scrollbar { width: 16px; }  
    ::-webkit-scrollbar-thumb {background: var(--accent);border-radius: 20px;border: 4px solid;}
    .light-theme::-webkit-scrollbar-thumb { border-color: hsl(0, 0%, 90%); }
    .dark-theme::-webkit-scrollbar-thumb { border-color: hsl(219, 27%, 20%); }
    .light-theme::-webkit-scrollbar-track { background: hsl(0, 0%, 90%); }
    .dark-theme::-webkit-scrollbar-track { background: hsl(219, 27%, 20%); }
  
  

  
  *{  box-sizing: border-box;  padding:0;  margin:0;  }
  :root {
    /**   * typography    */
      /* font-family: 'Noto Sans HK', sans-serif; */
      /* font-family: 'Carter One', cursive; */
      /* font-family: 'Share Tech Mono', monospace; */
      
    --fs-base: 0.85rem;
    --fs-1: 1.875rem;
    --fs-2: 1.6rem;
    --fs-3: 1.35rem;
    --fs-4: 1.0rem;
    --fs-5: 0.75rem;
  
    /**   * spacing    */
    --py: 5rem;
  }
  
  html {
    font-family: 'Share Tech Mono', monospace;
    font-size: var(--fs-base); /* base font-size (0.85rem = 13.6px) */
    line-height: 1.8;
  }
  .container{
    display:flex;
    border:0px;
    justify-content:center;
    align-items:center;
    margin:0px 300px;
  }
  .main-blog{
    display:flex;
    border:0px;
    justify-content:center;
    align-items:center;
    margin:0px 300px;
  }
  /* FONT FAMILY <3 */
  .h2,
  .h3,
  .h4 {
    display: block;
    color: var(--foreground-primary);
    font-family: 'Noto Sans HK', sans-serif;
    cursor: url(/assets/images/blade.cur),auto;
  }
  
  .h1 {
    display: block;
    color: var(--foreground-primary);
    font-size: 3.1rem;
    font-weight: 900;
    padding-right: 50px;
    /* font-family: 'Paytone One', sans-serif; */
    font-family: 'Carter One', cursive;
    letter-spacing: 2.2px;
    cursor: url(/assets/images/blade.cur),auto;
  }
  
  .h2 {
    font-size: 1.9rem;
    font-weight: 700;
    font-family: 'Carter One', cursive;
  }
  
  .h3 {
    font-size: var(--fs-3);
    font-weight: 700;
    
  }
  p{
    font-family: 'Share Tech Mono', monospace;
    cursor: url(/assets/images/blade.cur),auto;
  }
  
  .h4 {
    font-size: var(--fs-4);
    font-weight: 700;
  }
  
  
  body{
      font-family: sans-serif;
      /* overflow: hidden; */
      scroll-behavior: smooth;
      overflow-x: hidden;
      overflow-y: scroll;
  }
  nav{
      padding: 0px;
  }
  nav a, li a {
    cursor: url(/assets/images/hands11.cur),auto;
  }
  
  ul{
      list-style-type: none;  
  }
  a{
      color:var(--accent);
      text-decoration: none;
  }
  a:hover{
      /* text-decoration: underline; */
  }
  .menu li{
      font-size:16px;
      padding:11px 10px;
  }
  .menu li a{
    font-size:16px;
    font-family: 'Carter One', cursive;
      display:block;
      /* this will allow hoover the right side of the nav bar and still make it clickable showing at 10:05 on this video https://www.youtube.com/watch?v=6pidsgeLLzE*/
    color:var(--navColor) !important;
    }
  .menu img{
      width:210px;
  
      margin-left: 240px;
  }
  .logo-light, .logo-dark {
    max-width: 310px 
  }
  @media(width>50px){
    .logo-light, .logo-dark {
      width:100%;
    }
  }