/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 4 version
*/

@import url('https://fonts.googleapis.com/css2?family=Fira+Code&family=Fira+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Mona+Sans:ital,wght@0,200..900;1,200..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');
@font-face {
	font-family: 'Mona Sans Expanded';
	src: url(/static/fonts/Mona-Sans-Expanded.ttf);
	font-display: block;
}
@font-face {
    font-family: MonaSansExpanded;
    src: url(/static/fonts/MonaSansExpanded-Regular.woff2) format("woff2");
	font-display: block;
}
@font-face {
    font-family: MonaSansMedium;
    src: url(/static/fonts/MonaSans-Medium.woff2) format("woff2");
	font-display: block;
}

@font-face {
	font-family: "Mona Sans";
	src: url(/static/fonts/Mona-Sans.woff2) format("woff2 supports variations"),
	  url(/static/fonts/Mona-Sans.woff2) format("woff2-variations");
	font-display: swap;
	font-weight: 200 900;
	font-stretch: 75% 125%;
}
@font-face {
    font-family: "Font Awesome 5 Brands";
    font-style: normal;
    font-weight: 400;
    font-display: block;
	src: url(https://use.fontawesome.com/releases/v5.15.4/webfonts/fa-brands-400.woff2);
}
@font-face {
    font-family: "Font Awesome 5 Free";
    font-style: normal;
    font-weight: 900;
    font-display: block;
	src: url(https://use.fontawesome.com/releases/v5.15.4/webfonts/fa-solid-900.woff2);
}

:root {
	--button-alpha: 0.8;

	--click-transition-time: 0.7s;
	--hover-transition-time: 0.15s;
	--theme-transition-time: 1.5s;

	--rafnixg-darkbg: rgb(12, 10, 10);
	--rafnixg-accent: rgb(255, 255, 255);

	--vcard-darkbg: rgb(18, 18, 18);
	--vcard-accent: rgb(255, 219, 112);

	--cpro-darkbg: black;
	--cpro-accent: rgb(255, 205, 66);

	--elkariouny-darkbg: rgb(26, 33, 45);
	--elkariouny-accent: rgb(102, 127, 234);

	--williams-darkbg: black;
	--williams-accent: rgb(102, 255, 204);

	--enesehs-darkbg: black;
	--enesehs-accent: rgb(100, 100, 255);

	--jangid-darkbg: rgb(17, 17, 27);
    --jangid-color-dark-mode: #11111b;
	--jangid-color-light-purple: #cf59e6;
    --jangid-accent: rgb(107, 197, 248);
    --jangid-color-light-blue: #6bc5f8;
}

img,video {
	display: block;
	border: 1px solid gray;
}

#html {
	background-color: black;
}


body {
	overflow-x: hidden;
	overflow-y: scroll;

}
body.homescreen {
	overflow-y: scroll;
}

.hidden {
	z-index: -1 !important;
	height: 100vh;
	overflow-y: hidden;
}

.home-bg {
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 1;
	background-color: black;
	margin: 0;
	top: 0;
	left: 0;
	-webkit-clip-path: inset(0 0 0 0);
	        clip-path: inset(0 0 0 0);
	-webkit-transition: -webkit-clip-path var(--theme-transition-time) ease-in-out;
	transition: -webkit-clip-path var(--theme-transition-time) ease-in-out;
	-o-transition: clip-path var(--theme-transition-time) ease-in-out;
	transition: clip-path var(--theme-transition-time) ease-in-out;
	transition: clip-path var(--theme-transition-time) ease-in-out, -webkit-clip-path var(--theme-transition-time) ease-in-out;
}

#title {
	position: fixed;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	    -ms-transform: translate(-50%, -50%);
	        transform: translate(-50%, -50%);
	border: none;
	height: 2rem;
	-webkit-filter: blur(1.5px);
	        filter: blur(1.5px);
}

.shadow-host {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	-webkit-clip-path: inset(0 0 0 0);
	        clip-path: inset(0 0 0 0);
	width: 100%;
	z-index: 0;
	color-scheme: dark;
	padding-right: 15px;
}

