:root {
	--white: #fff;
	--lt-blu: #bdd0e0;
	--fore: #222;
	--light: #555;
	--width: 8.5in;
	--col: calc(var(--width) / 2 - 10px);
}

@font-face {
  font-family: 'BankGothic';
  src: url('./bank gothic medium bt.ttf');
  font-weight: normal; /* Default */
  font-style: normal;
}


html {
	margin: 0;
	padding: 0;
	background-color: var(--lt-blu);
	background-image: url('corner.png');
	background-position: bottom right;
	background-repeat: no-repeat;
	min-height: 100vh;
}

body {
	padding: 10px;
	max-width: var(--width);
	margin: 0 auto;
}

.header {
	border-bottom: 16px solid var(--white);
	margin: 10px 0 2em 0;
	padding: 0;
	display: flex;
	flex-direction: row;
	
	align-items: center;
	justify-content: space-between;
	
	img {
		margin: 0;
		padding: 1px;
	}
	.header-info {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		justify-content: center;
		
		h1 {
			margin: 0;
			padding: 0;
			font-size: 42px;
			color: #fff;
			font-family: 'BankGothic';
		}
		
		span {
			font-family: 'Trebuchet MS', 'Arial';
			letter-spacing: 0.15em;
			color: #555;
		}
	}
}

@media (max-width: 768px) {
	.header {
		flex-direction: column;
		
		.header-info {
			align-items: center;
			
			span {
				text-align: center;
			}
			padding-bottom: 1em;
		}
	}
}

.body {
	column-width: var(--col);
	letter-spacing: 0.1em;
	
	h2 {
		break-inside: avoid-column;
		font-size: 28px;
		font-family: 'BankGothic';
		margin: 0 0 10px 0;
		color: var(--light);
		
		
		&:not(:first-of-type) {
			margin: 1em 0 10px 0;
		}
	}
	
	p {
		line-height: 2em;
		color: var(--fore);
		font-family: 'Tahoma', 'Arial';
		text-indent: 2em;
		text-align: justify;
	}
	
	.quote {
		break-inside: avoid-column;
		padding: 0.1em 0 0.1em 1em;
		margin-bottom: 1em;
		border-left: 2px solid var(--white);
		
		p {
			color: var(--light);
		}
		
		.author {
			font-size: 20px;
			font-family: 'BankGothic';
			color: var(--white);
			text-align: right;
			
		}
	}
}