* { box-sizing: border-box }
:root {
	--main-color: #31394D;
	--text-color: #043C5E;
	--high-color: #169;
	--soft-color: #49536c;
	--lite-color: #A0A0C2;
	--live-font: 'Racing Sans One', cursive;
	--main-font: 'Patua One', serif;
}

html {
	color: var(--main-color);
	font-size: 28px; 
	line-height: 1.3 
}

main { min-width: 320px }

a { transition: color 300ms }
a, a:visited { color: inherit }
a:hover { color: var(--high-color) }
a[href^="#"], a[href^="javascript:"] { text-decoration: none }

b { font-variant: small-caps; font-size: 1.2em; line-height: 1 }
p { color: var(--text-color); text-align: justify }

q { font-style: italic }
q::after  { content: none }
q::before { color: var(--soft-color); content: "»"; font-size: 120% }

header { --pad: .4; text-align: center }
header aside {
	right: -6em;
	text-align: center; 
	top: -1em;
	text-shadow: -1px 1px 1px black;
	transform: rotate(45deg);
	z-index: 99;
}
header aside a { text-decoration: none }


h1 { color: var(--text-color); font-size: 1.6rem; margin: 0; padding: 1em 0 }
h1 div { padding-top: .5em }
h1 sup, h2 sup { top: -.8em; color: var(--soft-color); font-size: 68% }
h1 sub, h2 sub { top: .5em; color: var(--soft-color);}

h2, h3 { margin: 0 }

article {
	letter-spacing: -.5px;
	overflow: hidden;
	position: relative;
	z-index: 1
}
article::after {
	background: linear-gradient(-10deg, 
		rgba(0, 0, 0, 0  )  1%, 
		rgba(0, 0, 0, 0.1) 50%, 
		rgba(0, 0, 0, 0  ) 90%
	);
	content: "";
	pointer-events: none;
	position: absolute;
	bottom: 0;
	left: 20%;
	right: 20%;
	top: 0;
	z-index: 1;
}
article .refer {
	font-size: 70%;
	padding: .25em 0
}

aside {
	color: var(--soft-color);
	letter-spacing: 0;
	padding: 2em 5em 1em;
	position: absolute !important;
	z-index: 10;
}
aside>h1, 
aside>h2, 
aside>h3, 
aside>h4 {
	line-height: 1;
	margin: 0
}
aside h1 { font-size: 110% }
aside>h2, 
aside>h3 {
	font-variant: small-caps;
}

blockquote {
	font-size: 85%;
	line-height: 1.2em;
	margin: 0 auto 1em;
	max-width: 27em;
	text-align: justify;
}

cite { float: right;  font-size: 90%; font-style: normal }
cite::after  { content: "◂"  }
cite::before { content: "▸" }

menu { padding: 10px }

section { position: relative }
section aside {
	left: -5.7em;
	text-align: center; 
	top: -1.4em;
	text-shadow: -1px 1px 1px black;
	transform: rotate(-45deg); 
}
section div.center {
	max-width: 45em;
	padding: 1rem 5%;
	width: 60%
}
section.break {
	height: 7em;
	clip-path: polygon(0 0, 100% 0, 0 100%);
}
section.spacer {
	margin-bottom: calc(100vh - 7em);
}

ul.flat { margin: 0; text-align: center }
ul.flat a,
ul.flat li { display: inline-blocK }
ul.flat li::before { content: "▸" }
ul.flat li:last-of-type::after { content: "◂" }

div.deep {
	position: fixed;
	z-index: -99;
}

div.deep, div.full {
	bottom: 0;
	left: 0;
	right: 0;
	top: 0;
}

div.full {
	position: absolute;
	z-index: -1
}

div.leads {
	display: none;
	position: fixed;
	left: 0;
	top: 0;
}

div.logo {
	background: url(../.image/ILogo.png) center/contain no-repeat;
	border-radius: 50%;
	height: 5rem;
	margin-right: -2.5rem;
	opacity: .9;
	position: absolute;
	right: 50%;
	top: 0%;
	width: 5rem;
	z-index: 1;
}

div.ponder {
	background: url();
}

div.space {
	background: linear-gradient(135deg, 
		rgba(255, 255, 255, 1)  5%, 
		rgba( 87, 158, 219, 1) 40%, 
		rgba( 87, 158, 219, 1) 60%, 
		rgba(  0,   0,   0, 1) 85%
	);
}

div.summary { text-align: justify }
div.summary>div { margin: 1em }
div.summary h2, 
div.summary h3, 
div.summary h4, 
div.summary h5 {
	line-height: 1em;
	margin: 0;
}
div.summary sub {
	display: block;
}

div.flex {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}

	div.flex>blockquote {
		padding: 0 1em;
		width: 50%;
	}


/********************************/
/*****  BACKGROUND EFFECTS  *****/
.brick { background: url(../image/brick.jpg) }
.broke { background: url(../image/broke.jpg) }
.charr { background: url(../image/charr.jpg) }
.crack { background: url(../image/crack.jpg) }
.glass { background: url(../image/glass.jpg) }
.jeans { background: url(../image/jeans.jpg) }
.paper { background: url(../image/paper.jpg) }
.papyr { background: url(../image/papyr.jpg) }
.glass::before {
	box-shadow: inset 0 0 1000px rgba(255, 255, 255, .7);
	bottom: 0;
	content: "";
	filter: blur(10em);
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
}

