@charset "UTF-8";
/* CSS Document */
body.dark-mode {
	background-color: #131313;
	color: #f1f1f1;	
}

body.dark-mode a {
	color: #ececec;
}

body.dark-mode a:hover {
	color: #f1f1f1;
}

body.dark-mode h1 {
	color: #f1f1f1;
}

body.dark-mode h2 {
	color: #f1f1f1;
}

body.dark-mode h3 {
	color: #f1f1f1;
}

body.dark-mode .og-expander h3 {
	color: #222222;
}

body.dark-mode h4 {
	color: #f1f1f1;
}

body.dark-mode #page-top {
	background-color: #000000;
	z-index: 1;
}

body.dark-mode #main-logo {
	color: #f1f1f1;
}

body.dark-mode #about {
	background-color: #0e0e0e;
}

body.dark-mode #portfolio {
	background-color: #070707;
}

body.dark-mode #blog {
	background-color: #0e0e0e;
}

body.dark-mode #contact {
	background-color: #070707;
}

body.dark-mode #stalk {
	background-color: #0e0e0e;
}







/* Dark mode CHECKBOX */
#switch {
  height: 0;
  width: 0;
  visibility: hidden;
}

label[for="switch"] {
  cursor: pointer;
  text-indent: -9999px;
  width: 28px;
  height: 20px;
  background: grey;
  display: block;
  border-radius: 16px;
  position: relative;
  float: right;
}

label[for="switch"]:after {
  content: '';
  position: absolute;
  top: 1px;
  left: 1px;
  width: 18px;
  height: 18px;
  background: #fff;
  border-radius: 17px;
  transition: 0.3s;
}

#switch:checked + label {
  background: #0c5e82;
}

#switch:checked + label:after {
  left: calc(100% - 1px);
  transform: translateX(-100%);
}

label[for="switch"]:active:after {
  width: 65px;
}