.wiping-away {
	-webkit-clip-path: inset(0 0 0 100%);
	        clip-path: inset(0 0 0 100%);
	z-index: 1;
	-webkit-transition: -webkit-clip-path var(--theme-transition-time) ease-in-out;
	transition: -webkit-clip-path var(--theme-transition-time) ease-in-out;
	-o-transition: clip-path var(--theme-transition-time) ease-in-out;
	transition: clip-path var(--theme-transition-time) ease-in-out;
	transition: clip-path var(--theme-transition-time) ease-in-out, -webkit-clip-path var(--theme-transition-time) ease-in-out;
}
.shadow-host.prewipe {
	-webkit-clip-path: inset(0 100% 0 0);
	        clip-path: inset(0 100% 0 0);
}
.shadow-host.fixed {
	position: fixed;
	top: 0;
}
/* #wipe-border {
	--border-width: 0.1rem;

	position: fixed;
	top: 0;
	left: calc(var(--border-width) * -0.5);
	width: calc(100vw + var(--border-width));
	height: 100vh;
	backdrop-filter: blur(10px);
	background-color: rgb(0,0,0,0.5);
	z-index: 9999994;
	display: none;
}
#wipe-border.wiping {
	display: block;
	animation: border-wipe var(--theme-transition-time) ease-in-out forwards;
} */
@-webkit-keyframes border-wipe {
	0% {
		-webkit-clip-path: inset(0 calc(100% - var(--border-width)) 0 0);
		        clip-path: inset(0 calc(100% - var(--border-width)) 0 0);
	}
	100% {
		-webkit-clip-path: inset(0 0 0 calc(100% - var(--border-width)));
		        clip-path: inset(0 0 0 calc(100% - var(--border-width)));
	}
}
@keyframes border-wipe {
	0% {
		-webkit-clip-path: inset(0 calc(100% - var(--border-width)) 0 0);
		        clip-path: inset(0 calc(100% - var(--border-width)) 0 0);
	}
	100% {
		-webkit-clip-path: inset(0 0 0 calc(100% - var(--border-width)));
		        clip-path: inset(0 0 0 calc(100% - var(--border-width)));
	}
}

#rafnixg-host {
	background-color: var(--rafnixg-darkbg);
}
#vcard-host {
	background-color: var(--vcard-darkbg);
}
#cpro-host {
	background-color: var(--cpro-darkbg);
}
#elkariouny-host {
	background-color: var(--elkariouny-darkbg);
}
#williams-host {
	background-color: var(--williams-darkbg);
}
#enesehs-host {
	background-color: var(--enesehs-darkbg);
}
#jangid-host {
	background-color: var(--jangid-color-dark-mode);
}

#theme-sidebar-container {
	/* background-color: black; */
	position: fixed;
	left: 0;
	top: 50%;
	-webkit-transform: translateY(-50%);
	    -ms-transform: translateY(-50%);
	        transform: translateY(-50%);
	z-index: 9999995;
	max-width: 12rem;
	border-top-right-radius: 0.5rem;
	border-bottom-right-radius: 0.5rem;
	-webkit-box-shadow: rgba(255, 255, 255, 0.16) 0px 0px 6px, rgba(255, 255, 255, 0.23) 0px 0px 6px;
	        box-shadow: rgba(255, 255, 255, 0.16) 0px 0px 6px, rgba(255, 255, 255, 0.23) 0px 0px 6px;
}

#theme-sidebar {
	z-index: 9999996;

	border-top-right-radius: 0.5rem;
	border-bottom-right-radius: 0.5rem;

	display: -webkit-box;

	display: -ms-flexbox;

	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	    -ms-flex-direction: column;
	        flex-direction: column;

	overflow-y: clip;
	overflow-x: clip;
	width: 3rem;
	-webkit-transition: width 0.3s ease-in-out;
	-o-transition: width 0.3s ease-in-out;
	transition: width 0.3s ease-in-out;
}
#glow.visible {
	-webkit-animation: glow-pulse ease-in-out 3s infinite;
	        animation: glow-pulse ease-in-out 3s infinite;
	opacity: 100%;
}
#glow.visible.disappearing {
	opacity: 0%;
}
#glow {
	content: '';
	position: absolute;
	height: 0;
	width: 0;
	top: 50%;
	left: -200px;
	z-index: 9999994;
	-webkit-transition: opacity 2s ease-out;
	-o-transition: opacity 2s ease-out;
	transition: opacity 2s ease-out;
}
@-webkit-keyframes glow-pulse {
	0% {
		-webkit-box-shadow: 0 0 700px 300px rgba(255,255,255,0.4);
		        box-shadow: 0 0 700px 300px rgba(255,255,255,0.4);
	}
	50% {
		-webkit-box-shadow: 0 0 1000px 300px rgba(255,255,255,0.2);
		        box-shadow: 0 0 1000px 300px rgba(255,255,255,0.2);
	}
	100% {
		-webkit-box-shadow: 0 0 700px 300px rgba(255,255,255,0.4);
		        box-shadow: 0 0 700px 300px rgba(255,255,255,0.4);
	}
}
@keyframes glow-pulse {
	0% {
		-webkit-box-shadow: 0 0 700px 300px rgba(255,255,255,0.4);
		        box-shadow: 0 0 700px 300px rgba(255,255,255,0.4);
	}
	50% {
		-webkit-box-shadow: 0 0 1000px 300px rgba(255,255,255,0.2);
		        box-shadow: 0 0 1000px 300px rgba(255,255,255,0.2);
	}
	100% {
		-webkit-box-shadow: 0 0 700px 300px rgba(255,255,255,0.4);
		        box-shadow: 0 0 700px 300px rgba(255,255,255,0.4);
	}
}

