@charset "UTF-8";
/* ===== GENERAL SETUP ===== */
:root {
	font-size: 18px;

	--typFont: 'Josefin Sans', Sans-Serif;
	--spFont: 'Oswald', Sans-Serif;
	--monoFont: 'Roboto Mono', monospace;

	--ccBlue: 51,68,77; /* #33444d rgba(1) */
	--ccRed: 255,102,102; /* #ff6666 rgba(255,102,102,1) */
	--ccYellow: 254,229,154; /* #fee59a rgba(254,229,154,1) */
	--ccIvory: 251,244,228; /* #fbf4e4 rgba(251,244,228,1) */
	--ccAqua: 147,209,207; /* #93d2cf rgba(147,209,207,1) */
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;

	line-height: 1.6;
	letter-spacing: 0.056rem;
}
img {pointer-events: none !important;} /* NO-Reaction of Any Mouse Event */
svg {display: block;}

	/* color scheme */
.ccBlue {color: rgb(var(--ccBlue)); fill: rgb(var(--ccBlue));}
.ccRed {color: rgb(var(--ccRed)); fill: rgb(var(--ccRed));}
.ccYellow {color: rgb(var(--ccYellow)); fill: rgb(var(--ccYellow));}
.ccIvory {color: rgb(var(--ccIvory)); fill: rgb(var(--ccIvory));}
.ccAqua {color: rgb(var(--ccAqua)); fill: rgb(var(--ccAqua));}

	/* layout */
#homePAGE :where(header, main, footer) {
	max-width: 1500px;
	margin-left: auto;
	margin-right: auto;
}
.subPAGE :where(header, footer) {
	max-width: 1500px;
	margin-left: auto;
	margin-right: auto;
	padding-top: 180px;
}
.subPAGE main {
	max-width: 1100px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 10px;
	padding-right: 10px;
}

/* ===== FONT ===== */
h1, .h1,
.button {
	font-family: var(--typFont);
	font-weight: 700;
	font-size: 1.3rem;

}
h6, .h6,
ol, ul {
	font-family: var(--spFont);
	font-weight: 500;
	font-size: 1.1rem;

}
p, .p,
li {
	font-family: var(--typFont);
	font-weight: 300;
	font-size: 1rem;

}

mark {
	background-color: rgba(var(--ccAqua),0.5);
	padding-left: 0.2rem;
	padding-right: 0.2rem;
	margin-left: 0.2rem;
	margin-right: 0.2rem;
}

b,
._bold {font-weight: 500;}

	/* to wrapup extreme long hyperlink and word */
._wrap :where(li, li>a) {word-wrap: break-word;}

	/* keyword tags @ "short article" */
._keyword {
	width: auto;
	height: auto;
	padding: 0.2rem 0.5rem 0.1rem 0.5rem;
	border-radius: 0.2rem;
	font-size: 0.9rem;
	font-weight: 400;
	background-color: rgb(var(--ccAqua));
	color: rgb(var(--ccBlue));
}
	/* add "<" and ">" */
._tag:before {content: "<";}
._tag:after {content: ">";}

	/* add "#" */
._hash:before,
._hashtag:before {content: "#";}

._hashtag {
	font-weight: 400;
	font-size: 0.9rem;
	word-wrap: break-word;
}

/* ===== FOCUS ===== */
a:focus,
.socialLINK button:focus,
.readMORE:focus,
.breadcrumb:focus,
#upBTN:focus,
.button:focus,
.thumb:focus,
.caroNAV button:focus {
	outline: 3px solid rgb(var(--ccRed));
	outline-offset: 2px;
}

/* ===== ANCHOR ===== */
a:after {content: "";}
._redLINK:after {content: url("../images/exLINKs_red.svg");}
._ivoryLINK:after {content: url("../images/exLINKs_ivory.svg");}
._blueLINK:after {content: url("../images/exLINKs_blue.svg");}

a,
a:link,
a:active,
a:visited {
	cursor: pointer;
	background-color: transparent;
	text-decoration: none;
		/* a bit smaller size deal to bold font */
	font-size: 0.9rem;
	font-weight: 400;
	letter-spacing: 0.056rem;
	border-bottom: 1px solid;
}
a:focus,
a:hover  {
	font-weight: 300;
	letter-spacing: 0.08rem;
	border-bottom: 3px solid;
}

	/* anchor with class="keyPOINT" */
.keyPOINT a,
.keyPOINT a:active,
.keyPOINT a:visited {
	border: none;
	color: rgb(var(--ccBlue));
	font-weight: 300;
	font-size: 1rem;
	letter-spacing: 0.056rem; /* !as return to default */
}
.keyPOINT a:focus,
.keyPOINT a:hover {
	background-color: rgba(var(--ccYellow),0.5);
	border-bottom: 3px solid;
	font-weight: 300;
}

/* ===== BUTTON ===== */
button {
	background-color: transparent;
	border: none;
	line-height: 1;
}
.button { /* (related to "h1") */
	cursor: pointer;
	width: 260px;
	height: 50px;
	padding: 0.9rem 0 1rem 0;
	margin: 10px;
	text-align: center;

	font-weight: 400;
	letter-spacing: 0.1rem;
	font-size: 1rem;
	border-radius: 2rem;

	color: #fbf4e4;
	border: 3px solid rgb(var(--ccBlue));
	background-color: rgb(var(--ccRed));
}
.button:hover {
	font-weight: 700;
	letter-spacing: 0.09rem;
	text-decoration: underline;
}

