@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Tourney&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Major+Mono+Display&family=Tinos:wght@700&display=swap');

body
{
    background-color: #000;
    color: #fff;
    margin: 0;
	font-family: 'Source Code Pro', monospace;
}

body::before
{
	content: '';
	position: fixed;
	inset: 0px 0px 0px 0px;
	z-index: -1;
	border: 75px solid #00000038;
	filter: blur(8px);
}

body > div.easterOverlay
{
	background-color: #000;
	position: fixed;
	inset: 0;
	z-index: 1;
	display: flex;
	justify-content: center;
	align-items: center;
}

div.mainContent
{
    display: flex;
    flex-direction: column;
    width: 800px;
    margin: 100px auto 0 auto;
    padding: 10px 10px 10px 14px;
	position: relative;
}

div.mainContent > img
{
    max-width: 250px;
}

div.taskBar
{
	z-index: 1;
	background-color: #0000005e;
	height: 30px;
	position: fixed;
	inset: auto 0 0 0;
	padding: 2px 4px;
	font-size: 13px;
	border-top: 1px solid #031320;
}

div.taskBar > .taskItem
{
	transition: box-shadow 0.35s;
	display: inline-block;
	height: calc(100% - 4px);
	padding: 0px 14px;
	border: 2px solid #1a1a1a;
	background-color: #131313;
	border-radius: 5px;
	box-shadow: inset 0px 0px 8px #000;
	user-select: none;
	color: #fff;
}

div.taskBar > .taskItem:hover
{
	box-shadow: inset 0px 0px 8px #ff00fb;
}

div.taskBar > a.taskItem
{
	text-decoration: none;
}

div.taskBar > .taskItem > span
{
	line-height: 24px;
	letter-spacing: 3px;
	font-size: 12px;
}

div.taskBar > .taskCredits
{
	float: right;
	line-height: 26px;
	margin-right: 8px;
	color: #bfbfbf;
}

div.taskBar > .taskCredits a
{
	color: #b3cdff;
}

div.taskBar > .taskCredits a:hover
{
	color: #fff;
}

div.logoTop
{
    display: table;
    position: absolute;
    left: 20px;
    top: 24px;
    user-select: none;
    background-color: #0f111ac2;
    padding: 6px 8px 5px;
    border-radius: 10px;
}

div.logoTop > div
{
    display: table-cell;
}

div.logoTop > div:nth-child(1) > img
{
	border-radius: 3px;
    max-height: 35px;
}

@keyframes logoFlicker {
	0% {
		text-shadow: 0 0 10px #00ff6470;
	}
	10% {
		text-shadow: 0 0 10px #00ff6470;
	}
	20% {
		text-shadow: 0 0 10px #00ff6470;
	}
	27.5% {
		text-shadow: 0 0 10px #00ff6470;
	}
	28% {
		text-shadow: 0 0 6px #000;
	}
	28.5% {
		text-shadow: 0 0 10px #00ff6470;
	}
	50% {
		text-shadow: 0 0 10px #00ff6470;
	}
	63% {
		text-shadow: 0 0 10px #00ff6470;
	}
	63.5% {
		text-shadow: 0 0 6px #000;
	}
	64.5% {
		text-shadow: 0 0 10px #00ff6470;
	}
	74% {
		text-shadow: 0 0 10px #00ff6470;
	}
	75% {
		text-shadow: 0 0 6px #000;
	}
	76% {
		text-shadow: 0 0 10px #00ff6470;
	}
	77% {
		text-shadow: 0 0 6px #000;
	}
	78% {
		text-shadow: 0 0 10px #00ff6470;
	}
	89% {
		text-shadow: 0 0 10px #00ff6470;
	}
	90% {
		text-shadow: 0 0 6px #000;
	}
	91% {
		text-shadow: 0 0 10px #00ff6470;
	}
	100% {
		text-shadow: 0 0 10px #00ff6470;
	}
}

div.logoTop > div:nth-child(2)
{
    font-family: 'Tourney', cursive;
	letter-spacing: 6px;
    color: #05ffff;
    font-size: 36px;
    line-height: 36px;
    vertical-align: top;
    padding-left: 12px;
	animation: logoFlicker 10s linear infinite;
}

@keyframes hueRotation {
	0% {
		filter: hue-rotate(0deg);
	}
	100% {
		filter: hue-rotate(360deg);
	}
}

@keyframes landscapeGlitch {
	10% {
		opacity: 0;
	}
	11% {
		opacity: 1;
		mix-blend-mode: difference;
	}
	12% {
		opacity: 0;
	}
	49% {
		opacity: 0;
	}
	50% {
		opacity: 1;
		mix-blend-mode: hard-light;
	}
	51% {
		opacity: 0;
	}
	58% {
		opacity: 0;
	}
	60% {
		opacity: 1;
		mix-blend-mode: color;
	}
	61% {
		opacity: 0;
	}
	66% {
		opacity: 0;
	}
	70% {
		opacity: 1;
		mix-blend-mode: color-dodge;
	}
	74% {
		opacity: 0;
	}
}

.fillerBlock
{
	margin-top: 16px;
	position: relative;
	display: block;
	width: 100%;
}

.fillerBlock > div.landscapeWrapper,
.fillerBlock > div.numberWrapper
{
	display: inline-block;
	border-radius: 4px;
	background-color: #ffffff0d;
	user-select: none;
}

.fillerBlock > div.numberWrapper
{
	text-align: center;
	position: absolute;
	inset: 0 0 0 calc(80% + 10px);
}

.fillerBlock > div.numberWrapper > div.numberRow:first-child
{
	margin-top: 12px;
}

.fillerBlock > div.numberWrapper > div.numberRow
{
	height: 30%;
}

.fillerBlock > div.numberWrapper > div.numberRow > span
{
	padding: 0 10px;
	transition: color 2.5s;
	background-color: #00000040;
	border-radius: 6px;
	padding-bottom: 2px;
	border: 2px solid #ffffff0d;
}

.fillerBlock > div.numberWrapper > div.numberRow > span:nth-child(2)
{
	margin: 0 5px;
}

.fillerBlock > div.landscapeWrapper
{
	width: 80%;
}

.fillerBlock > div.landscapeWrapper > img.landscape
{
	max-width: calc(100% - 20px);
	padding: 7px 10px 7px 10px;
	border-radius: 12px;
	opacity: 1;
	animation: hueRotation 20s linear infinite;
	position: relative;
}

.fillerBlock > .borderWrapper
{
	position: absolute;
	inset: 0 -10px 0 auto;
	width: 1px;
	background-color: #ff00ef;
}

.fillerBlock > .borderWrapper > .borderGlow
{
	position: absolute;
	inset: 0 0 0 auto;
	width: 2px;
	background-color: #ff0024;
	filter: blur(4px);
}

.fillerBlock > div.landscapeWrapper::before
{
	content: '';
	position: absolute;
	background-image: url('./vwLandscape.jpg?v=1');
	opacity: 0;
	inset: 7px 10px;
	z-index: 1;
	animation: landscapeGlitch 10s linear infinite;
	width: calc(80% - 20px);
}

.fillerBlock > div.landscapeWrapper::after
{
	content: '';
	position: absolute;
	z-index: 1;
	background-image: url('./glitchOverlay.gif');
	opacity: 0.2;
	inset: 7px 10px;
	width: calc(80% - 20px);
}

.presenceBlock
{
	margin-top: 16px;
	position: relative;
	display: table;
	width: 100%;
}

.presenceBlock > div.presenceItem 
{
	display: table-cell;
	width: 50%;
	position: relative;
}

.presenceBlock > div.presenceItem > div
{
	position: relative;

	background-color: #ffffff0f;
	border-radius: 4px;

	height: auto;
	width: calc(100% - 10px);
	padding: 4px 10px 0px 4px;

	font-family: 'Roboto', sans-serif;
}

