@import url('https://fonts.googleapis.com/css2?family=IM+Fell+English:ital@0;1&display=swap');




html,
body,
div,
span,
iframe,
h1,
h2,
h3,
h4,
p,
pre,
del,
em,
img,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
form,
table,
tbody,
tr,
th,
td,
article,
aside,
footer,
header,
nav,
section {
	vertical-align: baseline;
	background: transparent;
	box-sizing: border-box;
	scroll-behavior: smooth;
}












@keyframes welcome {
	0% {
	  opacity: 0;
	  transform: translateY(-400px);
	}
	100% {
	  opacity: 1;
	  transform: translateY(0);
	}
  }

  body > * {
	opacity: 0;
	animation: welcome .5s ease-out forwards;
  }
















footer a {text-decoration:none;}

main a,
aside a {
	position: relative;
	color: darkred;
	font-weight: 1000;
	text-decoration: none;
	z-index: 1;
	transition: color 0.3s ease;
}






main a::before,
aside a::before {
	content: '';
	display: inherit;
	position: absolute;
	width: 100%;
	height: 2px;
	border-radius: 4px;
	background-color: darkred;
	bottom: 2px;
	left: 0;
	transform-origin: right;
	transform: scaleX(0);
	transition: transform .3s ease-in-out;
}

aside a:hover::before,
main a:hover::before {
	transform-origin: left;
	transform: scaleX(1);
}









body {
	color: #5a4134;
	font-family: 'IM FELL ENGLISH', sans-serif;
	font-size: 1.2em;
	overflow-wrap: break-word;
	word-wrap: break-word;
	background-color: #5f9e9e;
	background-size: 10px 10px;
	background-attachment: fixed;
	background-image: repeating-linear-gradient(45deg,
			#5f9e9e 0,
			#5f9e9e 2px,
			#546f6c 0,
			#546f6c 50%);
	hyphens: auto;
	margin: 0 auto;
	line-height: 1.2;




}

#wrapper {
	display: flex;
	margin: 0 auto 0em;
	padding: 1em 0 2em 0;
	border-left: 5px solid #5a4134;

	border-right: 5px solid #5a4134;
	width: 86%;
	gap: 0px;
	background-color: #f5f2e1;
	overflow: hidden;
}

main {
	flex: 1;
	padding: 0em 1em 0;

	order: 2;
}

aside {


	flex: 0 0 24%;
	max-width: 24%;
	padding: 0em 1em 0;
	order: 1;
}


header {
	color: #f5f2e1;
	text-align: left;
	margin: 0 auto;
	width: 86%;
	padding: .1em 0;

	border-left: 5px solid #5a4134;

	border-right: 5px solid #5a4134;
	background-color: #5a4134;
}

footer {
	color: #f5f2e1;
	text-align: center;

	border-left: 5px solid #5a4134;

	border-right: 5px solid #5a4134;
	margin: 0 auto;
	width: 86%;
	padding: .5em 0em;
	background-color: #5a4134;
	font-size: 0.8em;
}

footer p {
	text-align: center;
	padding: .3em;
	margin: 0 auto;
	width: 90%;
}
header a::before {content:none}
header a{color:#f5f2e1; text-decoration:none}

header h1 {
	font-size: 2em;
	margin: .2em .5em;
	line-height: 1em;
}

main h1 {
	font-size: 1.8;
	background-color: #5a4134;
	padding: .2em;
	MARGIN-TOP: .7EM;
	border: 10px double #f5f2e1;
	color: #f5f2e1
}

main h2 {
	border-bottom: 10px double #5a4134;
}


main h3 {
	border-bottom: 5px solid #5a4134;
	color: #f5f2e1
}


p {
	overflow-wrap: break-word;
	word-wrap: break-word;
	hyphens: auto;
	text-align: justify;
}



/* 
~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~
~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~
        • • navigation • •     
~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~
~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~ 
*/

nav {
	line-height: 1;
	color: #f5f2e1;
	width: 100%;
	background-color: #5a4134;
	border: 10px double #f5f2e1;
	padding: .1em;
	margin: 1em auto 1em;
}

#wrapper nav a {
	color: #f5f2e1;
}

nav ul {
	list-style-type: none;
	margin: 0;
	padding: .1em;
}


nav li ul li {
	border: 0;
}

nav li a,
nav li span {
	display: block;
	color: #f5f2e1;
	padding: 0.3em;
	position: relative;
	cursor: pointer;
}

nav li a::before {
	content: none;
}

nav li a:hover,
nav li span:hover {
	color: #f5f2e1;
	background-color: #546f6c;
	text-shadow: none;
}

nav li span::after {
	content: "⏵";
	font-weight: bold;
	float: right;
	padding-right: .1em;
	line-height: 1.2;
	transition: transform 0.3s ease;
}

nav li span.open::after {
	transform: rotate(90deg);
}

nav li span.open {
	background-color: #546f6c;
	color: #f5f2e1;
	text-shadow: none;
}

.submenu {
	height: 0;
	overflow: hidden;

	color: #f5f2e1;
	transition: height 0.5s ease;
	background-color: #5f9e9e;
	padding: 0;
}


.submenu li {
	text-indent: 0em;
	font-size: .9em;
	font-weight: normal;
	letter-spacing: normal;
	text-transform: none;
	line-height: 1em;
}

#wrapper nav .submenu a {
	position: relative;
	color: #f5f2e1;
	font-weight: 900;
	padding: 0.4em;
	text-shadow: none;
}

#wrapper nav .submenu a:hover {
	color: #f5f2e1;
	background-color: #546f6c;
}