#theme-sidebar:hover {
	width: 13rem;
}
#theme-sidebar.extended {
	overflow-y: visible;
	overflow-x: visible;
}

#theme-sidebar .theme-button:first-child {
	border-top-right-radius: 0.5rem;
}
#theme-sidebar .theme-button:last-child {
	border-bottom-right-radius: 0.5rem;
}
#theme-sidebar .theme-button {
	/* box-shadow: rgba(255, 255, 255, 0.16) 0px 0px 6px, rgba(255, 255, 255, 0.23) 0px 0px 6px; */
	
  	/* border: 1px solid rgba(255, 255, 255, 0.1); */
	border: none;
	-webkit-box-shadow: inset 0 0 2px rgba(255, 255, 255, 0.2),
		0 0 0 rgba(0,0,0,0),
		0 0 0 rgba(0,0,0,0);
	        box-shadow: inset 0 0 2px rgba(255, 255, 255, 0.2),
		0 0 0 rgba(0,0,0,0),
		0 0 0 rgba(0,0,0,0);
	position: relative;
	font-size: 1rem;
	height: 3rem;
	font-weight: bold;
	width: 12rem;
	/* padding: 1rem; */
	/* line-height: 1rem; */
	overflow: hidden;
	z-index: 9999997;
	-webkit-backdrop-filter: blur(4px);
	        backdrop-filter: blur(4px);
	-webkit-transition: width var(--hover-transition-time) ease-in-out,
		height var(--hover-transition-time) ease-in-out,
		border-top-right-radius var(--hover-transition-time) ease-in-out,
		border-bottom-right-radius var(--hover-transition-time) ease-in-out,
		background-color var(--click-transition-time),
		color var(--click-transition-time),
		-webkit-box-shadow calc(var(--hover-transition-time) * 3) ease,
		-webkit-transform var(--hover-transition-time) ease-in-out;
	transition: width var(--hover-transition-time) ease-in-out,
		height var(--hover-transition-time) ease-in-out,
		border-top-right-radius var(--hover-transition-time) ease-in-out,
		border-bottom-right-radius var(--hover-transition-time) ease-in-out,
		background-color var(--click-transition-time),
		color var(--click-transition-time),
		-webkit-box-shadow calc(var(--hover-transition-time) * 3) ease,
		-webkit-transform var(--hover-transition-time) ease-in-out;
	-o-transition: width var(--hover-transition-time) ease-in-out,
		height var(--hover-transition-time) ease-in-out,
		border-top-right-radius var(--hover-transition-time) ease-in-out,
		border-bottom-right-radius var(--hover-transition-time) ease-in-out,
		background-color var(--click-transition-time),
		color var(--click-transition-time),
		box-shadow calc(var(--hover-transition-time) * 3) ease,
		transform var(--hover-transition-time) ease-in-out;
	transition: width var(--hover-transition-time) ease-in-out,
		height var(--hover-transition-time) ease-in-out,
		border-top-right-radius var(--hover-transition-time) ease-in-out,
		border-bottom-right-radius var(--hover-transition-time) ease-in-out,
		background-color var(--click-transition-time),
		color var(--click-transition-time),
		box-shadow calc(var(--hover-transition-time) * 3) ease,
		transform var(--hover-transition-time) ease-in-out;
	transition: width var(--hover-transition-time) ease-in-out,
		height var(--hover-transition-time) ease-in-out,
		border-top-right-radius var(--hover-transition-time) ease-in-out,
		border-bottom-right-radius var(--hover-transition-time) ease-in-out,
		background-color var(--click-transition-time),
		color var(--click-transition-time),
		box-shadow calc(var(--hover-transition-time) * 3) ease,
		transform var(--hover-transition-time) ease-in-out,
		-webkit-box-shadow calc(var(--hover-transition-time) * 3) ease,
		-webkit-transform var(--hover-transition-time) ease-in-out;
}
#theme-sidebar.disabled .theme-button:hover {
	cursor: unset;
}
.theme-button:hover {
	cursor: pointer;
}
#theme-sidebar.extended .theme-button:hover {
	/* height: 3.5rem;
	width: 13rem; */
	-webkit-transform: scale(1.1);
	    -ms-transform: scale(1.1);
	        transform: scale(1.1);
	border-top-right-radius: 0.5rem;
	border-bottom-right-radius: 0.5rem;
	z-index: 9999999;
	/* border: 1px solid rgba(255, 255, 255, 0.1); */
	-webkit-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.5),
		rgba(255, 255, 255, 0.16) 0px 0px 3px,
		rgba(255, 255, 255, 0.23) 0px 0px 3px;
	        box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.5),
		rgba(255, 255, 255, 0.16) 0px 0px 3px,
		rgba(255, 255, 255, 0.23) 0px 0px 3px;
}
#theme-sidebar .theme-button.active {
	z-index: 9999998;
	-webkit-box-shadow: inset 0 0 2px rgba(255, 255, 255, 0.2),
		rgba(255, 255, 255, 0.16) 0px 0px 6px,
		rgba(255, 255, 255, 0.23) 0px 0px 6px;
	        box-shadow: inset 0 0 2px rgba(255, 255, 255, 0.2),
		rgba(255, 255, 255, 0.16) 0px 0px 6px,
		rgba(255, 255, 255, 0.23) 0px 0px 6px;
}
#theme-sidebar .theme-button.active:hover {
	cursor: unset;
}