.presenceBlock > div.presenceItem > div > img.iconIndicator
{
	position: absolute;
	right: 6px;
	top: 6px;
	width: 16px;
}

.presenceBlock > div.presenceItem > div > img.iconAvatar
{
	max-width: 64px;
	border-radius: 4px;
}

.presenceBlock > div.presenceItem > div > div.textContainer
{
	display: inline-block;
	inset: auto 4px auto 78px;
	position: absolute;
	font-size: 13px;
}

.presenceBlock > div.presenceItem > div > div.textContainer > div:nth-child(1)
{
	font-size: 15px;
	font-weight: bold;
	letter-spacing: 1px;
	margin: 3px 0 4px 0;
}

.presenceBlock > div.presenceItem > div > div.textContainer > div:nth-child(1) > a
{
	color: #b4ca9d;
	text-decoration: none;
}

.presenceBlock > div.presenceItem > div > div.textContainer > div:nth-child(1) > a:hover
{
	text-decoration: underline;
}

.presenceBlock > div.presenceItem > div > div.textContainer > div:nth-child(2)
{
	margin: 2px 0px 4px 0px;
	font-size: 13px;
	color: #ffd674;
	font-weight: bold;
	letter-spacing: 1px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.presenceBlock > div.presenceItem > div > div.textContainer > div.idling:nth-child(3)
{
	font-style: italic;
	color: #5b5b5b;
	font-weight: bold;
	letter-spacing: 1px;
}

.presenceBlock > div.presenceItem > div > div.textContainer > div:nth-child(3)
{
	font-size: 13px;
	color: #dbdbdb;
	margin-top: 3px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.presenceBlock > div.presenceItem > div > div.textContainer > div:nth-child(1) > .seraid
{
	font-size: 12px;
	margin-top: 5px;
	color: #007bff;

}

.presenceBlock > div.presenceItem > div > div.textContainer > div:nth-child(1) > .seraid .serapeum
{
	color: #ff3366;
	display: inline-block;

}

.presenceBlock > div.presenceItem:nth-child(1)
{
	padding: 10px 10px 0 0;
	border-top: 1px dashed #f93eff;
}

.presenceBlock > div.presenceItem:nth-child(1)::before
{
	content: '';
	position: absolute;
	inset: -1px 0 auto 0;
	height: 2px;
	filter: blur(3px);
	border-top: 2px solid #f93eff7d;
}

.presenceBlock > div.presenceItem:nth-child(2)
{
	padding: 10px 0 10px 10px;
	border-bottom: 1px dashed #00dbff
}

.presenceBlock > div.presenceItem:nth-child(2)::before
{
	content: '';
	position: absolute;
	inset: auto 0 -1px 0;
	height: 2px;
	background-color: #00c3ff7d;
	filter: blur(3px);
}

.topBlock {
	position: relative;
	overflow: hidden;
	display: table;
}

.topBlock > .avatarWrapper
{
	display: table-cell;
	width: 260px;
}

.topBlock > .avatarWrapper::before
{
	content: '';
	width: 1px;
	margin-left: -14px;
	position: absolute;
	border: 0;
	min-width: 1px;
	background-color: red;
	inset: 0 auto 0 0;
}

.topBlock > .avatarWrapper::after
{
	content: '';
	width: 1px;
	margin-left: -14px;
	position: absolute;
	border: 0;
	min-width: 3px;
	background-color: #ff1800;
	inset: 0 auto 0 0;
	filter: blur(6px);
}

.topBlock > .rightWrapper
{
	height: 100%;
	display: table-cell;
	vertical-align: top;
	position: relative;
}

.topBlock > .rightWrapper .hieroglyphs
{
	border-radius: 4px;
	padding: 6px;
	backdrop-filter: blur(2px);
	border-top: 2px solid #111;
	border-bottom: 2px solid #111;
	position: absolute;
	height: 32px;
	inset: auto 0 0 auto;
	background-color: #ffffff0a;
	text-align: center;
	line-height: 32px;
	font-size: 22px;
	letter-spacing: 16px;
	width: calc(50% - 12px);
	text-shadow: 1px 1px 0px #00dbff;
}

.topBlock > .rightWrapper .hieroglyphs > div
{
	margin-left: 12px;
}

.topBlock > .rightWrapper > .left,
.topBlock > .rightWrapper > .right
{
	position: absolute;
	padding: 6px;
	text-align: center;
	border-radius: 4px;

	backdrop-filter: blur(2px);

	border-top: 2px solid #111;
	border-bottom: 2px solid #111;
}

.topBlock > .rightWrapper > .left div.linkNote,
.topBlock > .rightWrapper > .right div.linkNote
{
	background-color: #0000002e;
	border-radius: 4px;
	padding: 4px 0px 4px 8px;
	font-size: 13px;
	text-align: center;
	margin-bottom: 10px;
	text-transform: uppercase;
	letter-spacing: 4px;
}

.topBlock > .rightWrapper > .left div.linkNote:not(:first-of-type),
.topBlock > .rightWrapper > .right div.linkNote:not(:first-of-type)
{
	margin-top: 18px;
}

.topBlock > .rightWrapper > .right
{
	inset: 0 0 0 auto;
	width: calc(50% - 12px);
	background-color: #ffffff0a;
	height: 180px;
}

.topBlock > .rightWrapper > .left
{
	inset: 0 auto 0 0;
	width: calc(50% - 22px);
	background-color: #ffffff0a;
}

.topBlock > .rightWrapper > .left .linkWrapper:first-of-type
{
	margin-top: 6px;
	padding-top: 20px;
	border-top: 1px solid #ff1cd1;
	position: relative;
}

.topBlock > .rightWrapper > .left .linkWrapper:first-of-type::before
{
	content: '';
	position: absolute;
	inset: -2px 0 auto 0;
	height: 2px;
	background-color: #ff3afc;
	filter: blur(5px);
}

.topBlock > .rightWrapper .linkWrapper
{
	padding-left: 2px;
	margin-bottom: 14px;
	text-align: left;
	font-size: 14px;
	text-shadow: 1px 2px 0px #bd00a8;
	z-index: 1;
	position: relative;
}

.topBlock > .rightWrapper .linkWrapper > a
{
	color: #fff;
	text-decoration: none;
	letter-spacing: 1px;
}

.topBlock > .rightWrapper .linkWrapper > a:hover
{
	text-decoration: underline;
}

.topBlock > .rightWrapper  > .left svg
{
	color: #fff;
	width: 165px;
	padding: 6px 0;
	-webkit-filter: drop-shadow(2px 2px 1px rgb(255, 0, 251));
	filter: drop-shadow(2px 2px 1px rgb(255, 0, 251));
}

.topBlock > .rightWrapper  > .right > div.bottomSvg
{
	position: absolute;
	inset: auto 6px 8px 6px;
	padding-top: 10px;
	margin-top: 10px;
	border-top: 1px solid #ff1cd1;
}

.topBlock > .rightWrapper  > .right > div.bottomSvg::before
{
	content: '';
	position: absolute;
	inset: 0 0 auto 0;
	height: 2px;
	background-color: #ff3afc;
	filter: blur(5px);
}

.topBlock > .rightWrapper  > .right > div.bottomSvg > svg
{
	width: 150px;
	color: #fff;
	-webkit-filter: drop-shadow(2px 2px 1px rgb(255, 0, 251));
	filter: drop-shadow(2px 2px 1px rgb(255, 0, 251));
}

.topBlock > .rightWrapper > .right .linkWrapper
{
	margin-bottom: 4px;
}

.topBlock > .rightWrapper > .right .linkWrapper.linkTable
{
	display: table;
	table-layout: fixed;
	width: 100%;
}

.topBlock > .rightWrapper > .right .linkWrapper.linkTable > a
{
	display: table-cell;
	text-align: center;
}

.topBlock > .rightWrapper > .right .linkWrapper.linkTable > a:not(:first-child)
{
	border-left: 1px solid #ffffff0d;
}

/** AVATAR GLITCH */

.topBlock > .avatarWrapper img {
	position: relative;
	z-index: 1;
	display: block;
	border-radius: 3px;
}
.glitchLayers {
	position: absolute;
	z-index: 2;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
    height: 250px;
    width: 250px;
}
.glitchLayer {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	background-image: url('./variant_968_avatar.png?v=1');
	background-repeat: no-repeat;
	background-position: 0 0;
}
.glitchLayer.demonic
{
	background-image: url('./oniCoom.jpg?v=1')!important;
}
.glitchLayer:nth-child(1) {
	transform: translateX(-5%);
	animation: glitchAnim1 2s infinite linear alternate;
}
.glitchLayer:nth-child(2) {
	transform: translateX(3%) translateY(3%);
	animation: glitchAnim2 2.3s -.8s infinite linear alternate;
}
.glitchLayer:nth-child(3) {
	transform: translateX(5%);
	animation: glitchAnimFlash 1s infinite linear;
}

@keyframes glitchAnim1 {
	0% {
		clip-path: polygon(0 0%, 100% 0%, 100% 5%, 0 5%);
	}
	10% {
		clip-path: polygon(0 15%, 100% 15%, 100% 15%, 0 15%);
	}
	20% {
		clip-path: polygon(0 10%, 100% 10%, 100% 20%, 0 20%);
	}
	30% {
		clip-path: polygon(0 1%, 100% 1%, 100% 2%, 0 2%);
	}
	40% {
		clip-path: polygon(0 35%, 100% 35%, 100% 35%, 0 35%);
	}
	50% {
		clip-path: polygon(0 45%, 100% 45%, 100% 46%, 0 46%);
	}
	60% {
		clip-path: polygon(0 50%, 100% 50%, 100% 70%, 0 70%);
	}
	70% {
		clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
	}
	80% {
		clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
	}
	90% {
		clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
	}
	100% {
		clip-path: polygon(0 60%, 100% 60%, 100% 70%, 0 70%);
	}
}
@keyframes glitchAnim2 {
	0% {
		clip-path: polygon(0 15%, 100% 15%, 100% 30%, 0 30%);
	}
	15% {
		clip-path: polygon(0 3%, 100% 3%, 100% 3%, 0 3%);
	}
	25% {
		clip-path: polygon(0 8%, 100% 8%, 100% 20%, 0 20%);
	}
	30% {
		clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%);
	}
	45% {
		clip-path: polygon(0 45%, 100% 45%, 100% 45%, 0 45%);
	}
	50% {
		clip-path: polygon(0 50%, 100% 50%, 100% 57%, 0 57%);
	}
	65% {
		clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%);
	}
	75% {
		clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
	}
	80% {
		clip-path: polygon(0 40%, 100% 40%, 100% 60%, 0 60%);
	}
	95% {
		clip-path: polygon(0 45%, 100% 45%, 100% 60%, 0 60%);
	}
	100% {
		clip-path: polygon(0 11%, 100% 11%, 100% 15%, 0 15%);
	}
}
@keyframes glitchAnimFlash {
	0% {
		opacity: .2;
	}
	30%, 100% {
		opacity: 0;
	}
}