#top {
	display: none;
}

.button {
	display: none;
}








/* 
~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~
~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~
       • • blockquotes • •     
~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~
~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~ 
*/
blockquote {
	border-radius: 0px;
	padding-top: 0em;
	border: 10px double #f5f2e1;
	background-color: #5a4134;
	color: #f5f2e1;
	width: 80%;
	margin: 0.5em auto;
	position: relative;
}

blockquote p {
	margin: 1em;
}

blockquote cite {
	display: block;
	padding: 0.4em 0;
	width: 100%;
	font-style: normal;
	font-size: .8em;
	margin: 0 auto 0 0;
	text-align: center;
}

/* 
~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~
~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~
         • • figures • •     
~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~
~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~ 
*/

a:has(img)::before {
	display: none;
}

figure {
	border: 10px double #f5f2e1;
	margin: 1em auto;
	max-width: 80%;
	padding: 1em;
	padding-bottom: 0.3em;
	color: #f5f2e1;
	background: #5a4134;
}

figure img {
	width: 100%;
	margin: 0;
	border: 0em solid #5a4134;
	padding: 0;
	box-sizing: border-box;
}

figure a::before {
	display: none;
}

figcaption {
	color: #f5f2e1;
	text-align: center;
	font-size: .8em;
	margin: 0.3em 0 0 0;
}


figure figcaption a, footer a,
blockquote cite a {
	position: relative;
	color: peachpuff;
	font-weight: 600;
}

figure figcaption a::before, footer a::before,
blockquote cite a::before {
	content: '';
	display: inherit;
	position: absolute;
	width: 100%;
	height: 2px;
	border-radius: 4px;
	background-color: peachpuff;
	bottom: 2px;
	left: 0;
	transform-origin: right;
	transform: scaleX(0);
	transition: transform .3s ease-in-out;
}

figure figcaption a:hover::before, footer a:hover::before,
blockquote cite a:hover::before {
	transform-origin: left;
	transform: scaleX(1);
}

/* 
~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~
~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~
         • • lists • •     
~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~
~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~ 
*/

main ol,
main ul {
	padding: 0em 0;
	text-align: justify;
	margin: 0 auto;
}

main ol {
	counter-reset: custom-counter;

}

main ol li,
main ul li {
	margin: 1em auto;
	width: 80%;
	padding: 0em .3em;
	list-style: none;
}

main ol li:before {
	counter-increment: custom-counter;
	content: counter(custom-counter, decimal-leading-zero) ":";
	color: #5a4134;
	padding-right: .3em;
}

main ul li:before {
content: "❧";
font-size:1.2em;
padding-right:.3em;
}



dl {
	margin: 1em auto;
	width:100%;
  }
  dt {
	background-color:#5a4134;
	color:#f5f2e1;
	padding:.3em;
	border:10px double #f5f2e1;
	margin-top: .5em;
  }
dd {margin:0 0 .5em;}

/* 
~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~
~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~
      • • media styling • •     
~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~
~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~ 
*/

.cinema {
	margin: 0 auto;
	width: 80%;
}

.video {
	aspect-ratio: 16 / 9;
	width: 100%;
	padding: .5em;
	border: 10px double #f5f2e1;
	color: #f5f2e1;
	background-color: #5a4134;
	margin: 0.5em auto;
	position: relative;
}



















#totop  {
	display: none;
	position: fixed;
	bottom: 20px;
	right: 30px;
	z-index: 99;

	font-family: 'IM FELL ENGLISH', sans-serif;
	border: none;
	letter-spacing:.1em;
	outline: none;
	background-color: #546f6c;
	color:#f5f2e1;
	cursor: pointer;
	padding: 0.3em 0.5em;
	font-size: 18px;
	width: fit-content;
	border:10px double #5f9e9e;

	
}

#totop:hover {
	background-color: #5a4134

}


@media screen and (max-width: 1024px) {
html {
	scroll-padding-top: 5em;}
	main,
	aside {

		flex: none;
		max-width: 100%;
	}

#totop {display:none}
	#wrapper,
	footer,
	header {
		display: block;
		width: 100%;
	}


	header {
		position: sticky;
		top: 0;
		display: flex;
		flex-direction: row;
		z-index: 1000;
		padding: 5px;
		gap: 10px;
	}

	#mobile {
		position: fixed;
		top: 0;
		right: 0;
		display: flex;
		flex-direction: row;
		z-index: 1000;
		padding: 3px 10px 0px 0px;
		gap: 10px;
	}



	.button {
		position: sticky;
		top: 0;
		display: flex;
		flex-direction: row;
		z-index: 1000;
		background-color: transparent;
		padding: 5px;
		gap: 10px;
	}

	.button {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 40px;
		height: 40px;
		background-color: #f5f2e1;
		color: #5a4134;
		text-decoration: none;
		font-weight: 1000;
		border-radius: 5px;
		font-size: 18px;
		box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
		transition: transform 0.2s, background-color 0.2s;
	}

	.button:hover {
		transform: scale(1.1);
		background-color: #fbe49d;
		color: #5a4134;
	}

	.question {
		font-weight: bold;
	}

	.up-arrow {
		font-weight: bold;
		font-size: 22px;
	}

	.button a:hover {
		color: #5a4134;
		background-color: #fbe49d
	}

	.button a {
		position: relative;
		color: #5a4134;
		font-weight: 1600;
	}

	.button a::before {
		content: none;
		background: transparent;
		height: 0;
	}

	.button a:hover::before {
		content: none;
		height: 0;

		background: transparent;
	}
}








}