/* 
*
*	dumbtype.com-2.0
*	common.css that is the common styles in all pages.
*
*/

@import url("https://use.typekit.net/bbu3gas.css");
@import url("../shadowbox/shadowbox.css");

* {
	margin: 0px;
	padding: 0px;
	text-decoration: none;
	list-style: none;
	font-size: inherit;
	font-weight: normal;
	box-sizing: border-box;
}

/* ----------------------------------------- */
/* Common element defaults */
/* ----------------------------------------- */
html {
	width: 100%;
	height: 100%;
	font-family: "corporate-a", serif;
	font-size: 14px;
	font-weight: 400;
}

/* Body as the root container of all contents. */
body {
	width: 100%;
	min-width: 1000px;
	max-width: 1400px;
	min-height: 100vh;
	margin: auto;
	padding: 6rem;
	padding-top: 20px;
}

/* Cancel button default styles. */
button { all:unset; }
em { all:unset; font-style:italic; font-weight:inherit; }

/* Default the color of anchor is inherit. */
a, a:visited, a:active { color:inherit; word-break: break-all; }

/* ----------------------------------------- */
/* Common Contents */
/* ----------------------------------------- */
/* header is including fixed global menu. */
header {
	position: fixed;
	font-size: 1rem;
	line-height: 1.7em;
}

/* the main element is the root container of specific contents with padding-left as 300px. */
main { 
	padding-left: 300px; 
	min-height: calc(90dvh - 1rem); 
}

/* main > h1 is common title container min height is 100px. */
main > h1 { 
	font-size:35px;
	letter-spacing: 0.02em; 
	line-height: 1.1em; 
	height:fit-content;
	min-height: 100px;
	padding-bottom:1rem;
}

/* All 'DUMBTYPE' title styles */
h1 > a { color: #000; opacity: 0.5; transition: opacity 0.2s; }
h1 > a:hover { opacity: 1.0; }

/* main > nav is common submenu container that the min-height is 100px */
main > nav {
	width:100%;
	height:fit-content;
	min-height: 100px;
	padding-bottom:1rem;
}

/* article is common container of articles. */
main > article {
	line-height: 1.7em;
	padding-bottom: 2rem;
}
main > article h2 { font-weight:bold; }
main > article p { margin-bottom: 1.5em; }
main > article a:not(:has(> img)) { opacity: 0.5; transition: opacity 0.1s; }
main > article a:hover { opacity: 1.0 }

/* footer */
footer {
	width: 100%; 
	padding-left: 300px; 
}

/* copyright in footer */
footer > small { 
	display: inline-block; 
	width:100%;
	height: 1rem; 
	text-align: left; 
	font-size: 0.7rem; 
}

/* Global Menu anchors are color interaction. */
.main-menu a { transition: color 0.2s; }
.main-menu a:hover { color: #900; }
.main-menu .current-menu-item a,
.main-menu .current-page-ancestor a { color: #900; }

/* MUPreloading default style. */
[data-mu-preloading] { visibility: none; opacity:0; transition: opacity 0.3s; }
[data-mu-preloading='done'] { visibility: inherit; opacity:1; }

/* Common Responsive */
.pc { display: inherit; }
.mobile { display: none; }

/* ----------------------------------------- */
/* Mobile */
/* ----------------------------------------- */
@media screen and (max-width: 960px) {
	body { width: 100%; min-width:inherit; max-width:inherit; padding: 2rem 1rem; }
	header { display: none; }
	main { padding-left: 0rem; padding-right: 0rem; }
	main > h1 { font-size:28px; min-width:inherit; }
	main > nav { height:100px; }
	main > article { width:100%; }
	footer { padding-left:0; }
	footer > small { width: 100%; padding-left: 0px; }
	.pc { display: none; }
	.mobile { display: inherit; }
}