:root {
    --text-color: rgb(255, 255, 255);
}

  /* Dark mode styles */
.dark-mode {
    --text-color: rgba(234, 172, 240, 0.938);
    outline: none;
    border: none;
}

body, header, i, footer, h1, 
h2, h3, h4, h5, h6, content, #header .logo, #header .content {
    color: var(--text-color);
    border-color: var(--text-color);
}

#header nav ul li {
    border-color: var(--text-color);
}
#header nav ul {
    border: solid 1px var(--text-color)
}
#header > *:before {
    background: var(--text-color);
}

.dark-mode-button {
    font-size: 30px;
    border: none;
    outline: none;
    box-shadow: none;
    line-height: inherit;
    padding: inherit;    
}
.dark-mode-button:hover {
    border: none;
    outline: none;
    box-shadow: none;
    background-color: transparent;
    line-height: inherit;
    padding: inherit;
}
.dark-mode-button:focus {
    border: none;
    outline: none;
    box-shadow: none;
    background-color: transparent;
    line-height: inherit;
    padding: inherit;
}
.dark-mode-button:active {
    border: none;
    outline: none;
    box-shadow: none;
    background-color: transparent;
    line-height: inherit;
    padding: inherit;
}