.lightMode #background {
	background: #ddd;
	background-image: url('../images/diamondPattern.jpg');
	background-size: 112px;
	filter: none;
}

.lightMode header, .lightMode footer {
	background: #2d4455;
}

.lightMode footer {
	border-top: 3.2px solid #2d4455;
}

.lightMode article {
	color: black;
}

.lightMode article > div:last-of-type {
	background: rgba(255, 255, 255, 0.7);
}

.lightMode article > div:first-of-type > img {
	filter: invert(100%) opacity(70%);
}

.lightMode .articleTitlePadding {
	background: rgba(255, 255, 255, 0.7);
}

.lightMode .iframeWithBackground {
	background: #ddd;
}

.lightMode .articleTitlePadding h2 {
	color: #1eaed3;
}

.lightMode .articleTitlePadding h3 {
	color: black;
}

.lightMode #vignette {
	display: none;
}

.lightMode .logos img {
	filter: drop-shadow(0 0 0 rgba(225, 81, 44, 0))
			drop-shadow(0 0 0 rgba(225, 81, 44, 0))
			drop-shadow(0 0 0 rgba(225, 81, 44, 0))
			drop-shadow(0 0 0 rgba(225, 81, 44, 0))
			drop-shadow(0 0 0 rgba(225, 81, 44, 0))
			drop-shadow(0 0 0 rgba(225, 81, 44, 0))
			drop-shadow(0 0 0 rgba(225, 81, 44, 0));
}

.lightMode .logos img:hover {
	filter: drop-shadow(1px 0px 0 #aaa)
			drop-shadow(1px 1px 0 #aaa)
			drop-shadow(0px 1px 0 #bbb)
			drop-shadow(-1px 1px 0 #bbb)
			drop-shadow(-1px 0px 0 #ccc)
			drop-shadow(-1px -1px 0 #ccc)
			drop-shadow(0px -1px 0 #ddd)
			drop-shadow(1px -1px 0 #ddd);
}

.lightMode .logos > div > div {
	background: rgba(255, 255, 255, 1);
	outline: 4px double black;
}

.lightMode .codeSnippet {
	background: rgb(220, 220, 220);
}

.lightMode a, .lightMode a > * {
	color: #1eaed3;
}

.lightMode a:hover span {
	color: #dba463 !important;
}

.lightMode a span::after {
	background: #1eaed3;
}

.lightMode a:hover span::after {
	background: #dba463 !important;
}

.lightMode header a:hover span {
	color: #fad6b8 !important;
}

.lightMode header a:hover span::after {
	background: #fad6b8 !important;
}

.lightMode .arrow svg {
	fill: #4d6792;
}

.lightMode .arrow use:last-of-type {
	stroke: #4d6792;
}

.lightMode .fullscreenable {
	outline: 3px solid rgba(225, 81, 44, 0);
}

.lightMode .fullscreenable:hover {
	outline: 3px solid #bbb;
}

.lightMode #mainBox > svg {
	filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.5));
}

.lightMode #mainBox rect:first-of-type {
	fill: #2d4455;
}

.lightMode #mainBox rect:last-of-type {
	fill: #4d6792;
}

.lightMode p[data-textId="categories"] {
	filter: drop-shadow(2px 2px 0px #ccc);
	color: #2d4455;
}

.lightMode #categories > a > div {
	filter: drop-shadow(3px 3px 0px #ccc) opacity(60%);
}

.lightMode #categories > a > div.selected,
.lightMode #categories > a > div:hover {
	filter: drop-shadow(3px 3px 0px #ccc) opacity(100%);
}

.lightMode #categoryCode > div {
	background-image: url("../images/categoryCode.svg"),
					  linear-gradient(90deg, #4d6792 0%, #4d6792 var(--percentage), #2d4455 var(--percentage), #2d4455 100%);
}

.lightMode #categoryArt > div {
	background-image: url("../images/categoryArt.svg"),
					  linear-gradient(90deg, #4d6792 0%, #4d6792 var(--percentage), #2d4455 var(--percentage), #2d4455 100%);
}

.lightMode #categoryCommunication > div {
	background-image: url("../images/categoryCommunication.svg"),
					  linear-gradient(90deg, #4d6792 0%, #4d6792 var(--percentage), #2d4455 var(--percentage), #2d4455 100%);
}

.lightMode .modelViewerWrapper {
	color: white;
}

.lightMode .modelViewerWrapper > div {
	background: #2d4455;
}

.lightMode .modelViewerWrapper > div:hover {
	background: #3e6e91;
}

.lightMode .modelViewerWrapper > div:active {
	background: #5bc5e1;
}

.lightMode .accentColor {
	color: #2d4455;
}

.lightMode #timeline > div:nth-of-type(2n-1) {
	filter: drop-shadow(3px 3px 0px #2d4455);
}

.lightMode #timeline > svg {
	filter: drop-shadow(1px 1px 0px #2d4455)
			drop-shadow(1px 1px 0px #2d4455)
			drop-shadow(1px 1px 0px #2d4455);
}

.lightMode #timeline > div:nth-of-type(2n-1) {
	color: #2d4455;
	filter: drop-shadow(3px 3px 0px #ccc);
}

.lightMode #pageTitle {
	filter: drop-shadow(3px 3px 0px #ccc);
	color: #2d4455;
}

.lightMode .iframeWrapper {
	background: rgba(0, 0, 0, 0.1);
}

.lightMode #portrait, .lightMode #mainBox > div > img:not(#phoneNumber) {
	filter: drop-shadow(0 4px 0 #2d4455) drop-shadow(4px 0 0 #2d4455) drop-shadow(0 -4px 0 #2d4455) drop-shadow(-4px 0 0 #2d4455);
}