/* "readmore" BUTTONs */
.readMORE,
.readMORE:active,
.readMORE:visited {
	font-size: 1rem;
	letter-spacing: 0.056rem;
	font-style: italic;

	background-color: transparent;
	border-bottom: 1px solid;
	margin: 0 3px;
	cursor: pointer;
}
.readMORE:focus,
.readMORE:hover {
	font-weight: 500;
	letter-spacing: 0.02rem;
	border-bottom: 2px solid;
}

/* "breadcrumb" BUTTONs */
.breadcrumb,
.breadcrumb:active,
.breadcrumb:visited {
	font-weight: 500;
	font-size: 1rem;
	letter-spacing: 0.05rem;
	font-style: normal;

	background-color: transparent;
	border-bottom: 1px solid;
	margin: 0 5px;
	cursor: pointer;
}
.breadcrumb:focus,
.breadcrumb:hover {
	background-color: rgba(var(--ccYellow), 0.8);
	border-bottom: 2px solid;
}
.breadcrumb:first-child {margin: 0 5px 0 0;}

/* ===== LIST ===== */
/* (related to "h1" and "p") */
.listBOX :where(h6, ol, ul) {
	padding-left: 3vw;
	padding-right: 3vw;
}
.listname {margin-bottom: 0.5rem;}

ol, ul {
	font-size: 1rem;
	list-style-position: outside;
}

._extraspace li:not(:last-child) {
	margin-bottom: 0.7rem;
}
	/* -- extra space between list-points */
ol>section,
ul>section {height: 1rem;}

ul {list-style-type: square;}
ul>li {margin-left: 1.5rem;}

	/* -- customized number style of ordered list */
ol {
	list-style: none;
	counter-reset: nums;
	margin-left: 2.8rem; /* set as the list-style-position */
}
ol>li {counter-increment: nums;}

ol>li:before {
	content: counter(nums)".";
	font-family: var(--spFont);
	font-size: 0.9rem;
	font-weight: 600;

	display: inline-block;
	width: 1.5rem;
	text-align: right;
	margin-right: 0.8rem;
	margin-left: -2.4rem;
}

/* ===== CLASSes for positioning ===== */
._center {
	margin-left: auto;
	margin-right: auto;
}
._flexcenter {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-items: center;
}
._sidePADDING {
	padding-left: 10px;
	padding-right: 10px;
}
._note {
	border-top: 2px solid rgb(var(--ccBlue));
	border-bottom: 2px solid rgb(var(--ccBlue));
	text-align: left;
	padding: 0.6rem 0.9rem;
	font-weight: 400;
}

/* ===== SUBPAGE TITLE @ <header> ===== */
.subpageTITLE {text-align: center;}
.subpageTITLE :where(._xsmall, ._small, ._large) {line-height: 1;}

.subpageTITLE ._xsmall {
	font-size: 6vw;
}
.subpageTITLE ._small {
	font-size: 11vw;
}
.subpageTITLE ._large {
	font-size: 22vw;
	letter-spacing: normal;
}

/* == FOOTER == */
#homePAGE .foot,
#articPAGE .foot,
.subPAGE .foot {
	text-align: center;
	padding-top: 250px;
	padding-bottom: 200px;
}
.foot p,
.foot span {
	font-weight: 300;
	font-size: 0.8rem;
}

	/* social media LINK-ICONs @ <footer> */
.svgICON {
	height: 40px;
	width: 40px;
}
.socialLINK button {margin-left: 20px;}
.socialLINK button:first-child {margin-left: 0;}

/* ===== MINI BRAND-LOGO @ end of paragraph ===== */
.miniLOGO {
	width: 20px;
	height: 20px;
	display: inline;
	vertical-align: text-top;
}

/* ===== INFO-BOX w/svg icon on left ===== */
._extraINFO {
	display: block;
	margin: 0 0.5rem;
	padding: 1rem;
	background-color: none;
}
.infoICON {
	width: 1.3rem;
	height: 1.3rem;
	display: inline-block;
	float: left;
	vertical-align: baseline;
	margin-bottom: -0.3rem;
}
.infoTEXT {margin-left: 1.8rem;}

/* -------------------------------------------- */
/*  ----- (((((( LANDSCAPE < 768px )))))) ----- */
/* -------------------------------------------- */
@media only screen and (orientation:landscape) {

	.subpageTITLE ._xsmall {font-size: 1.2rem;}
	.subpageTITLE ._small {font-size: 3rem;}
	.subpageTITLE ._large {font-size: 6rem;}

}

/* ---------------------------------------------------- */
/*  ----- (((((( TABLET :: screen => 768px )))))) ----- */
/* ---------------------------------------------------- */
@media only screen and (min-width: 768px) {

	.subpageTITLE ._xsmall {font-size: 2rem;}
	.subpageTITLE ._small {font-size: 4rem;}
	.subpageTITLE ._large {font-size: 8rem;}

	._sidePADDING{
		padding-left: 20px;
		padding-right: 20px;
	}

	/* ===== FOOTER ===== */
	.subPAGE .foot {
		text-align: right;
		padding-right: 50px;
	}

}