/* Add HandWiki color to the top navigation for stand-alone pages */

/* Page layout */

:root {
  --background-color: #ffffff;
  --text-color: #212529;
  --link-color: #2c68a0;
  --link-visited-color: red;
  --external-link-color: #2c68a8;
  --hover-color: #9400D3;
  --sitebar-background-color: #f5f5f5;
  --toc-background-color: #f8f9fa;
  --head-background-color: #e6e6ff;
  --white-background-color: #ffffff;
  --yellow-background-color: #ffb84d;
  --gray-background-color: #f9f9f9;

}

.hw-theme-light {
  --background-color: #ffffff;
  --text-color: #212529;
  --external-link-color: #2c68a8;
  --link-visited-color: red;
  --link-color: #2c68a0;
  --hover-color: #9400D3;
  --sitebar-background-color: #f5f5f5;
  --toc-background-color: #f8f9fa;
  --head-background-color: #e6e6ff;
  --white-background-color: #ffffff;
  --yellow-background-color: #ffb84d;
  --gray-background-color: #f9f9f9;
}


/* Dark mode switch */
.hw-theme-dark  {
  --background-color: #3F3F3F;
  --text-color: #fff;
  --link-color: #ffb84d;
  --external-link-color:#ccccff;
  --link-visited-color: #99ccff;
  --hover-color:  #9bedfe;
  --sitebar-background-color: #353935;
  --toc-background-color: #353935;
  --head-background-color: #4a235a;
  --white-background-color: #353935;
  --yellow-background-color: #ac6a07;
  --gray-background-color: #262626;
}


/* The switch - the box around the darkslider */
.darkswitch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 28px;
  margin-top:-17px;
  float: right;
}

/* Hide default HTML checkbox */
.darkswitch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.darkslider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

.darkslider:before {
  position: absolute;
  content: "";
  height: 30px;
  width: 30px;
  left: 0px;
  bottom: 4px;
  top: 0;
  bottom: 0;
  margin: auto 0;
  -webkit-transition: 0.4s;
  transition: 0.4s;
  box-shadow: 0 0px 15px #2020203d;
  background: white  url('/blog/bl-kernel/img/sunny.png');
  background-repeat: no-repeat;
  background-position: center;
}

input:checked + .darkslider {
  background-color: #ffb84d;
}

input:focus + .darkslider {
  box-shadow: 0 0 1px #ffb84d;
}

input:checked + .darkslider:before {
  -webkit-transform: translateX(24px);
  -ms-transform: translateX(24px);
  transform: translateX(24px);
  background: #232323 url('/blog/bl-kernel/img/night.png');
  background-repeat: no-repeat;
  background-position: center;
}

/* Rounded darksliders */
.darkslider.round {
  border-radius: 30px;
}


.darkslider.round:before {
  border-radius: 50%;
}



body, .card  {
  color: var(--text-color);
  background-color: var(--background-color);
}

h1.title, h2.title {
  color: var(--text-color);
  background-color: var(--background-color);
}

a:hover {
    color: var(--hover-color); 
}


.list-navigation {
        list-style-type: square ! important; 
}

.list-navigation li{
  margin: 8px 0;
}