:root {
    --background-color: #141618;
    --secondary-background-color: #0d0e0f;
    --primary-foreground-color: #ffffff;
}

body {
    background-color: var(--background-color);
    color: var(--primary-foreground-color);
    font-family: Verdana, sans-serif, Arial;
    margin: 0;
    transition: background-color 0.5s;
}

.header {
    background-color: var(--secondary-background-color);
    padding: 18px;
    height: 60px;
	margin-bottom: 40px;
    overflow-y: hidden;
    transition: background-color 0.5s, box-shadow 1s;
}

.header:hover {
    box-shadow: 0px 2px 16px 10px rgb(from var(--primary-foreground-color) r g b / 25%);
    transition: background-color 0.5s, box-shadow 0.75s;
}

.header h3 {
    display: inline-block;
    margin-left: 24px;
    margin-right: 24px;
}

.header a {
    color: var(--primary-foreground-color);
    transition: 1s;
}

.header a:hover {
    color: rgb(from var(--primary-foreground-color) r g b / 70%);
    transition: 0.75s;
}

#mode {
    float: right;
    padding-top: 60px;
    transform: translateY(-50%);
    height: 28px;
    width: 28px;
    transition: 1s;
}

#mode:hover {
    cursor: pointer;
    filter: drop-shadow(0px 0px 10px var(--primary-foreground-color));
    transition: 0.75s;
}

.content {
	margin: 0;
	padding-left: 42px;
	width: 90%;
	height: 100%;
}

.content h2 {
    margin-top: 36px;
    margin-bottom: 8px;
}

.content h3 {
    margin-top: 0px;
}