/* #theme-sidebar .theme-button .color-state {
	position: relative;
} */
 #theme-sidebar .theme-button .color-state {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
 }

#theme-sidebar .theme-button .inactive {
	z-index: 9999998;
}
#theme-sidebar .theme-button .color-state.active {
	z-index: 9999999;
	-webkit-clip-path: inset(0 0 0 100vw);
	        clip-path: inset(0 0 0 100vw);
	-webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.5);
	        box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.5);
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
	-webkit-transition: border-top-right-radius var(--hover-transition-time) ease-in-out,
		border-bottom-right-radius var(--hover-transition-time) ease-in-out,
		-webkit-box-shadow var(--hover-transition-time) ease;
	transition: border-top-right-radius var(--hover-transition-time) ease-in-out,
		border-bottom-right-radius var(--hover-transition-time) ease-in-out,
		-webkit-box-shadow var(--hover-transition-time) ease;
	-o-transition: box-shadow var(--hover-transition-time) ease,
		border-top-right-radius var(--hover-transition-time) ease-in-out,
		border-bottom-right-radius var(--hover-transition-time) ease-in-out;
	transition: box-shadow var(--hover-transition-time) ease,
		border-top-right-radius var(--hover-transition-time) ease-in-out,
		border-bottom-right-radius var(--hover-transition-time) ease-in-out;
	transition: box-shadow var(--hover-transition-time) ease,
		border-top-right-radius var(--hover-transition-time) ease-in-out,
		border-bottom-right-radius var(--hover-transition-time) ease-in-out,
		-webkit-box-shadow var(--hover-transition-time) ease;
}
#theme-sidebar.extended .theme-button.active:hover .color-state.active {
	-webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 1);
	        box-shadow: inset 0 0 3px rgba(0, 0, 0, 1);
}
#theme-sidebar .theme-button.active .color-state.active {
	-webkit-clip-path: inset(0 calc(-100vw + 100%) 0 0);
	        clip-path: inset(0 calc(-100vw + 100%) 0 0);
}
#theme-sidebar.extended .theme-button.active:hover .color-state.active {
	border-top-right-radius: 0.5rem;
	border-bottom-right-radius: 0.5rem;
}
.theme-button.deactivating .color-state.active {
	-webkit-animation: button-wipe-out var(--theme-transition-time) ease-in-out forwards;
	        animation: button-wipe-out var(--theme-transition-time) ease-in-out forwards;
}
.theme-button.activating .color-state.active {
	-webkit-animation: button-wipe-in var(--theme-transition-time) ease-in-out forwards;
	        animation: button-wipe-in var(--theme-transition-time) ease-in-out forwards;
}
@-webkit-keyframes button-wipe-in {
	0% {
		-webkit-clip-path: inset(0 100% 0 0);
		        clip-path: inset(0 100% 0 0);
	}
	100% {
		-webkit-clip-path: inset(0 calc(100% - 100vw) 0 0);
		        clip-path: inset(0 calc(100% - 100vw) 0 0);
	}
}
@keyframes button-wipe-in {
	0% {
		-webkit-clip-path: inset(0 100% 0 0);
		        clip-path: inset(0 100% 0 0);
	}
	100% {
		-webkit-clip-path: inset(0 calc(100% - 100vw) 0 0);
		        clip-path: inset(0 calc(100% - 100vw) 0 0);
	}
}
@-webkit-keyframes button-wipe-out {
	0% {
		-webkit-clip-path: inset(0 0 0 0);
		        clip-path: inset(0 0 0 0);
	}
	100% {
		-webkit-clip-path: inset(0 0 0 100vw);
		        clip-path: inset(0 0 0 100vw);
	}
}
@keyframes button-wipe-out {
	0% {
		-webkit-clip-path: inset(0 0 0 0);
		        clip-path: inset(0 0 0 0);
	}
	100% {
		-webkit-clip-path: inset(0 0 0 100vw);
		        clip-path: inset(0 0 0 100vw);
	}
}


