@charset "utf-8";
/* CSS Document */

/*NAVIGATION*/
		
		:root {
			--grey: #808080;
			--darkgrey: #565656;
			--darkred: #730800;
			--lightred: #AB1600;
			--purple: #8A2F4A;
			--orange: #EA5200;
			--lightorange: #FF9D00;
			--darkbrown: #7D3313;
			--brown: #A13203;
			--lightbrown: #D9BC9F;
			--lightgrey: #ADADAD;
			--gradientend: #CC3D00;
			
			--animationStartPoint: 0px;
			--animationEndPoint: 0px;
		}
		
		* {margin: 0; padding: 0; box-sizing: border-box;}

		html {font-size: 13pt; width: 100%; scroll-behavior: smooth;}
		
		body {
			width: 100%;
			min-height: 100lvh;
			font-family: 'Alegreya', serif;
			position: relative;
			z-index: 1;
			/*-ms-overflow-style: none;*/  /* IE and Edge */
  			/*scrollbar-width: none;*/  /* Firefox */
			background-color: #808080;
			background-image: url("/about/assets-2-19/mountains-1.png") , url("/about/assets-2-19/sky-1.jpg");
			background-position: bottom left, top center;
			background-attachment: local, fixed;
			background-size: contain, cover;
			background-repeat: no-repeat, no-repeat;
		}

@media (max-width: 600px) {
	body {background-size: contain, auto 100lvmax;}
}
		
		/*body::-webkit-scrollbar {display: none;}*/
		
		body:after {
			content: '';
			position: fixed;
			z-index: 2;
			top: 7rem;
			left: 0;
			width: 5760px; /* x3 */
			height: 141px; /* :2 */
			/*background-color: #112233;*/
			background-image: url("/about/assets-2-19/ash-1.png");
			background-size: contain;
			background-repeat: repeat-x;
			animation: flow 120s linear infinite,
					   glow 5s ease-in-out infinite;
			/*animation-play-state: var(--playState);*/
			filter: drop-shadow(0 0 0.25rem #EA5200);
			animation-play-state: var(--animation-play-state);
		}
		
		@keyframes flow {
			0% {transform: translateX(0);}
			100% {transform: translateX(-1920px);}
		}

		@keyframes glow {
			0%, 100% {filter: drop-shadow(0 0 0.25rem #EA5200);}
			50% {filter: drop-shadow(0 0 0.4rem #FF7A33);}
		}
		
		/*header,*/ main, footer {position: relative; z-index: 10; }
		
		header, footer, .bar, #contents {
			box-shadow: 0.1rem 0.1rem 0.25rem 0.2rem hsla(0, 20%, 20%, 0.25);
			background-color: white;
		}
		
		
		#contents {
			/*--animationStartPoint: calc(100% + 0.5rem);
			--animationEndPoint: 0px;*/
			position: fixed;
			top: -50%;
			margin: auto;
			left: 20vw;
			/*left: var(--animationStartPoint);*/
			width: 60%;
			height: max-content;
			z-index: 20;
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			align-items: center;
			align-content: center;
			padding: 4rem 2rem;
			
		}
		
		#contents > h2 {
			background-clip: text;
			text-fill-color: transparent;
			-webkit-background-clip: text;
    		-moz-background-clip: text;
   			-webkit-text-fill-color: transparent; 
    		-moz-text-fill-color: transparent;
			background-image:linear-gradient(to bottom, var(--darkred), var(--lightred));
			text-shadow: none;
			margin-top: 0;
			text-align: left !important;
		}
		
		contents > .action {margin-left: 0;}
		
		#contents > ul {
			flex: 1 0 100%
		}
		
		#contents li {
			padding-left: 0.5rem;
		}
		
		#contents li::marker {
					content: "\2767";
					font-size: 10pt;
				}
		
		#contents ul ul {margin-left: 1rem;}
		
		#contents ul ul li {font-size: 11pt; line-height: 18pt;}
		
		li.tobottom {font-style: italic;}
		li.tobottom::marker {font-style: normal;}
		
		#contents a {color: var(--orange); text-decoration-thickness: 1px;}
		#contents a:hover {color: var(--lightorange);}
		
		.slidein {animation: slidein 0.5s forwards;}
	
		@keyframes slidein {
			0% {left: var(--animationStartPoint);}
			100% {left: var(--animationEndPoint);}
		}
		
		.slideout {animation: slideout 0.5s forwards;}
		
		@keyframes slideout {
			0% {left: var(--animationEndPoint);}
			100% {left: var(--animationStartPoint);}
		}
		
		@keyframes slideinfromabove {
			0% {top: -50%;}
			100% {top: 0px;}
		}
		
		@keyframes slideouttoabove {
			0% {top: 0px;}
			100% {top: -50%;}
		}
		
		.slidein2 {animation: slideinfromabove 0.5s forwards;}
		.slideout2 {animation: slideouttoabove 0.5s forwards;}
		
		/*footer {
			font-size: 11pt;
			text-align: right;
			font-style: italic;
			padding: 0.1em 0.25em 0.3em;
		}*/
		
		/*CONTENTPAGE*/
		
		main {
			margin: 1rem 0.75rem 2rem;
		}
		
			h1, h2 {
				text-align: left;
				/*white-space: nowrap;*/
		}

				h1 {
					font-size: 40pt;
					margin: 10rem 0 0.5rem;
					color: white;
					text-shadow: 0.1rem 0.1rem 0.3rem hsla(0, 20%, 20%, 0.5);
					font-weight: 500;
					/*text-indent: 2rem;*/
					padding-left: 2rem;
					text-wrap: balance;
			}

				h2 {
					font-size: 25pt;
					font-weight: 600;
					/*margin: 0.25rem auto;
					text-indent: 3rem;*/
					text-align: center;
					background-clip: text;
					text-fill-color: transparent;
					-webkit-background-clip: text;
					-moz-background-clip: text;
					-webkit-text-fill-color: transparent; 
					-moz-text-fill-color: transparent;
					background-image: linear-gradient(to bottom, var(--red-dark), var(--red-light));
			}
		
			.bar {
				padding: 2rem 2rem 1.75rem;
				width: min(100%, 800px);
		}
		
				.bar p {
					text-indent: 1rem;
					text-align: justify;
					max-width: 700px;
					margin: 0 auto;
			}

				.bar p:first-of-type::first-letter {
					/*display: block;
					width: 3rem;
					height: 3rem;
					background-color: red;
					font-size: 3rem;*/
				}
		
			#initial {
				float: left;					
				background: radial-gradient(circle at 50% 100%, var(--gradientend) 10%, var(--brown) 60%);
				width: 4rem;
				height: 4rem;
				font-size: 4rem;
				font-weight: 500;
				color: white;
				position: relative;
				border: double 3px white;
				margin: 0 0.25rem 0 auto;
				/*margin: 0 0.25rem 0 calc(50% - 400px);*/
			}

				#initial span {
					position: absolute;
					top: -0.9rem;
					left: 0.7rem;

				}

				#initial + p {
					text-indent: -0.25rem;
					max-width: 700px;
					margin: 0 auto; /*0 0.5rem*/
				}


			def {font-weight: 500;}

			.bar a {
				color: var(--orange);
				text-decoration: underline;
				text-decoration-thickness: 1px;
			}

				.bar a:hover, .bar a:visited:hover {color: var(--lightorange);}
				.bar a:active {}
				.bar a:visited {color: var(--purple);}

				.bar a:not([href]) {color: var(--darkbrown);}
		
			.bar ul {padding: 0rem 1rem;}

				.bar li {padding-left: 0.5rem;}

				.bar li::marker {
					content: "\2767";
					font-size: 11pt;
					padding-right: 0.25rem;
					color: var(--brown);
				}
		
			.bar .pageinfo {
					margin-top: 1rem;
					text-indent: 0;
					text-align: center;
					font-style: italic;
					color: var(--lightred);
					font-size: 12pt;
			}
		
		figure {
			border: 1px solid var(--darkbrown);
			padding: 1rem 1.5rem 0.5rem;
			margin: 0.75rem auto 1rem;
			max-width: 500px;
		}
		
		picture source, picture img {
			width: 100%;
			height: auto;
		}
		
		figcaption {
			padding-top: 0.25rem;
			font-style: italic;
			color: var(--brown);
			text-align: center;
			font-size: 12pt;
		}
				
		/*ABOUT*/
		
@media (min-width: 900px) {
	
	header#mobile {
		margin: 1rem auto;
		width: 800px;
		left: calc(50vw - 400px);
	}
	
	#contents {top: -100%;}
	
	#contents h2 {width: auto;}
	
	#contents {
		width: fit-content;
		left: auto;
		right: 4rem;
	}
	
	@keyframes slideinfromabove {
			0% {top: -100%;}
			100% {top: 0px;}
		}
		
		@keyframes slideouttoabove {
			0% {top: 0px;}
			100% {top: -100%;}
		}
	
	main {
		/*width: 900px;*/
		margin: 1rem calc(50% - 400px) 2rem;
	}
	
	h1, h2 {
		margin-left: auto;
		margin-right: auto;
	}
	
	h1 {margin-top: 17.5rem; text-indent: 1rem; width: 700px;}
	
	h2 {text-indent: 1rem;}
	
	.bar {
		width: 800px;
		position: relative;
		z-index: 5;
	}
	
	.bar p {
		width: 700px;
	}
	
	#initial {
		margin-left: 15px;
	}
	
	figure {
		width: 600px;
	}
	
	aside {
		float: left;
		/*width: 100px;*/
		/*width: clamp(100px, calc(400px - 25vw), 400px);*/
		/*height: 275px;*/ /*I'll have to change it with Javascript, it seems.*/
		/*height: max-content;*/
		width: clamp(100px, calc(((50vw - 430px) * -1) + 430px), 420px);
		position: relative;
		margin: 0.75rem 1rem;
		display: grid;
		justify-content: end;
	}
	
	aside.right {float: right; justify-content: start;}
	
	aside > figure {
		width: 400px;
		position: relative;
		/*right: 300px;*/
		/*right: clamp(300px, calc(400px - 25vw), 0px);*/
		top: 0;
		background-color: white;
		margin: 0;
		border: none;
		box-shadow: 0.1rem 0.1rem 0.25rem 0.2rem hsla(0, 20%, 20%, 0.25);
	}
	
	aside.right > figure {
		right: auto;
		left: 0;
	}
	
	.bar ul {width: 700px; margin: 0 auto;}
	
	footer {
		margin: 2rem auto;
		width: 800px;
		padding: 0.1em 0.5em;
	}

}