body, html
{
	height: 100%;
}

body
{
	color: white;
	background: black;
	overflow: hidden;
	overscroll-behavior-y: contain !important;
}

image
{
	pointer-events: none;
}

text
{
	fill: white;
	font-family: "DM Serif Display";
	font-size: 60px;
	pointer-events: none;
}

#gameObject
{
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
}

svg
{
	overflow: visible;
}

.container text
{
	fill: white;
	font: 80px "Noto Emoji";
	text-anchor: middle;
}

.personHidden
{
    display: none;
}

.personInteractive
{
    cursor: pointer;
	animation: animFadeIn 1s ease-out forwards;

	-webkit-tap-highlight-color: transparent;
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
}

.personInteractive text
{
	fill: goldenrod;
    stroke: goldenrod;
	animation: animInteractive 2s ease-out infinite;
}

.personInteractive image
{
	animation: animInteractive 2s ease-in-out infinite;
}

.personInteractive circle
{
    fill: white;
	opacity: 0;
}

.personCompleted circle
{
	animation: animCompleted 1s ease-out forwards;
}

#Libuse
{
    fill: black;
	stroke: none;
}

#Libuse text
{
	stroke: none;
	fill: white;
	filter: drop-shadow(5px 5px 2px #000000);
	font-size: 44px;
	text-anchor: middle;
	animation: none;
}

#Libuse.personInteractive image
{
	animation: none;
}

#Libuse.personInteractive circle
{
	opacity: 1;
	animation: animInteractiveLibuse 2s ease-out infinite;
}

#Libuse.personCompleted circle
{
	opacity: 1;
	animation: animCompletedLibuse 1s ease-out forwards;
}

.line
{
    stroke: goldenrod;
    stroke-width: 4px;
}

.lineHidden
{
    stroke-opacity: 0;
}

.lineInteractive
{
    stroke-opacity: 1;
	stroke-dasharray: 0 100%;
	animation: animLine 2s ease-in forwards;
}

#thanks text
{
	fill: goldenrod;
}

.thanksHidden
{
	opacity: 0;
}

.thanksShown
{
	opacity: 0;
	animation: animFadeIn 1s 2s ease-out forwards;
}

#loading
{
	fill: black;
}

#loading
{
	position: absolute;
	left: 0;
	top: 0;
	width: 100vw;
	height: 100vh;
	background-color: black;
}

.loadingDone
{
	display: none;
}

#loadingContainer
{
	position: absolute;
	left: 50vw;
	top: 50vh;
	width: 14vh;
	height: 14vh;
	transform: translate(-50%, -50%);
}

#loadingSpinner
{
	position: relative;
	width: 10vh;
	height: 10vh;
	border: 2vh solid rgba(255, 255, 255, 0.3);
	border-top: 2vh solid white;
	border-right: 2vh solid white;
	border-radius: 50%;
	animation: loadingSpin 2s linear infinite;
}

@keyframes animFadeIn
{
	0% {opacity: 0;}
    100% {opacity: 1;}
}

@keyframes animLine
{
	0% {stroke-dasharray: 0 100%; }
    100% {stroke-dasharray: 100%; }
}

@keyframes animInteractive
{
	0% {transform: scale(0.9);}
    50% {transform: scale(1.1);}
    100% {transform: scale(0.9);}
}

@keyframes animCompleted
{
	0% {opacity: 0.7; transform: scale(0.6); fill: white;}
    99% {opacity: 0; transform: scale(1.2); fill: black;}
    100% {opacity: 1; transform: scale(0.55); fill: black;}
}

@keyframes animInteractiveLibuse
{
	0% {stroke-width: 6px; stroke: #888;}
    50% {stroke-width: 14px; stroke: goldenrod;}
    100% {stroke-width: 6px; stroke: #888;}
}

@keyframes animCompletedLibuse
{
	0% {opacity: 1; transform: scale(1.0); fill: gray;}
    99% {opacity: 0; transform: scale(1.5); fill: gray;}
    100% {opacity: 1; transform: scale(1.02); fill: black;}
}
@keyframes loadingSpin
{
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}