/*-----------------------------------*\ 
  #CUSTOM PROPERTY
\*-----------------------------------*/
.light-theme {
  
  /**
   * light theme colors 
   */
   --liBackgroundColor:rgb(239, 239, 239)
   --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-fourth:hsl(217, 36%, 42%);

  --foreground-search: hsl(214, 14%, 56%);
  --foreground-search2:rgb(16, 17, 18);
  --accent: hsl(229, 76%, 66%);
  --accent2:hsl(229, 76%, 66%);
  --accent3: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;
  --blogGlow:2px 2px 14px hsla(0, 0%, 0%, 0.15);

}

.dark-theme {

  /**
   * dark theme colors 
   */
   --liBackgroundColor:hsl(222, 32%, 8%);
   --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-fourth:hsl(216, 53%, 77%);
  
  --foreground-search: hsl(0, 0%, 96%);
  --foreground-search2:rgb(244, 244, 244);
  --accent: hsl(229, 76%, 66%);
  --accent2:hsl(310, 100%, 61%);
  --accent3:hsl(314, 94%, 51%);
  --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;
    --blogGlow:6px 10px 25px hsla(325, 93%, 48%, 0.25);
}
  /** * 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;
  
}

/* FONT FAMILY <3 */
h1,h2,h3,h4,h5,p,li{
  cursor: url(/assets/images/blade.cur),auto;
}

.h2,
.h3,
.h4 {
  display: block;
  color: var(--foreground-primary);
  font-family: 'Carter One', cursive;
}

.h1 {
  display: block;
  color: var(--foreground-primary);
  font-size: 3.3rem;
  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;
  padding:20px 0px 5px 0px;
}

.h3 {
  font-size: var(--fs-3);
  font-weight: 700;
  color:var(--foreground-fourth) !important;
  
}
p {
  font-family: 'Share Tech Mono', monospace;
  cursor: url(/assets/images/blade.cur),auto;
  color:var(--foreground-primary);
}
.blog p{
  font-size: 22px;
  letter-spacing: -1px;
  line-height: 34px;
}
.btn{
  cursor: url(/assets/images/hands11.cur),auto;
}
.blog li{
  font-size:20px;
  color:var(--foreground-primary);
  /* background-color: var(--liBackgroundColor); */
  font-weight: 700;
  font-family: 'Share Tech Mono', monospace;
  padding:5px 0px 10px 40px;
  line-height: 24px;
}
.blog li::before{
  content:"¤ "
}
.blog ul, .blog ol{
  padding:0px 0px 25px 0px;
}
.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;
    transition: 0.4s ease-in-out;
}
a:hover{
  font-size: 27px;
  cursor:url('/assets/images/hands11.cur'),auto;
  /* transform: rotate(360deg) ; */
  color:var(--accent2);
}
.menu li{
  font-size:16px;
  padding:11px 10px;
}

.menu li a{
font-size:16px !important;
font-family: 'Carter One', cursive !important;
  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)
}
.menu img{
  width:210px;
  margin-left: 240px;
}

.tip{
font-size:16px;
background-color: rgb(233, 248, 209);
font-weight: 500;
color:green;
border: 2px dotted green;
padding: 10px 5px;
}