/* Theme buttons */
#theme-sidebar .rafnixg {
	color: var(--rafnixg-accent);
	background-color: rgb(12, 10, 10,var(--button-alpha));
	font-family: 'Mona Sans Expanded';
}
#theme-sidebar .rafnixg span.active {
	color: var(--rafnixg-darkbg);
	background-color: var(--rafnixg-accent);
}

#theme-sidebar .vcard {
	color: var(--vcard-accent);
	background-color: rgb(18, 18, 18,var(--button-alpha));
	font-family: 'Poppins';
}
#theme-sidebar .vcard span.active {
	color: var(--vcard-darkbg);
	background-color: var(--vcard-accent)
}

#theme-sidebar .williams {
	color: var(--williams-accent);
	background-color: rgb(0,0,0,var(--button-alpha));
	font-family: 'Fira Sans';
}
#theme-sidebar .williams span.active {
	color: var(--williams-darkbg);
	background-color: var(--williams-accent)
}

#theme-sidebar .cpro {
	color: var(--cpro-accent);
	background-color: rgb(0,0,0,var(--button-alpha));
	font-family: 'Raleway';
}
#theme-sidebar .cpro span.active {
	color: var(--cpro-darkbg);
	background-color: var(--cpro-accent)
}

#theme-sidebar .elkariouny {
	color: var(--elkariouny-accent);
	background-color: rgb(26, 33, 45,var(--button-alpha));
	font-family: 'Inter';
}
#theme-sidebar .elkariouny span.active {
	color: var(--elkariouny-darkbg);
	background-color: var(--elkariouny-accent)
}

#theme-sidebar .enesehs {
	color: var(--enesehs-accent);
	background-color: rgb(0,0,0,var(--button-alpha));
	font-family: 'MonaSansExpanded';
}
#theme-sidebar .enesehs span.active {
	color: var(--enesehs-darkbg);
	background-color: var(--enesehs-accent)
}

