@import url('https://fonts.googleapis.com/css2?family=Borel&family=Comfortaa:wght@300..700&family=Comic+Neue:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&family=Josefin+Sans:ital,wght@0,100..700;1,100..700&family=Josefin+Slab:ital,wght@0,100..700;1,100..700&family=Montserrat+Alternates:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=MuseoModerno:ital,wght@0,100..900;1,100..900&family=Playwrite+CA:wght@100..400&family=Playwrite+PT:wght@100..400&family=Sacramento&family=Shantell+Sans:ital,wght@0,300..800;1,300..800&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap');/*
@import url('https://fonts.googleapis.com/css2?family=Borel&family=Comic+Neue:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&family=Playwrite+CA:wght@100..400&family=Playwrite+PT:wght@100..400&display=swap');*/

/* ELEMENT style */
:root { font-size: : clamp(1.5rem, 2.5vw, 4rem); }
:root { box-sizing: border-box; font-size: calc(1vw + 16px); }
*, *::before, *::after /* CSS Document root */ { box-sizing: inherit; clear: both; }
/* CSS Documents interface */
::selection { background-color: dodgerblue; color: aliceblue; }
a, a:visited { border-bottom: none; color: darkgreen; font-weight: 400; padding-top: 0.5rem; text-decoration: none; }
a:hover { border-bottom: solid thick limegreen; color: darkgreen; text-decoration: none; text-shadow: 0 0 1px black; /* 00ff7f50 springgreen;*/ }
nav { padding-top: 1rem; color: dodgerblue; color: forestgreen; cursor: pointer; }
nav, nav a, nav a:visited, nav a:hover { font-family: 'Comic Neue', cursive; font-weight: normal; }
nav, nav a, nav a:visited { color: midnightblue; color: darkgreen; font-size: 0.8rem; text-align: left; }
nav a { padding: 0 0.25vw; }
nav a:hover { color: darkgreen; }
nav b { color: dodgerblue; font-family: "Comic Mono", monospace; font-weight: bolder; letter-spacing: 0.05rem; opacity: 0.9; }
nav a:first-child { margin-left: -1rem; }
nav:first-child { margin-left: 0; margin-top: -0.75rem; }
h1 { font-size: clamp(3.5rem, 2.5vw, 4rem); line-height: 4.0rem; }
h2 { font-size: clamp(3.0rem, 2.4vw, 4rem); line-height: 3.5rem; }
h3 { font-size: clamp(2.5rem, 2.3vw, 4rem); line-height: 3.0rem; }
h4 { font-size: clamp(2.0rem, 2.2vw, 4rem); line-height: 2.5rem; }
h5 { font-size: clamp(1.5rem, 2.1vw, 4rem); line-height: 2.0rem; }
h6 { font-size: clamp(1.0rem, 2.0vw, 4rem); line-height: 1.5rem; }/*
h1 { font-size: vw; } h2 { font-size: vw; } h3 { font-size: vw; } h4 { font-size: vw; } h5 { font-size: vw; } h6 { font-size: vw; } */
article { background-color: mintcream; border-radius: 1rem; margin: 3vh 0; opacity: 0.8; }
article { color: black; opacity: 0.8; transition: color 2s ease-in-out; transition: opacity 2s ease-in-out; transition-delay: 1s; }
article:hover { color: midnightblue; opacity: 1.0; transition: color 2s ease-in; transition: opacity 2s ease-in; }
article.transparent { background-color: mintcream; opacity: 0.8; transition: background-color 2s ease-in-out; transition-delay: 1s; }
article.transparent:hover { background-color: transparent; opacity: 1.0; transition: background-color 2s ease-in; }
article>* { margin-top: 1rem; padding-bottom: 1rem; }
aside, .borel { color: cadetblue; display: block; font-family: 'Borel'; line-height: 2; margin: 0.5rem auto -0.5rem; text-align: left; }
b { color: ; }
blockquote, .playwrite { color: cadetblue; font-family: 'Comic Neue', 'Playwrite_PT'; margin: 0.5rem auto; text-align: right; }
body /* see AUTHORING type */ { box-sizing: border-box; font-family: "Comic Neue"; font-size: : clamp(1.5rem, 2.5vw, 4rem); line-height: 1.5rem; }
body { background-attachment: fixed; background-color: deepskyblue; background-image: url("../img/png/Tern.png"); background-position: center; background-repeat: no-repeat; background-size: 80vmin; box-sizing: inherit; color: midnightblue; font-family: "Comic Neue"; letter-spacing: 0.06rem; line-height: 1.5; text-align: 2rem; text-align: center; text-align: justify-all; word-spacing: 0.03rem; }
body, article { padding: 3vh 4vw; }
code { co7lor: darkslateblue; font-family: "Comic Mono"; width: 100%; }
em { font-style: italic; font-weight: bold; }
h1, h2, h3, h4, h5, h6 { font-family: "Comfortaa"; margin: 0; }
h1, h3, h5 { color: black; font-weight: 400; }
h2, h4, h6 { color: slateblue; font-weight: 500; }
i { color: darkmagenta; font-style: italic; }
iframe, p iframe { display: block; border-radius: 1rem; }
img { border-radius: 1rem; }
p { display: block; margin: auto 2rem; padding: auto 1rem; }
q::before, q::after { content: "'"; }
quote::before { content: open-quote; }
quote::after { content: close-quote; }
s { text-decoration: line-through; }
table { color: dodgerblue; width: 100%; }
table caption, thead { color: cadetblue; }
thead /* deprecated tag */{ colspan: 4; float: right; text-align: right; }
th {}
tr {}
td {}/*
https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/colgroup
<blockquote>Living Skills</blockquote>
<table>
	<caption>
		Life and Love
	</caption>
	<colgroup>
		<col span="4" class="" />
	</colgroup>
	<tr>
		<td></td>
		<th scope="col">Home</th>
		<th scope="col">Task</th>
		<th scope="col">Work</th>
		<th scope="col">Task</th>
	</tr>
	<tr>
		<th scope="row">Skill</th>
		<td>Food, health</td>
		<td>Rest, peace</td>
		<td>Mind, gentle</td>
		<td>Spirit, happy</td>
	</tr>
</table>
*/