.color {
	position: relative;
	overflow: hidden;
	z-index: 1;
}

	.color::after {
		background: linear-gradient(135deg, rgba(0,0,0,0) 15%, rgba(0,0,0,0.1) 50%, rgba(0,0,0,0) 85% );
		content: "";
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		top: 0;
		z-index: -1;
	}

	.color.blue::after { background: linear-gradient(135deg, rgba(10, 77, 170, 0.1) 30%, rgba(10, 77, 170, 0.2) 90%) }
	.color.green::after { background: linear-gradient(0deg, rgba(6, 64, 31, 0.4) 5%, rgba(6, 64, 31, 0.2) 50%, rgba(6, 64, 31, 0.4) 95%) }
	.color.light::after { background: linear-gradient(135deg, rgba(0,0,0,0) 15%, rgba(255,255,255,0.5) 50%, rgba(0,0,0,0) 85% ) }
	.color.pink::after { background: linear-gradient(135deg, rgba(183, 22, 54, 0.1) 10%, rgba(183, 22, 54, 0.2) 90%) }
	.color.split::after { background: linear-gradient(180deg, rgba(0, 0, 0, 0) 49%, rgba(0, 0, 0, 0.1) 51%, rgba(0, 0, 0, 0.1) 100%) }


/****************************/
/*****  BORDER EFFECTS  *****/
.badge {
	padding: .3em 1em;
	border-radius: 50%;
}

.sharp {
	border: solid var(--soft-color);
	border-width: 1px 2px 3px;
}

/*********************/
/*****  COLUMNS  *****/
.col2 { columns: 2 }
.col3 { columns: 3 }


/**************************/
/*****  TEXT EFFECTS  *****/
.form { font-family: var(--main-font) }
.info { font-family: 'Kanit', Arial, sans-serif }
.inte { font-family: 'Iceland', monospace }
.live { font-family: var(--live-font) }

.biggy { font-size: 110% }
.clipt { background-clip: text; -webkit-text-fill-color: transparent; -webkit-background-clip: text }
.faint { color: var(--soft-color) }
.great { font-size: 10vw }
.lapis { color: var(--text-color) }
.prime { font-size: 120%; letter-spacing: -.05em }
.right { text-align: right }
.shade { text-shadow: 1px 1px 1px black }
.slant { display: inline-block; transform: skew(12deg, 0deg) }
.small { font-size: 75% }
.strok { text-shadow: 1px 1px 3px azure; -webkit-text-stroke-width: 1px; -webkit-text-stroke-color: azure }


/***************************/
/*****  HOVER EFFECTS  *****/
menu a { display: inline-block }
menu a:hover { transform: scale(1.1) }
cite a:hover, 
ul a:hover { color: var(--high-color); text-shadow: 0px 0px 2px azure }


/********************************/
/*****  SELECTION EFFECTS  *****/
::selection { background: yellow }
blockquote ::selection { background: magenta }
h1 ::selection, 
h2 ::selection { background: deepskyblue }
cite ::selection,
ul ::selection { background: springgreen }
aside, div.space, .nosel { user-select: none }


/******************************/
/*****  LAYOUT ALIGNMENT  *****/
.bottom { bottom: 0; margin-bottom: 3em; position: absolute }
.center { margin-left: auto; margin-right: auto }
.float, .left { float: left; left: 0 }
.middle { position: absolute; margin-top: -3em; top: 50%; }
.right { float: right; right: 0 }


/********************************/
/*****  RESPONSIVE PLAYOUT  *****/
@media screen and (max-width: 1700px) {
	article::after { left: 15%; right: 15% }
	section div.center { padding: 1rem 10%; width: 70% }
	html { font-size: 24px }
}

@media screen and (max-width: 1400px) {
	html { font-size: 23px }
}

@media screen and (max-width: 1200px) {
	html { font-size: 22px }
	section div.center { padding: 1rem 5%; width: 70% }
}

@media screen and (max-width: 1024px) {
	article::after { left: 0; right: 0 }
	section div.center { padding: 1rem 5%; width: 80% }
	html { font-size: 20px }
	header { --pad: .3 }
	h1 { font-size: 1.8em }
}

@media screen and (max-width: 800px) {
	html { font-size: 18px }
	h1 sub { font-size: 70% }
	blockquote { padding: 0 1em }
	p { font-size: 1.1rem }
	section div.center {
		margin-left: 10%;
		margin-right: 0;
		padding-left: 1rem;
		padding-right: 2rem;
		width: 90%;
	}
}

@media screen and (max-width: 600px) {
	html { font-size: 15px }
	h1 { font-size: 1.5em }
	q, p { letter-spacing: 0 }
	p { text-indent: 2em }
	div.flex { flex-direction: column }
	div.flex>blockquote { width: 100% }
}

@media screen and (min-width: 1024px) {
}