body.dark-mode html{
	background: initial;

}

body.dark-mode {
	background: var(--background-dark);
	color: var(--fontcolor-dark);
}
 
body.dark-mode #modeSwitch{
    background: var(--background-dark);
}

body.dark-mode .icon{
	filter: grayscale(70%) brightness(1);
}


body.dark-mode .dot {
    background: white;
}

body.dark-mode #homeContent{
	background: var(--background-dark);
}

body.dark-mode #aboutContent::before{
	opacity:0;
	visibility:hidden;
}
body.dark-mode #aboutContent::after{
	visibility: visible;
	opacity:1;
}

body.dark-mode #nav{
	background:var(--background-dark);
}

body.dark-mode #project-arrow{
	color:#ffc107;
}

body.dark-mode .project-description{
	color:#444447;
}

body.dark-mode .project-title:hover + .project-description{
	color:white;
}



body.dark-mode circle {
	stroke: white;
}


body.dark-mode .menu{
      border-left: 2px solid rgb(105 100 92);
}

body.dark-mode .menu div {
      
}

body.dark-mode .menu div.active {
    color: #080129;
    text-shadow: -1px -1px 2px var(--textshadow_dark), 1px 1px 2px var(--textshadow_dark), -1px 1px 2px var(--textshadow_dark), 1px -1px 2px var(--textshadow_dark);
}

body.dark-mode .menu div.active::before {
	background-color: cyan;
	box-shadow: 0 0 6px #00ffe7;
}

body.dark-mode .menu div:hover::before {
	background-color: rgb(0,170,140);
	box-shadow: 0 0 6px #00ffe7;
}

body.dark-mode .menu div:hover {
    color: #080129;
    text-shadow: -1px -1px 2px var(--textshadow_dark), 1px 1px 2px var(--textshadow_dark), -1px 1px 2px var(--textshadow_dark), 1px -1px 2px var(--textshadow_dark);
}