/* PRIMARY BUTTON */
button
{
    background:#6b42de;
	background:linear-gradient(180deg, #ac78e4 0%, #7262f2 100%);
	border:none;
	border-radius:10px;
    box-shadow:0px 0px 8px rgba(0, 0, 0, 0.5);
	color:#ffffff;
	cursor:pointer;
    font-family:"JostBold", sans-serif;
	font-size:14px;
	height:40px;
	line-height:40px;
	min-width:80px;
	outline:none;
	padding:0px 20px;
	position:relative;
	text-align:center;
	user-select:none;
	-webkit-tap-highlight-color:rgba(0, 0, 0, 0);
}

button.large
{
	box-shadow:0px 0px 20px rgba(0, 0, 0, 0.5);
	font-size:18px;
	font-weight:900;
	height:68px;
	line-height:68px;
	min-width:100px;
	padding:0px 25px;
}

button.blue, button.purple
{
	background:#292a2f;
	border:2px solid #3f4656;
	border-radius:10px;
	box-shadow:none;
	color:#888b90;
	cursor:pointer;
	display:inline-block;
	font-family:"Jost", sans-serif;
	font-size:14px;
	font-weight:100;
	height:40px;
	line-height:36px;
	padding:0px 20px;
	transition:border 0.25s, box-shadow 0.25s, color 0.25s, text-shadow 0.25s;
}

button.blueLarge, button.purpleLarge
{
	background:#292a2f;
	border:2px solid #3f4656;
	border-radius:10px;
	box-shadow:none;
	color:#888b90;
	cursor:pointer;
	display:inline-block;
	font-family:"Jost", sans-serif;
	font-size:14px;
	font-weight:100;
	height:50px;
	line-height:46px;
	padding:0px 20px;
	transition:border 0.25s, box-shadow 0.25s, color 0.25s, text-shadow 0.25s;
}

button.blue:hover, button.blue:focus, button.blueLarge:hover, button.blueLarge:focus
{
	border:2px solid #cffdff;
	box-shadow:inset 0px 0px 5px #01eff9, 0px 0px 5px #01eff9;
	color:#ffffff;
	text-shadow:0px 0px 5px #01eff9;
}

button.purple:hover, button.purple:focus, button.purpleLarge:hover, button.purpleLarge:focus
{
	border:2px solid #fbd3ff;
	box-shadow:inset 0px 0px 5px #e600ff, 0px 0px 5px #e600ff;
	color:#ffffff;
	text-shadow:0px 0px 5px #e600ff;
}

button:disabled, button[disabled]
{
	cursor:not-allowed;
	filter:grayscale(100%);
}

button.blue:disabled, button.blue[disabled], button.purple:disabled, button.purple[disabled], button.blueLarge:disabled, button.blueLarge[disabled], button.purpleLarge:disabled, button.purpleLarge[disabled]
{
	border:2px solid #3f4656;
	box-shadow:none;
	color:#888b90;
	cursor:not-allowed;
	filter:grayscale(100%);
	text-shadow:none;
}

button.rainbow
{
	animation:animateRainbow 2s infinite linear;
	background:linear-gradient(#9244ff, #0e0e0e), linear-gradient(#12121300 50%, rgba(18, 18, 19, 0.6) 80%, rgba(18, 18, 19, 0)), linear-gradient( 90deg, #ff6d1b, #ffee55, #5bff89, #4d8aff, #6b5fff, #ff64f9, #ff6565);
    background-clip:padding-box, border-box, border-box;
	background-origin:border-box;
    background-size:200%;
	border:2px solid transparent;
	border-radius:20px;
	color:#f3f3f3;
	cursor:pointer;
	font-size:20px;
	height:70px;
    position:relative;
}

button.rainbow:before
{
    animation:animateRainbow 2s infinite linear;
	background:linear-gradient(90deg, #ff6d1b, #ffee55, #5bff89, #4d8aff, #6b5fff, #ff64f9, #ff6565);
    background-size:200%;
	bottom:-20%;
	content:"";
	filter:blur(50px);
	height:30%;
	left:10%;
    position:absolute;
	right:10%;
    z-index:-1;
}

button.rainbow:hover, button.rainbow:hover:before
{
    animation:none;
}

@keyframes animateRainbow
{
    0%   {background-position:0;}
    100% {background-position:200%;}
}