/*-----------------------------------*\ 
  #CUSTOM PROPERTY
\*-----------------------------------*/
::selection {
  background-color: rgb(235, 12, 146); /* Set the background color */
  color: #f5f5f5; /* Set the text color */
}

.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;  }

  img {
    cursor: url(/assets/images/hands11.cur),auto;
  }
  

  ul li{
  list-style: none;
  padding-top:5px;
  }

  .outter_box{
    border:2px solid rgb(114, 114, 114);
    padding:20px;
    margin:50px 140px;
    box-shadow: 4px 4px 13px rgba(171, 171, 171,.1)
  }
  .box_group{
    display:flex;
    flex-wrap:wrap;
  }
  .gallery_title{
   color:white;
  text-align:center;
  }
body{
    background-color: var(--background-primary);
  }
  .outter_box{
    background-color: var(--background-secondary);
  }

  .title_triple_box{
    display:flex;
    flex-wrap: nowrap;
    justify-content:center;
  }

  .box{
    font-size:1.1rem;
    font-family: 'Share Tech Mono', monospace;
    width:47%;
    height:auto;
    border:0px solid gold;
    padding:20px;
    /* padding:10px 20px 10px 0px; */
    margin:10px 20px 10px 20px;
    display:flex;
    transition:1s;
    background-color:hsla(74, 10%, 50%, 0.1);
    color:rgb(182, 182, 182);
    border-bottom:2px solid gray;
  }
  a:hover{
    color:var(--accent)
  }
  .box_icon{
    padding:0px 10px 0px 0px;
    /* border:2px solid red; */
    /* align-self: center; */
  }

  .box:hover { 
    background-color:hsla(82, 100%, 70%,.1);
    background-position-x:50%;
    color:white;
   transform: translateY(-10px);
   box-shadow: 4px 4px 3px rgb(0, 255, 81),8px 8px 12px rgb(235, 12, 146),15px 15px 15px rgb(235, 213, 12,.3);
    
  }
 .title_project{
  font-family: 'Carter One', cursive;
  font-size: 1.7rem;
 }
  .info{
    color:gold;
    font-family: 'Carter One', cursive;
  }
  
  .project_icon{
    width:50px;
    height:auto;
  }

  .signature{
    color:var(--foreground-primary);
    text-align: right;
  }