:root {
	--white: white;
	--offwhite: #f8f8ff;
   	--textwhite: #eee;
	--textsecondarywhite: #696969;
	--accentwhite: white;

	--textwhitedisabled: #989898;
	--textwhiteactive: #b7b7b7;
	--textwhitehover: #888888;

	--accentwhitedisabled: white;
	--accentwhiteactive: #bbbbbb;
	--accentwhitehover: #e0e0e0;

	--accentwhiteshadow: #e9e9e9da;
	--accentwhitetrans: #ffffffcf;

    
	--whitespecialcolor: #41f66e;
	--whitespecialcolorhover: #6eff93;
	--whitespecialcoloractive: #3ae464;
	--whitespecialcolordisabled: #a9ffbf;
	--whitespecialcolorlip: #34cb5a;

	/* --whitespecialcolorlip: #b0b0b0; */

	

	--black: #000000;
	--offblack: #121212;
	--textblack: #333;
	--textsecondaryblack: #c8c8c8;
	--accentblack: #2a2a2a;

	--textblackdisabled: #787878;
	--textblackactive: #696969;
	--textblackhover: #888888;

	--accentblackdisabled: black;
	--accentblackactive: #5d5d5d;
	--accentblackhover: #444444;

	--accentblackshadow: #000000ea;
	--accentblacktrans: #2a2a2af1;


	--blackspecialcolor: #ab71e9;
	--blackspecialcolorhover: #8762d7;
	--blackspecialcoloractive: #8762d7;
	--blackspecialcolordisabled: #3e2a5b;
	--blackspecialcolorlip: #64499f;




	--gold: #ffc124;
	--blue: #458cff;
	--red: #ff4545;


	--bg-color: var(--offwhite);
	--text-color: var(--textblack);
	--text-color-secondary: var(--textsecondarywhite);
	--accent-color: var(--accentwhite);
	--text-color-disabled: var(--textwhitedisabled);
	--text-color-active: var(--textwhiteactive);
	--text-color-hover: var(--textwhitehover);

	--accent-color-hover: var(--accentwhitehover);
	--accent-color-active: var(--accentwhiteactive);
	--accent-color-shadow: var(--accentwhiteshadow);
	--accent-color-trans: var(--accentwhitetrans);

    --special-color: var(--whitespecialcolor);
    --special-color-hover: var(--whitespecialcolorhover);
    --special-color-active: var(--whitespecialcoloractive);
    --special-color-disabled: var(--whitespecialcolordisabled);

    --special-color-lip: var(--whitespecialcolorlip);


}

body {
	position: relative;
	width: 100%;
	height: 100%;
	margin: 0;
	box-sizing: border-box;
	font-family:  "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, sans-serif;

	background-color: var(--bg-color);
    color: var(--text-color);
    transition: all 200ms;
}


a {
	color: rgb(0,100,200);
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

a:visited {
	color: rgb(0,80,160);
}

label {
	display: block;
}

input, button, select, textarea {
	font-family: inherit;
	font-size: inherit;
	-webkit-padding: 0.4em 0;
	padding: 0.4em;
	margin: 0 0 0.5em 0;
	box-sizing: border-box;
	border: none;
	/* border: 1px solid #ccc; */
	border-radius: 5px;


	background-color: var(--accent-color);
    color: var(--text-color);
    transition: all 200ms;
}

input:disabled {
	color: var(--text-color-disabled);
}

input {
	box-shadow: var(--accent-color-active)  0px -2px 0px;
	outline: none;
}


button {
	transform: translateY(-4px);
	background-color: var(--special-color);
	box-shadow: var(--special-color-lip)  0px 4px 0px;
	cursor: pointer;
	/* box-shadow: 0px 0px 10px 2px var(--accent-color-shadow); */
}


button:disabled {
	/* color: var(--text-color-disabled); */
	box-shadow: none;
	transform: translateY(-4px) translateY(3px);
    background-color: var(--special-color-disabled);
	cursor: default !important;
}

button:not(:disabled):active {
	/* color: var(--text-color-active); */
	transform: translateY(-4px) translateY(3px);
	box-shadow: var(--special-color-lip)  0px 2px 0px;
    /* background-color: var(--special-color-active); */
}

button:not(:disabled):not(:active):hover {
    /* background-color: var(--special-color-hover); */
	transform: translateY(-4px) translateY(-1px);
	box-shadow: var(--special-color-lip) 0px 5px 0px;
}



.special-btn {
	transform: translateY(-4px);
	box-shadow:  0px 4px 0px;
	cursor: pointer;
	/* box-shadow: 0px 0px 10px 2px var(--accent-color-shadow); */
}


.special-btn:disabled {
	/* color: var(--text-color-disabled); */
	filter: brightness(0.5);
	box-shadow: none;
	transform: translateY(-4px) translateY(3px);
	cursor: default !important;
}

.special-btn:not(:disabled):active {
	/* color: var(--text-color-active); */
	transform: translateY(-4px) translateY(3px);
	box-shadow: 0px 2px 0px;
    /* background-color: var(--special-color-active); */
}

.special-btn:not(:disabled):not(:active):hover {
    /* background-color: var(--special-color-hover); */
	transform: translateY(-4px) translateY(-1px);
	box-shadow: 0px 5px 0px;
}


/* button:focus {
	color: var(--text-color-disabled);
} */
  /* button {
	color: #333;
	background-color: #f4f4f4;
	outline: none;
} */
/* button:active {
	transform: translateY(3px);
	box-shadow: rgb(176, 176, 176) 0px 2px 0px;
    background-color: var(--special-color-active);
  } */

.circle {
    width: 2rem;
    height: 2rem;
    border-radius: 100%;
    /* box-shadow: 0px 0px 10px 2px var(--accent-color-shadow); */
  }

.e1 {
	background-color: var(--blue);
	box-shadow: #245ebb 0px 3px 0px;
}

.e2 {
	background-color: var(--red);
	box-shadow: #be2424 0px 3px 0px;
}

.e {
	background-color: #333;	
}


/* Hide scrollbar for Chrome, Safari and Opera */
.no-scroll::-webkit-scrollbar {
	display: none;
	}

/* Hide scrollbar for IE, Edge and Firefox */
.no-scroll {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}


@keyframes float {
	0% {
		transform: translatey(0px);
	}
	50% {
		transform: translatey(-5px);
	}
	100% {
		transform: translatey(0px);
	}
}

@keyframes glowing {
	0% {
		filter: brightness(1.0);
		/* transform: scale(1.0); */
	}
	80% {
		filter: brightness(1.5);
		/* transform: scale(0.8); */
	}
	100% {
		filter: brightness(1.0);
		/* transform: scale(1.0); */
	}
}

@keyframes pinging {
	0% {
		transform: scale(1.0);
	}
	50% {
		transform: scale(0.8);
	}
	100% {
		transform: scale(1.0);
	}
}


@keyframes fading {
	0% {
		opacity: 1.0;
	}
	50% {
		opacity: 0.6;
	}
	100% {
		opacity: 1.0;
	}
}