/* COLUMNS grid https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns */
div { display: grid; font-size: 0.8rem; grid-template-columns: 70% auto; text-align: left; }
div b, div i { font-style: normal; font-weight: 400; padding: 0.5rem 1rem; }
div b { color: gray; }
div i { color: darkslateblue; }

/* AUTHORING type */
aside, code { display: block; text-align: left: }
blockquote { display: block; text-align: right: }
blockquote img { margin-top: 1rem; }
code { display: block; text-align: left; }

/* Class style */
.riverleaf { background-image: url("../img/RiverLeaf.png"); background-position: center; background-repeat: no-repeat; background-size: 80vmin; margin-top: 100vh; bottom: 20vh; width: 80vw; }
.ac { text-align: center; }
.al { text-align: left; }
.ar { text-align: right; }
.circle { /*https://www.w3docs.com/snippets/css/how-to-add-a-circle-around-a-number-in-css.html*/ ; background: #fff; border: 3px solid dimgray; border-radius: 50%; color: dimgray; display: inline; font-family: "Monserrat Alternates", sans-serif; font-size: 30px; font-weight: 900; height: 100%; letter-spacing: 0px; padding: 2px 16px; text-align: center; width: 100%; }
.eos { margin: 10vw auto; }
.fa, .fa:visited, .fas, .fas:visited { color: darkslateblue; opacity: 0.5; padding-bottom: 1rem; }
.fa:hover, .fas:hover { color: forestgreen; cursor: pointer; opacity: 0.5; }
.h-inline { clear: both; margin: auto; padding-left: 5vw; width: 90vw; }
.h-inline h1, .h-inline h2, .h-inline h3, .h-inline h4, .h-inline h5, .h-inline h6 { display: inline; padding: 0 1vw; }
.h-inline h1 { margin-left: -17.3%; }
.h-inline h6 { margin-right: 0; }
.h-inline h6:after>p { clear: both; }
section.h-inline { clear: both; margin: auto; }
.imgbuffer { display: block; margin: 3rem 1.5rem 2rem; }
.info {/**/ margin: 1rem 1rem 0 0; position: absolute; right: 0; top: 0; white-space: nowrap; }
.law { font-size: 50%; margin-top: -114vh; padding-bottom: 50vh); position: absolute; width: 90%; }
.law small { line-height: 0.6rem; text-transform: uppercase; vertical-align: text-top; }
.skyview { margin-top: 100vh; }
img.skyview { border-radius: 1rem; height: 40vw; margin-bottom: 1rem; width: 40vw; }
img.skyview { opacity: 1.0; transition: opacity 2s ease-in-out; }
img.skyview:hover { opacity: 0; transition: opacity 2s ease-in; transition-delay: 0.2s; }
.w20 { height: 10vw; padding: 0 35%; /*w=90 90-70=20 70/2=35*/; }

