/* colors: 1- #734b5e  2- #c99da3  3- #ffe19c  4- #edffd9  5- #69a197
   analogs:   #734B5E     #734C4B     #73604B     #734B72     #604B73
   tetrad:    #734B5E     #72734B     #4B7360     #4C4B73
*/
html {
	background: #734b5e;
	color: #edffd9;
	font-family: 'Noto Sans';
}
body {
	padding-top: 1em;
	@media screen and (max-width: 940px) {
		padding-left: 20px;
		padding-right: 20px;
	}

	@media screen and (max-width: 400px) {
		padding-left: 12px;
		padding-right: 12px;
	}
	max-width: 900px;
	margin-left: auto;
	margin-right: auto;
}

header {
	text-align: center;
	margin-bottom: 1em;
}
nav {
	@media screen and (max-width: 480px) {
		text-align: center;
	}
}

img {
	max-width: 100%;
}

.top_bnr img {
	vertical-align: middle;
	height: 160px;
	width: 160px;
	@media (min-width: 600px) {
		padding-right: 1em;
	}
	@media screen and (max-width: 600px) {
		display:block;margin:0 auto;
	}
}

.top_bnr {
	@media screen and (max-width: 400px) {
		font-size: 1.7em;
	}
	@media screen and (max-width: 340px) {
		font-size: 1.5em;
	}
	font-size: 2em;
}

.p88x31 img {
	max-width: 88px;
	width: 88px;
	max-height: 31px;
	height: 31px;
	padding-right: 4px;
}
hr, .hl3 { color: #c99da3; }
.hl5 { color: #69a197; }
.hl4 { color: #faa6ff; }

a {
	color: #edffd9;
	text-decoration-style: dotted;
	text-decoration-thickness: 0.05em;
	text-underline-offset: 0.1em;
}

a:hover {
	text-decoration-style: dashed;
}

nav a:not(:first-child) { 
	padding-left: 0.4em;
	margin-left: 0.4em;
	border-left: 1px solid #c99da3;
}

.blog-item, .blog-item+p {
	margin-bottom: 0;
}

.blog-item+p, .blog-item+p+p {
	margin-top: 0;
}

.footnote-separator {
	border: 0;
	border-top: 0.05em dashed;
}

.quote::before, 
.alert-note::before, 
.alert-important::before, 
.alert-warning::before {
	font-family: 'Font Awesome 6 Solid';
	font-style: normal;
	font-weight: 900;
	margin-left: -1.4em;
	margin-bottom: -1.2em;
	width: 1.3em;
	display: block;
}

.quote, .alert-note, .alert-important, .alert-warning {
	font-style: oblique;
	padding-left: 1.5em;
}

.quote::before {
	content: "\f10d";
	color: #3be9e4;
}
.quote { 
	color: #95e9e7;
}

.alert-note::before {
	content: "\f05a";
	color: #00a7e1;
}
.alert-note {
	color: #99cee1;
}
.alert-important::before {
	content: "\f06a";
	color: #A288E3;
}

.alert-important {
	color: #bfb0e3;
}

.alert-warning::before {
	content: "\f071";
	color: #FF9B42;
}
.alert-warning{
	color: #ffcea3;
}

.out-link::before {
	font-family: 'Font Awesome 6 Solid';
	padding-right: 0.3em;
	content: "\f7a2";
	text-decoration: none;
	display: inline-block;
}

code {
	background-color: rgba( 0,0,0,0.3);
	padding: 0.1em 0.4em 0.1em 0.4em;
	border-radius: 0.3em;
}

pre {
	background-color: rgba( 0,0,0,0.3);
	padding: 0.5em 1em 0.5em 1em;
	border-radius: 0.3em;
	overflow-y: auto;
	overflow-x: scroll;
}

.no-rmenu {
	pointer-events: none;
	user-select: none;
}

/* Input style */
input {
	border: 1px solid #c99da3;
	background: transparent;
	color: #edffd9;
}

input[type="button"] {
	border: 1px solid #e3c0c5;
	background: #a17087; 
	color: #edffd9;
}

input[type="button"]:active {
	border: 1px solid #c99da3;
	background: #976d81;
}

input:disabled {
	border: 1px dashed #c99da3;
	color: #c99da3;
	user-select: none;
}