::-webkit-scrollbar {
	width: 12px;
	height: 12px;
	background-color:transparent;
}
::-webkit-scrollbar-thumb {
	border: solid 4px transparent;
	background-clip: padding-box;
	background-color: rgba(255,255,255,.3);
	border-radius: 12px;
}
::-webkit-scrollbar-button {
	display: none;
	width: 0;
	height: 0;
}
::-webkit-scrollbar-corner {
	background-color: transparent;
}


@keyframes blinking {
	0% {
		box-shadow: 0 3px 0 var(--c_accentColor)
	}
	30% {
		box-shadow: 0 3px 0 var(--c_accentColor)
	}
	50% {
		box-shadow: 0 3px 0 var(--c_accentColor_transparent)
	}
	80% {
		box-shadow: 0 3px 0 var(--c_accentColor_transparent)
	}
	100% {
		box-shadow: 0 3px 0 var(--c_accentColor)
	}
}

@keyframes key-active-glow {
	25% {
		box-shadow: 0 0 0 0 rgba(var(--c_accentColor_rgb), 0)
	}
	62.5% {
		box-shadow: 0 0 0 6px rgba(var(--c_accentColor_rgb), 0.3)
	}
	100% {
		box-shadow: 0 0 0 12px rgba(var(--c_accentColor_rgb), 0)
	}
}




@keyframes fadeTo_left {
    from {
        opacity : 1;
        transform : translate3d(0,0,0);
    }
    to {
        opacity : 0;
        transform : translate3d(-50vw,0,0);
    }
}

@keyframes fadeTo_right {
    from {
        opacity : 1;
        transform : translate3d(0,0,0);
    }
    to {
        opacity : 0;
        transform : translate3d(50vw,0,0);
    }
}

@keyframes fadeFrom_left {
    from {
        opacity : 0;
        transform : translate3d(-50vw,0,0);
    }
    to {
        opacity : 1;
        transform : translate3d(0,0,0);
    }
}

@keyframes fadeFrom_right {
    from {
        opacity : 0;
        transform : translate3d(50vw,0,0);
    }
    to {
        opacity : 1;
        transform : translate3d(0,0,0);
    }
}

@keyframes fadeFrom_bottom {
    from {
        transform : translate3d(0,50vw,0);
    }
    to {
        transform : translate3d(0,0,0);
    }
}

.fadeFromBottom{
    animation-name : fadeFrom_bottom;
    animation-duration : .7s;
    animation-timing-function : cubic-bezier(0.07, 0.82, 0.29, 1);
}


.fadeToLeft{
    animation-name : fadeTo_left;
    animation-duration : .35s;
    animation-timing-function : cubic-bezier(.25,.51,.57,.99);
}
.fadeToRight{
    animation-name : fadeTo_right;
    animation-duration : .35s;
    animation-timing-function : cubic-bezier(.25,.51,.57,.99);
}
.fadeFromLeft{
    animation-name : fadeFrom_left;
    animation-duration : .35s;
    animation-timing-function : cubic-bezier(.25,.51,.57,.99);
}
.fadeFromRight{
    animation-name : fadeFrom_right;
    animation-duration : .35s;
    animation-timing-function : cubic-bezier(.25,.51,.57,.99);
}



@keyframes fade_in {
	from {opacity: 0}
	to {opacity: 1}
}

@keyframes delayed_fade_in {
	0% {opacity : 0}
	50% {opacity: 0}
	100% {opacity: 1}
}

@keyframes fade_out {
	from {opacity: 1}
	to {opacity: 0}
}


@keyframes trainer_error {
	0% {
		transform: translate(-50%, 0);
		opacity: 0;
	}
	20% {
		transform: translate(-50%, -64px);
		opacity: 1;
	}
	100% {
		transform: translate(-50%, -128px);
		opacity: 0;
	}
}

@keyframes not {
	0% {
		transform : translateX(0);
	}
	20% {
		transform : translateX(-16px);
	}
	40% {
		transform : translateX(16px);
	}
	60% {
		transform : translateX(-16px);
	}
	80% {
		transform : translateX(16px);
	}
	100% {
		transform : translateX(0);
	}
}


@keyframes cursor_blink {
	0% {
		opacity : 1
	}
	33% {
		opacity : 1
	}
	66% {
		opacity: 0
	}
	100% {
		opacity: 1
	}
}




.trainer_error_char_placement {
	position: relative;
	top: 0;
	display: inline-block;
	vertical-align: top;
	width: 0;
	height: 4px;
}
.trainer_error_char {
	opacity: 0;
	position: absolute;
	font-size: 32px;
	line-height: 40px;

	animation: trainer_error 1s ease-in-out 1;
	background-color: rgb(255,30,100);
	padding: 8px;
	border-radius: 4px;
}

body {
	cursor: auto;
	user-select: none;
	-webkit-user-select: none;
}

.hide_cursor {
	cursor: none;
}



.smoothGradient {
	background: linear-gradient(
	  to bottom,
	  rgba(17, 14, 30, 1) 0%,
	  rgba(17, 14, 30, 0.987) 8.1%,
	  rgba(17, 14, 30, 0.951) 15.5%,
	  rgba(17, 14, 30, 0.896) 22.5%,
	  rgba(17, 14, 30, 0.825) 29%,
	  rgba(17, 14, 30, 0.741) 35.3%,
	  rgba(17, 14, 30, 0.648) 41.2%,
	  rgba(17, 14, 30, 0.55) 47.1%,
	  rgba(17, 14, 30, 0.45) 52.9%,
	  rgba(17, 14, 30, 0.352) 58.8%,
	  rgba(17, 14, 30, 0.259) 64.7%,
	  rgba(17, 14, 30, 0.175) 71%,
	  rgba(17, 14, 30, 0.104) 77.5%,
	  rgba(17, 14, 30, 0.049) 84.5%,
	  rgba(17, 14, 30, 0.013) 91.9%,
	  rgba(17, 14, 30, 0) 100%
	);
  };