/* TYPOGRAPHY https://fonts.google.com
<b>icon</b> &emsp; <a href="#"><i class="material-icons">home</i></a>
<a href="#"><i class="material-icons">spa</i></a>
<a href="#a"><i class="material-icons">arrow_back</i></a>
<a href="#"><i class="material-icons">arrow_forward</i></a>
<a href="#"><i class="material-icons">menu</i></a>
<a href="#"><i class="material-icons">search</i></a>
<a href="#"><i class="material-icons">favorite_border</i></a> */
.material-icons { font-size: 120%; color: darkgreen; margin: 0; opacity: 0.6; padding: 0; vertical-align: -0.2rem; }
.material-icons:hover { color: forestgreen; cursor: pointer; opacity: 1.0; }
.playwriteca-100 { font-family: "Playwrite CA", cursive; font-optical-sizing: auto; font-style: normal; font-weight: 100; }
.playwriteca-200 { font-family: "Playwrite CA", cursive; font-optical-sizing: auto; font-style: normal; font-weight: 200; }
.playwriteca-300 { font-family: "Playwrite CA", cursive; font-optical-sizing: auto; font-style: normal; font-weight: 300; }
.playwriteca, .playwriteca-400 { font-family: "Playwrite CA", cursive; font-optical-sizing: auto; font-style: normal; font-weight: 400; }
.playwritept-100 { font-family: "Playwrite PT", cursive; font-optical-sizing: auto; font-style: normal; font-weight: 100; }
.playwritept-200 { font-family: "Playwrite PT", cursive; font-optical-sizing: auto; font-style: normal; font-weight: 200; }
.playwritept-300 { font-family: "Playwrite PT", cursive; font-optical-sizing: auto; font-style: normal; font-weight: 300; }
.playwritept, .playwritept-400 { font-family: "Playwrite PT", cursive; font-optical-sizing: auto; font-style: normal; font-weight: 400; }
.comicneue-300 { font-family: "Comic Neue", cursive; font-style: normal; font-weight: 300; }
.comicneue-300i { font-family: "Comic Neue", cursive; font-style: italic; font-weight: 300; }
.comicneue, .comicneue-400 { font-family: "Comic Neue", cursive; font-style: normal; font-weight: 400; }
.comicneue-400i { font-family: "Comic Neue", cursive; font-style: italic; font-weight: 400; }
.comicneue-700 { font-family: "Comic Neue", cursive; font-style: normal; font-weight: 700; }
.comicneue-700i { font-family: "Comic Neue", cursive; font-style: italic; font-weight: 700; }
.borel { font-family: "Borel", cursive; font-style: normal; font-weight: 400; }

/* NOMINAL style */
.opacity0 { opacity: 0; }
.opacity10 { opacity: 0.1; }
.opacity20 { opacity: 0.2; }
.opacity30 { opacity: 0.3; }
.opacity40 { opacity: 0.4; }
.opacity50 { opacity: 0.5; }
.opacity60 { opacity: 0.6; }
.opacity70 { opacity: 0.7; }
.opacity80 { opacity: 0.8; }
.opacity90 { opacity: 0.9; }
.opacity100 { opacity: 1.0; }

/*
	reference
https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference#index
https://www.w3schools.com/howto/default.asp
https://www.w3schools.com/html/default.asp
https://www.w3schools.com/tags/default.asp
https://www.w3schools.com/html/html_layout.asp
https://www.w3schools.com/cssref/index.php
https://www.w3schools.com/css/default.asp
https://www.w3schools.com/icons/
https://getbootstrap.com
https://fonts.google.com
https://www.freeimages.com [Adobe's iStock cookies farm ~ hygiene REQ]
	particulars
https://fonts.google.com
https://developer.mozilla.org/en-US/docs/Web/CSS/columns
https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/colgroup
https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns
https://developer.mozilla.org/en-US/docs/Web/CSS/clamp
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions