@import url('https://fonts.googleapis.com/css2?family=Gentium+Plus&family=Quicksand&display=swap');


:root {
	--transition-transparent: #F5F5F500;
	--transition-solid: #F5F5F5;
	--storyspace-node-background: #F5F5F5;
	--storyspace-node-foreground: #324E73;
	--storyspace-node-active: #CCCCCC;
	--storyspace-node-text-active: #000000;
	--storyspace-node-header: #F5F5F5;
	--global-background: #F5F5F5;
	--global-background-overlay: #4B7BA680;
	--global-background-img: url("../img/background-light.jpg");
	--main-background: #F5F5F5;
	--main-header: #F5F5F5;
	--main-text: #000000;
	--main-color: #324E73;
	--link-default: #324E73;
	--link-active: #CCCCCC;
	--title-opacity: .4;
}

body {
	font-family: 'Quicksand', sans-serif;
	overflow: hidden;
	padding: 0px;
	margin: 0px;
	height: 100vh;
	background-color: var(--global-background);
	background: linear-gradient(var(--global-background-overlay), var(--global-background-overlay)), var(--global-background-img);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	animation-fill-mode: forwards;
	/*animation: storyspace-zoom-in 0.5s ease-out;*/
}

#transition {
	z-index: 999;
	height: 100vh;
	background-image: linear-gradient(to right, var(--transition-transparent) 10%, var(--transition-solid) 45%, var(--transition-solid) 55%, var(--transition-transparent) 90%);
	background-size: 1000%;
	animation-fill-mode: forwards;
}

main {
	position: absolute;
	z-index: 99;
	margin: 0 1.5vw 0 1.5vw;
	padding-bottom: 20px;
	width: 30vw;
	top: 50%;
	transform: translateY(-50%);
	background-color: var(--main-background);
	/*border-top: solid 15px var(--main-color);*/
	max-height: 90vh;
	overflow-y: auto;
	scrollbar-color: var(--main-color) var(--main-background);
}

h1 {
	font-family: 'Gentium Plus', serif;
	z-index: 99;
	cursor: pointer;
	position: fixed;
	right: 1.5vw;
	top: -10px;
	color: var(--main-color);
	font-size: 2em;
	display: none;
	animation-fill-mode: forwards;
}

h3 {
	font-family: 'Gentium Plus', serif;
	margin: 0px;
	padding: 20px 30px 20px 30px;
	background-color: var(--main-color);
	font-size: 2.4em;
	color: var(--main-header);
}

p {
	margin: 20px 0px;
	padding: 5px 30px;
	color: var(--main-text);
}

nav {
	margin-left: 30px;
}

.btnNext {
	float: auto;
}

.btnDefault {
	float: auto;
}

nav {
	display: none;
}


button {
	margin: 10px 0px;
	padding: 10px 1.5vw;
	font-size: 1.2em;
	-webkit-appearance: none;
    -moz-appearance: none;
    text-decoration: none;
    border: solid 2px;
    background-color: var(--main-color);
	color: var(--storyspace-node-header);
	border-color: var(--main-color);
	transition-property: all;
	transition-duration: 0.2s;
	cursor: pointer;
}

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

a {
	color: var(--link-default);
	transition-property: color;
	transition-duration: 0.2s;
	cursor: pointer;
	font-weight: bold;
}

a:hover {
	color: var(--link-active);
	transition-property: color;
	transition-duration: 0.2s;
}

h3 a {
	color: var(--link-active);
	transition-property: color;
	transition-duration: 0.2s;
	cursor: pointer;
}

h3 a:hover {
	color: var(--main-background);
	transition-property: color;
	transition-duration: 0.2s;
}


@media only screen and (max-height: 800px) {
	main {
		top: 1.5vw;
		transform: translateY(0%);
	}
}

/*
@media only screen and (max-width: 1024px) {

}


@media only screen and (max-width: 767px) {
	main {
		width: 97vw;
		top: 1.5vw;
		margin: 0 1.5vw 0 1.5vw;
		transform: translateY(0%);
		max-height: 30vh;
	}
}
*/