html {
	font-size: 16px;
}
body {
	color : #FFF;
	margin: 0;
	font-family: sans-serif;
	background-image: url('../img/bg-bod.png');
	background-repeat: no-repeat;
	background-color: #2A2A36;
}
h1, h2, h3 {
	text-align : center;
	font-family: sans-serif;
}

h1 { font-size : 2rem; }
h2 { font-size : 1.5rem; }
h3 { font-size : 1.333rem; }
header, footer {
	color: white;
	color : #FFF;
	width: 100%;
	padding: 0.8rem 25%;
	overflow: hidden;
	box-sizing: border-box;
}
header {
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin-bottom: 2rem;
	min-height: 10rem;
	text-align: center;
	padding: 0.8rem 2ch;
	filter: drop-shadow(0 0 18px #9C3F97);
	animation-name: portal-glow;
	animation-duration: 1s;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	animation-timing-function: linear;
}

@keyframes portal-glow {
	0% {
		filter: drop-shadow(0 0 25px #9C3F97)
			drop-shadow(0 0 25px #9C3F97);
	}
	50% {
		filter: drop-shadow(0 0 37px #9C3F97)
			drop-shadow(10px -5px 25px #9C3F97);
	}
	100% {
		filter: drop-shadow(0 0 50px #9C3F97)
			drop-shadow(-10px -10px 50px #9C3F97);
	}
}

footer {
	text-align: center;
	background-color : #222;
	min-height: 2.5rem;
}

footer a,
footer a:visited {
	color: inherit;
}

#logobox {
	margin: auto;
	width: 500px;
	max-width: 95%;
	height: auto;
	aspect-ratio: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background-attachment: fixed;
	background-size: auto min(530px + 0.8rem, 95vw);
	box-shadow: #FFF8 4px 4px 14px, #FFF8 -4px -4px 14px;
	background-image: url("../img/bg-log.png");
	clip-path: circle(50%);
}

#logobox img {
	max-width: 100%;
	height:auto;
	filter: drop-shadow(2px 4px 8px #9C3F97);
}

main section:before {
	content: "";
	display: block;
	background-image: url('../img/bg-top.png');
	height: 32px;
	position: relative;
	top: -32px;
	z-index: 100;
	box-sizing: border-box;
	width: 100%;
}

main {
	background-image: url('../img/bg-main.png');
	box-sizing: border-box;
	padding-bottom: 32px;
	min-height: calc(100vh - 14rem);
}

main section {
	box-sizing: border-box;
	background-color: #FFF8F8;
	width: 100ch;
	max-width: 98%;
	box-shadow: #222A 10px 10px 18px;
	position: relative;
	border-radius: 0.125rem;
	margin: 0.625rem auto;
	padding: 0.5em 0;
	text-align: justify;
	hyphens: auto;
	background-image: url("../img/bg-sec.png");
}

main section p {
	max-width: 65ch;
	margin: 1rem auto;
	color: white;
}

main section figure {
	max-width: 65ch;
	margin: 1rem auto;
}
	
main section figure {
	text-align: center;
}

main section figure img {
	max-width: 90%;
}

@media screen and (max-width: 512px) {
	main {
		background-image: none;
		width: 100%;
	}
	
	main section {
		box-shadow: initial;
		width: 100%;
		min-width: initial;
	}
	
	main p {
		width: 100%;
		max-width: 35ch;
		line-height: 1.5em;
	}
	
	h1, h2, h3 {display:block;color:#FFF;margin:0;}
}