body.dark {
	--bgGradientColor1: rgb(7, 40, 74);
	--bgGradientColor2: rgb(81, 32, 40);
	--bgGradientColor3: rgb(69, 49, 26);
	--bgGradientColor4: rgb(39, 2, 66);
	--bgGradientColor5: rgb(15, 66, 44);
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-color: rgb(0, 0, 0);
	color: rgba(255, 255, 255, 0.877);
}

body.dark h1.gradient-text {
	color: rgb(255, 255, 255);
	opacity: 0.2;
}

body.dark h1.gradient-text:hover {
	opacity: 0.6;
}

body.dark hr {
	background-color: rgba(177, 177, 177, 0.18);
}

body.dark div.nav-bar {
	background-color: rgba(37, 37, 37, 0.534);
	color: rgba(255, 255, 255, 0.712);
	-webkit-backdrop-filter: blur(40px);
	backdrop-filter: blur(40px);
	box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24),
		0 17px 50px 0 rgba(0, 0, 0, 0.19);
}

body.dark div.overflowMenu {
	background-color: #00000049;
}

body.dark a.overflowMenuButton {
	color: #ffffff;
	background-color: #72727254;
}

@media (hover: hover) {
	body.dark a.overflowMenuButton:hover {
		/* x-offset y-offset z-index  length */
		box-shadow: 0px 0px 0px 4px #ffffff4e;
	}

	body.dark a.overflowMenuButton:active {
		background-color: #a0a0a052;
		opacity: 0.4;
		box-shadow: 0px 0px 0px 2px #ffffff4e;
	}
}

@media (hover: none) {
	body.dark a.overflowMenuButton:active {
		opacity: 0.5;
		box-shadow: 0px 0px 0px 4px #9b9b9b4b;
	}
}

body.dark div.alert {
	background-color: #00000034;
	-webkit-backdrop-filter: blur(7px) saturate(150%) brightness(0.7);
	backdrop-filter: blur(7px) saturate(150%) brightness(0.7);
	box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24),
		0 17px 50px 0 rgba(0, 0, 0, 0.19);
}

body.dark a.link-button {
	background-color: #70707031;
	color: rgb(255, 255, 255);
	border: solid 2px #a7a6a61e;
}

@media (hover: hover) {
	body.dark a.link-button:hover {
		background-color: #a1a1a100;
		border: solid 2px #c9c9c967;
		box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24),
			0 17px 50px 0 rgba(0, 0, 0, 0.19);
	}

	body.dark a.link-button:active {
		border: solid 2px #8d8d8d3d;
		opacity: 0.5;
		box-shadow: 0 2px 2px 2px rgba(0, 0, 0, 0.18),
			0 3px 3px 3px rgba(0, 0, 0, 0.15);
	}
}

@media (hover: none) {
	body.dark a.link-button:active {
		border: solid 2px #8d8d8d3d;
		opacity: 0.5;
		box-shadow: 0 2px 2px 2px rgba(0, 0, 0, 0.18),
			0 3px 3px 3px rgba(0, 0, 0, 0.15);
	}
}

body.dark button {
	background-color: #70707031;
	color: rgb(255, 255, 255);
	border: solid 2px #a7a6a61e;
}

@media (hover: hover) {
	body.dark button:hover {
		background-color: #a1a1a100;
		border: solid 2px #c9c9c967;
		box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24),
			0 17px 50px 0 rgba(0, 0, 0, 0.19);
	}

	body.dark button:active {
		border: solid 2px #8d8d8d3d;
		opacity: 0.5;
		box-shadow: 0 2px 2px 2px rgba(0, 0, 0, 0.18),
			0 3px 3px 3px rgba(0, 0, 0, 0.15);
	}
}

@media (hover: none) {
	body.dark button:active {
		border: solid 2px #8d8d8d3d;
		opacity: 0.5;
		box-shadow: 0 2px 2px 2px rgba(0, 0, 0, 0.18),
			0 3px 3px 3px rgba(0, 0, 0, 0.15);
	}
}

body.dark div.tooltip span.tooltiptext {
	background-color: #00000034;
	color: #ffffff;
	-webkit-backdrop-filter: blur(7px) saturate(200%) brightness(0.75);
	backdrop-filter: blur(7px) saturate(200%) brightness(0.75);
	box-shadow: 0 10px 14px 0 rgba(0, 0, 0, 0.137),
		0 15px 40px 0 rgba(0, 0, 0, 0.116);
}

body.dark div.tab {
	background-color: #00000033;
	color: white;
	box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24),
		0 17px 50px 0 rgba(0, 0, 0, 0.19);
}

body.dark div.tab:active {
	opacity: 0.5;
	box-shadow: 0px 0px 0px 3px rgba(74, 74, 74, 0.18),
		0px 0px 0px 3 rgba(79, 79, 79, 0.15);
}

@media (hover: none) {
	body.dark div.tab:active {
		-webkit-filter: saturate(150%);
		filter: saturate(150%);
		box-shadow: 0 2px 0px 2px rgba(0, 0, 0, 0.18),
			0 0px 0px 3px rgba(0, 0, 0, 0.15);
	}
}

body.dark div.tabTextContainer {
	background-color: #1a1a1adb;
	-webkit-backdrop-filter: blur(5px) brightness(0.75);
	backdrop-filter: blur(5px) brightness(0.75);
}

@media (hover: hover) {
	body.dark div.tab:hover {
		-webkit-backdrop-filter: saturate(100%);
		backdrop-filter: saturate(100%);
		box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24),
			0 17px 50px 0 rgba(0, 0, 0, 0.19);
	}

	body.dark div.tab:hover div.tabTextContainer {
		background-color: #00000000;
	}

	body.dark div.tab:hover img {
		opacity: 0.3;
		-webkit-filter: blur(10px);
		filter: blur(10px);
	}
}

body.dark div.overlay {
	background: rgba(40, 40, 40, 0.795);
	-webkit-backdrop-filter: brightness(0.25);
	backdrop-filter: brightness(0.25);
}

body.dark div.modal {
	background: rgba(40, 40, 40, 0.422);
	box-shadow: 0 10px 40px 10px rgba(101, 101, 101, 0.4),
		0 10px 70px 10px rgb(0, 0, 0);
	-webkit-backdrop-filter: brightness(0.5) blur(10px);
	backdrop-filter: brightness(0.5) blur(10px);
}

body.dark div.modalHeader {
	background-color: rgba(52, 52, 52, 0.653);
}

body.dark div.CloseIcon {
	background-color: #ff000059;
	opacity: 0.8;
}

@media (hover: hover) {
	body.dark div.CloseIcon:hover {
		background-color: rgb(168, 0, 0);
		box-shadow: 0 10px 14px 0 rgba(255, 0, 0, 0.137),
			0 15px 40px 0 rgba(0, 0, 0, 0.116);
	}
}

body.dark div.CloseIcon:active {
	box-shadow: 0 2px 2px 2px rgba(0, 0, 0, 0.18),
		0 3px 3px 3px rgba(0, 0, 0, 0.15);
	background-color: rgb(92, 23, 23);
	opacity: 0.8;
}

body.dark #copyId {
	background-color: #ffffff23;
}

body.dark #copyId:hover {
	box-shadow: 0px 0px 0px 2px #ffffff38;
}

body.dark #copyId:active {
	box-shadow: 0px 0px 0px 4px #9c9c9c72;
}