/** JITTER */

@-webkit-keyframes jitter {
	0% {
	 -webkit-transform:translateX(0);
	 transform:translateX(0)
	}
	10% {
	 -webkit-transform:translateX(0);
	 transform:translateX(0)
	}
	10.1% {
	 -webkit-transform:translateX(.3em) skew(30deg);
	 transform:translateX(.3em) skew(30deg)
	}
	10.2% {
	 -webkit-transform:translateX(-.4em) skew(-30deg);
	 transform:translateX(-.4em) skew(-30deg)
	}
	10.3% {
	 -webkit-transform:translateX(0);
	 transform:translateX(0)
	}
	20% {
	 -webkit-transform:translateX(0);
	 transform:translateX(0)
	}
	20.1% {
	 -webkit-transform:translateX(.1em) skew(50deg);
	 transform:translateX(.1em) skew(50deg)
	}
	20.2% {
	 -webkit-transform:translateX(-.2em) skew(-50deg);
	 transform:translateX(-.2em) skew(-50deg)
	}
	20.3% {
	 -webkit-transform:translateX(0);
	 transform:translateX(0)
	}
	50% {
	 -webkit-transform:translateX(0);
	 transform:translateX(0)
	}
	50.1% {
	 -webkit-transform:translateX(.1em) skew(40deg);
	 transform:translateX(.1em) skew(40deg)
	}
	50.2% {
	 -webkit-transform:translateX(-.4em) skew(-40deg);
	 transform:translateX(-.4em) skew(-40deg)
	}
	50.3% {
	 -webkit-transform:translateX(0);
	 transform:translateX(0)
	}
	73% {
	 -webkit-transform:translateX(0);
	 transform:translateX(0)
	}
	73.1% {
	 -webkit-transform:translateX(.2em) skew(50deg);
	 transform:translateX(.2em) skew(50deg)
	}
	73.2% {
	 -webkit-transform:translateX(-.3em) skew(-50deg);
	 transform:translateX(-.3em) skew(-50deg)
	}
	73.3% {
	 -webkit-transform:translateX(0);
	 transform:translateX(0)
	}
	to {
	 -webkit-transform:translateX(0);
	 transform:translateX(0)
	}
   }
   @keyframes jitter {
	0% {
	 -webkit-transform:translateX(0);
	 transform:translateX(0)
	}
	10% {
	 -webkit-transform:translateX(0);
	 transform:translateX(0)
	}
	10.1% {
	 -webkit-transform:translateX(.3em) skew(30deg);
	 transform:translateX(.3em) skew(30deg)
	}
	10.2% {
	 -webkit-transform:translateX(-.4em) skew(-30deg);
	 transform:translateX(-.4em) skew(-30deg)
	}
	10.3% {
	 -webkit-transform:translateX(0);
	 transform:translateX(0)
	}
	20% {
	 -webkit-transform:translateX(0);
	 transform:translateX(0)
	}
	20.1% {
	 -webkit-transform:translateX(.1em) skew(50deg);
	 transform:translateX(.1em) skew(50deg)
	}
	20.2% {
	 -webkit-transform:translateX(-.2em) skew(-50deg);
	 transform:translateX(-.2em) skew(-50deg)
	}
	20.3% {
	 -webkit-transform:translateX(0);
	 transform:translateX(0)
	}
	50% {
	 -webkit-transform:translateX(0);
	 transform:translateX(0)
	}
	50.1% {
	 -webkit-transform:translateX(.1em) skew(40deg);
	 transform:translateX(.1em) skew(40deg)
	}
	50.2% {
	 -webkit-transform:translateX(-.4em) skew(-40deg);
	 transform:translateX(-.4em) skew(-40deg)
	}
	50.3% {
	 -webkit-transform:translateX(0);
	 transform:translateX(0)
	}
	73% {
	 -webkit-transform:translateX(0);
	 transform:translateX(0)
	}
	73.1% {
	 -webkit-transform:translateX(.2em) skew(50deg);
	 transform:translateX(.2em) skew(50deg)
	}
	73.2% {
	 -webkit-transform:translateX(-.3em) skew(-50deg);
	 transform:translateX(-.3em) skew(-50deg)
	}
	73.3% {
	 -webkit-transform:translateX(0);
	 transform:translateX(0)
	}
	to {
	 -webkit-transform:translateX(0);
	 transform:translateX(0)
	}
   }

.key {
	color: #f580ff;
}

.key1 {
	color: #ff0500;
}

.key2 {
	color: #ff21d8;
}

.key3 {
	color: #0279ff;
}