#theme-sidebar .theme-button.jangid {
	font-family: 'Arial';
	background-color: transparent;
}
#theme-sidebar.extended .theme-button.jangid:hover {
	-webkit-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0),
		rgba(255, 255, 255, 0.16) 0px 0px 3px,
		rgba(255, 255, 255, 0.23) 0px 0px 3px;
	        box-shadow: inset 0 0 3px rgba(255, 255, 255, 0),
		rgba(255, 255, 255, 0.16) 0px 0px 3px,
		rgba(255, 255, 255, 0.23) 0px 0px 3px;
}
.jangid-bg-2.inactive {
	background-color: rgb(17, 17, 27,var(--button-alpha));
	-webkit-box-shadow: inset 0 0 3px rgba(255,255,255,0);
	        box-shadow: inset 0 0 3px rgba(255,255,255,0);
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
	-webkit-transition: border-top-right-radius var(--hover-transition-time) ease-in-out,
		border-bottom-right-radius var(--hover-transition-time) ease-in-out,
		-webkit-box-shadow var(--hover-transition-time) ease-in-out;
	transition: border-top-right-radius var(--hover-transition-time) ease-in-out,
		border-bottom-right-radius var(--hover-transition-time) ease-in-out,
		-webkit-box-shadow var(--hover-transition-time) ease-in-out;
	-o-transition: box-shadow var(--hover-transition-time) ease-in-out,
		border-top-right-radius var(--hover-transition-time) ease-in-out,
		border-bottom-right-radius var(--hover-transition-time) ease-in-out;
	transition: box-shadow var(--hover-transition-time) ease-in-out,
		border-top-right-radius var(--hover-transition-time) ease-in-out,
		border-bottom-right-radius var(--hover-transition-time) ease-in-out;
	transition: box-shadow var(--hover-transition-time) ease-in-out,
		border-top-right-radius var(--hover-transition-time) ease-in-out,
		border-bottom-right-radius var(--hover-transition-time) ease-in-out,
		-webkit-box-shadow var(--hover-transition-time) ease-in-out;
}
#theme-sidebar .jangid-bg-2.inactive {
	-webkit-box-shadow: inset 0 0 2px rgba(255, 255, 255, 0.2);
	        box-shadow: inset 0 0 2px rgba(255, 255, 255, 0.2);
}
#theme-sidebar.extended .jangid:hover .jangid-bg-2.inactive {
	-webkit-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.5);
	        box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.5);
	border-top-right-radius: 0.5rem;
	border-bottom-right-radius: 0.5rem;
}
.jangid-bg-2.inactive .jangid-text {
    background: -o-linear-gradient(135deg, var(--jangid-color-light-blue), var(--jangid-color-light-purple), var(--jangid-color-light-blue), var(--jangid-color-light-purple));
    background: linear-gradient(-45deg, var(--jangid-color-light-blue), var(--jangid-color-light-purple), var(--jangid-color-light-blue), var(--jangid-color-light-purple));
    -webkit-background-clip: text;
            background-clip: text;
	color: transparent;
    background-size: 400% 400%;
    -webkit-animation: 3s infinite jangid-gradient;
            animation: 3s infinite jangid-gradient;
}
.jangid-bg-2.active {
	background: -o-linear-gradient(135deg, var(--jangid-color-light-blue), var(--jangid-color-light-purple), var(--jangid-color-light-blue), var(--jangid-color-light-purple));
	background: linear-gradient(-45deg, var(--jangid-color-light-blue), var(--jangid-color-light-purple), var(--jangid-color-light-blue), var(--jangid-color-light-purple));
	background-size: 400% 400%;
	-webkit-clip-path: inset(0 100% 0 0);
	        clip-path: inset(0 100% 0 0);
	-webkit-animation: 3s infinite jangid-gradient;
	        animation: 3s infinite jangid-gradient;
}
.theme-button.activating .jangid-bg-2.active {
	-webkit-animation: 3s infinite jangid-gradient,
		button-wipe-in var(--theme-transition-time) ease-in-out forwards !important;
	        animation: 3s infinite jangid-gradient,
		button-wipe-in var(--theme-transition-time) ease-in-out forwards !important;
}
.theme-button.deactivating .jangid-bg-2.active {
	-webkit-animation: 3s infinite jangid-gradient,
		button-wipe-out var(--theme-transition-time) ease-in-out forwards !important;
	        animation: 3s infinite jangid-gradient,
		button-wipe-out var(--theme-transition-time) ease-in-out forwards !important;
}
.jangid-bg-2.active .jangid-text {
	color: var(--jangid-color-dark-mode);
}
@-webkit-keyframes jangid-gradient {
    0%,
    100% {
        background-position: 0 50%
    }

    50% {
        background-position: 100% 50%
    }
}
@keyframes jangid-gradient {
    0%,
    100% {
        background-position: 0 50%
    }

    50% {
        background-position: 100% 50%
    }
}