#storyspace, #reflections {
	position: fixed;
	width: 63vw;
	height: 100vh;
	top:0;
	right:0;
	animation-fill-mode: forwards;
	animation-name: fade-in;
	animation-duration: 0.4s;
	animation-timing-function: ease;
}

.ele-core {
	pointer-events: none;
}

.ele-node {
	pointer-events: auto;
	position: relative;
	transform: translateX(-50%);
	display: inline-block;
	padding: 5px 35px 35px 35px;
	background-color: var(--storyspace-node-background);
	color: var(--storyspace-node-header);
	border: solid var(--storyspace-node-foreground) 1px;
	cursor: pointer;
	white-space: nowrap;
}

.ele-node:not(#ele-center,#ele-thetexts) {
	z-index: 5;
	animation-name: node-drift;
	animation-duration: 20s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	animation-delay: 0s;
	transition-property: all;
	transition-duration: 0.2s;
}

#ele-center, #ele-thetexts {
	z-index: 10;
}

.ele-node:before {
	content: '';
	position: absolute;
	z-index: -1;
	top: 0;
	left: 0;
	border-bottom: 1px solid var(--storyspace-node-foreground);
	background: var(--storyspace-node-foreground);
	height: 50%;
	width: 100%;
	transition-property: all;
	transition-duration: 0.2s;
}

.ele-node:hover {
	border-color: var(--storyspace-node-active);
	color: var(--storyspace-node-text-active);
	transition-property: all;
	transition-duration: 0.2s;
}

.ele-node:hover:before {
	background: var(--storyspace-node-active);
	border: var(--storyspace-node-active);
	transition-property: all;
	transition-duration: 0.2s;
}

.mapCore {
	position: absolute;
	top: 50%;
    left: 50%;
    transform: translate(0, -30px);
}


#storyspace ul, #reflections ul {
    position: absolute;
    list-style-type: none;
    margin: 0;
    padding: 0;
}

#storyspace li, #reflections li {
    position: absolute;
    -webkit-transition: all 1s ease-out;
    -moz-transition: all 1s ease-out;
    transition: all 1s ease-out;
}

#reflections {
	display: block;
}

#storyspace {
	display: none;
}

svg {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	animation-fill-mode: forwards;
	animation: fade-out 0.15s ease;
}

line {
	stroke: var(--storyspace-node-foreground);
	stroke-width: 2;
	stroke-dasharray: 100 100;
}

#line1 {
	opacity: 1;
    animation-fill-mode: forwards;
	animation: line-in 0.3s ease-out;
}

#line2 {
	opacity: 0.9;
	animation-fill-mode: forwards;
	animation: line-fade9 0.3s ease-out;
}
#line3 {
	opacity: 0.8;
	animation-fill-mode: forwards;
	animation: line-fade8 0.3s ease-out;
}
#line4 {
	opacity: 0.7;
	animation-fill-mode: forwards;
	animation: line-fade7 0.3s ease-out;
}
#line5 {
	opacity: 0.6;
	animation-fill-mode: forwards;
	animation: line-fade6 0.3s ease-out;
}
#line6 {
	opacity: 0.5;
	animation-fill-mode: forwards;
	animation: line-fade5 0.3s ease-out;
}
#line7 {
	opacity: 0.4;
	animation-fill-mode: forwards;
	animation: line-fade4 0.3s ease-out;
}
#line8 {
	opacity: 0.3;
	animation-fill-mode: forwards;
	animation: line-fade3 0.3s ease-out;
}
#line9 {
	opacity: 0.2;
	animation-fill-mode: forwards;
	animation: line-fade2 0.3s ease-out;
}
#line10 {
	opacity: 0.1;
	animation-fill-mode: forwards;
	animation: line-fade1 0.3s ease-out;
}
#line0 {
	opacity: 0;
	animation-fill-mode: forwards;
	animation: line-out 0.3s ease-out;
}


main.fadein {
	animation-fill-mode: forwards;
	animation-name: fade-in;
	animation-duration: 0.3s;
	animation-timing-function: ease;
}

main.fadeout {
	animation-fill-mode: forwards;
	animation-name: fade-out;
	animation-duration: 0.3s;
	animation-timing-function: ease;
}

/*
@media only screen and (max-width: 767px) {
	#storyspace, #reflections {
		width: 100vw;
		height: 65vh;
		top: 30vh;
	}
}
*/