@media screen and (min-width: 0) {

	* {
		background: none;
		border: none;
		box-sizing: border-box;
		color: inherit;
		font-family: inherit;
		font-weight: inherit;
		font-size: inherit;
		margin: 0;
		padding: 0;
		text-decoration: none;
	}

	*:focus { outline: none }
	*::-moz-focus-inner { border: none }

	b {
		font-weight: 700;
		display: inline-block;
	}

	body {
		--factor: 0;
		--color-light: #fff;
		--color-light: #ADD8E6;
		--color-hover: #ff6a0e;
		background-color: #000;
/* 		background-image: url(../image/discus.svg); */
		background-size: auto 20%;
		background-position: center;
		background-repeat: no-repeat;
		color: var(--color-light);
		font-family: 'Prompt', sans-serif;
		font-weight: 300;
		font-size: calc(var(--factor) * 1px + 16px);
		min-height: 100vh;
	}

	button {
		cursor: pointer;
		display: block;
	}

	.bar {
		align-items: center;
		background-color: rgba(0,0,0,0.35);
		border: 1px solid rgba(0,0,0,0.15);
		display: flex;
		fill: var(--color-light);
		left: 0;
		opacity: 0.85;
		padding: 1em;
		position: fixed;
		right: 0;
		z-index: 1;
	}

	.bar > button {
		height: 1.75em;
		width: 1.75em;
	}

	.bar > button > svg {
		transition: fill 0.5s ease-out;
	}

	.bar > button:hover > svg {
		fill: var(--color-hover);
		opacity: 1;
	}

	.bar > button > svg {
		height: 1.75em;
	}

	.panel {
		background-color: rgba(0,0,0,0.35);
		bottom: 2.5em;
		padding: 1em;
		position: fixed;
		top: 3.25em;
		z-index: 1;
	}

	.panel > * {
		font-size: 0.875em;
		font-weight: 400;
	}

	.panel > .title {
		font-size: 1em;
	}

	.title {
		font-family: 'Atma', sans-serif;
		font-weight: 600;
		font-size: 1.375em;
	}

	#header {
/* 		font-family: 'Atma', sans-serif; */
/* 		font-weight: 600; */
		font-family: 'Lalezar', cursive;
/* 		font-style: italic; */
		font-weight: 400;


		height: 3.25em;
		top: 0;
	}

	#header > * {
		font-size: 1.375em;
	}

	#header > svg {
		height: 1.75em;
		margin: 0 0.375em;
	}

	#header > button {
		margin-left: auto;
	}

	#menu {
		margin-right: -100%;
		right: 0;
		transition: margin-right 0.5s ease-in-out;
		width: 100%;
		overflow: auto;
	}

	#menu.show {
		margin-right: 0;
	}

	#info > * {
		margin-bottom: 1em;
	}


/*	#menu > * {
		text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
	}

	#menu > ul {
		list-style: none;
	}

	#menu > ul > li:hover {
		color: var(--color-hover);
		cursor: pointer;
	}*/


	#contact {
		border-left: 1px solid rgba(0,0,0,0.05);
		margin-left: -100%;
		left: 0;
		transition: margin-left 0.5s ease-in-out;
		width: 100%;
	}

	#contact.show {
		margin-left: 0;
	}

	#footer {
		bottom: 0;
		height: 2.5em;
		justify-content: center;
	}

	#footer > * {
		font-size: 1em;
		margin: 0.5em;
	}


	#animation-pause > svg > path:nth-of-type(1) {
		display: block;
	}

	#animation-pause > svg > path:nth-of-type(2) {
		display: none;
	}

	#animation-pause.pause > svg > path:nth-of-type(1) {
		display: none;
	}

	#animation-pause.pause > svg > path:nth-of-type(2) {
		display: block;
	}

}

@media screen and (min-width 20em) { body { --factor: 1 } }
@media screen and (min-width: 40em) {
	body { --factor: 2 }
/* 	#info { width: 80% } */
}
@media screen and (min-width: 50em) {
/* 	#info { width: 70% } */
}

@media screen and (min-width: 60em) {
	body {--factor: 3 }
/* 	#info { width: 60% } */
}
@media screen and (min-width: 70em) {
/* 	#info { width: 50% } */
}
@media screen and (min-width: 80em) {
	body { --factor: 4 }
/* 	#info { width: 40% } */
}
@media screen and (min-width: 90em) {
	body { --factor: 4 }
/* 	#info { width: 30% } */
}
@media screen and (min-width: 100em) { body { --factor: 5 } }
@media screen and (min-width: 120em) { body { --factor: 6 } }
@media screen and (min-width: 140em) { body { --factor: 7 } }
@media screen and (min-width: 160em) { body { --factor: 8 } }
@media screen and (min-width: 180em) { body { --factor: 9 } }
@media screen and (min-width: 200em) { body { --factor: 10 } }
@media screen and (min-width: 220em) { body { --factor: 11 } }
@media screen and (min-width: 240em) { body { --factor: 12 } }


@media screen and (orientation: landscape) {
/*
	#menu {
		width: 38.2%;
		margin-right: -38.2%;
	}

	#contact {
		width: 61.8%;
		margin-right: -61.8%;
	}
*/

}