html {
	height: 100%;
	--dark-slate-gray: #121f1f;
	--light-slate-gray: #1e3333;
	--primary-color-dark: #00e0e0;
	--primary-color: #00ffff;
	--primary-color-shadow: rgba(0, 224, 224, 0.8);
	--accent-color: #EC407A;
	--accent-color-shadow: rgba(236, 64, 122, 0.8);
	color: white;
	font-size: 1.2rem;
}

body {
	background-color: var(--dark-slate-gray);
}

* {
	box-sizing: border-box;
	font-family: Poppins, sans-serif;
}

h1 {
	text-shadow: 0 0 0.4em var(--primary-color-shadow);
}

button {
	cursor: pointer;
	outline: none;
}
button[disabled] {
	cursor: not-allowed;
}

kbd {
	padding: 0.1em 0.5em;
	margin: 0 0.2em;
	background: white;
	color: #666;
	border: 1px solid #ccc;
	text-transform: capitalize;
	border-radius: 4px;
}

button.link-like {
	border: none;
	background: none;
	padding: 0;
	font: inherit;
	color:
}
button.link-like, a {
	color: #039be5;
	text-decoration: none;
}

.neon {
	border: 2px solid var(--primary-color);
	margin: 5px;
	padding: 8px;
	border-radius: 4px;
	font-size: 0.9em;
	color: var(--primary-color);
	text-shadow: inherit;
	background-color: transparent;
	transition: background-color 0.1s, color 0.1s, transform 0.05s;
}

.neon.enabled {
	color: var(--dark-slate-gray);
	background-color: var(--primary-color);
}

a.neon, label.neon {
	/* needed for the hover transform */
	display: inline-block;
}

@media (hover: hover) and (pointer: fine) {
	/* prevent mobile keeping the hover state after a click
	 * see https://medium.com/@mezoistvan/finally-a-css-only-solution-to-hover-on-touchscreens-c498af39c31c */
	.neon:hover, .neon.primary:hover {
		transform: scale(1.05);
	}
	select.neon {
		transform: initial;
	}
}

.neon.primary {
	background-color: var(--accent-color);
	border-color: var(--accent-color);
	color: white;
	box-shadow: 0 0 1em var(--accent-color-shadow);
}

.neon:disabled, .neon.primary:disabled,
.neon.disabled, .neon.primary.disabled,
a.neon:not([href]), a.neon.primary:not([href]) {
	border-color: gray;
	box-shadow: none;
	background-color: transparent;
	color: gray;
	cursor: not-allowed;
}
@media (hover: hover) and (pointer: fine) {
	/* prevent mobile keeping the hover state after a click
	 * see https://medium.com/@mezoistvan/finally-a-css-only-solution-to-hover-on-touchscreens-c498af39c31c */
	.neon:disabled:hover, .neon.primary:disabled:hover,
	.neon.disabled:hover, .neon.primary.disabled:hover,
	a.neon:not([href]), a.neon.primary:not([href]) {
		transform: none;
	}
}

@keyframes blink {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
.dot {
	/* courtesy of https://codepen.io/xwildeyes/pen/KpqVzN */
    animation: blink 1.4s infinite;
}

.dot:nth-child(2) {
    animation-delay: .2s;
}

.dot:nth-child(3) {
    animation-delay: .4s;
}

@keyframes shine {
	0% {
		transform: translateX(-100%);
	}
	100% {
		/* Increase this and the animation duration to increase delay between animations */
		transform: translateX(300%);
	}
}
.shine {
	position: relative;
	overflow: hidden;
}
.shine::after {
	content: "";
	position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
	background: linear-gradient(-45deg, transparent 40%, var(--primary-color), transparent 60%);
	animation-duration: 2s;
	animation-name: shine;
	animation-iteration-count: infinite;
}

@keyframes bounce {
	0% {
		transform: rotate(0);
	}
	10% {
		transform: rotate(10deg);
	}
	30% {
		transform: rotate(-10deg);
	}
	40% {
		transform: rotate(0);
	}
}
.bounce {
	animation-name: bounce;
	animation-duration: 2s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
}

#aip_gdpr {
	color: initial; /* prevent white text on white */
}

@keyframes spin {
	from {
		transform:rotate(0deg);
	}
	to {
		transform:rotate(360deg);
	}
}
.icon-spinner2 {
	display: inline-block;
	animation-name: spin;
	animation-duration: 1s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}