/** Tags **/
body {
	margin: 0;
	padding: 0;
	background-color: #f1f1f1;

	font: 400 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	color: #111;
	--primary: #d85da3;
}

a { color: #1757AB; text-decoration: none; }
a:visited { color: #1756a9; }
a:hover { color: #111; text-decoration: underline; }

img, iframe { max-width: 100%; }
pre { white-space: break-spaces; background: #f4f4f4; padding: 0.75em; }

#skip-to-content {
	position: absolute;
	top: 0;
	left: 0;
	background: var(--primary);
	padding: 0.2em;
	color: #fff;
}
#skip-to-content:not(:focus) {
	top: -40px;
}

.site-title, .page-title, h2 a { color: var(--primary) !important; }
h1:first-child {margin-top: 0;}

/** Make lists properly wrap around floated content **/
.page-content ul {
	list-style: outside disc;
	padding-left: 1em;
}
.page-content ul li {
	position: relative;
	left: 1em;
	padding-right: 1em;
}

/** Layout **/

body {
	max-width: 1000px;
	margin: 0 auto;
	padding: 0 15px;
}
.wrapper {
	display: flex;
}
main { flex-grow: 1; }
.sidebar {
	width: 230px;
	flex-shrink: 0;
	padding-left: 2em;
}
.site-header {
	border: 0;
	margin-bottom: 0.5em;
}
.small-width-only { display: none; }
@media (max-width: 1000px) {
	.small-width-only { display: block; }
	.full-width-only { display: none; }
	body {
		max-width: 800px;
	}
	.wrapper {
		flex-direction: column;
	}
	.sidebar {
		width: 100%;
		padding-left: 0;
	}
	.service-list {
		display: flex;
		margin-bottom: 0;
		justify-content: space-around;
		flex-wrap: wrap;
	}
	.toss-label { display: none; }
}
@media (max-width: 600px) {
	.site-header .wrapper {
		flex-direction: column;
	}
	.post-body {
		flex-direction: column;
	}
}
.site-header a {
	color: #111;
}
.site-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.site-nav > ul {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;

	background: #00000014;
	border-radius: 5px;
}
.site-nav > ul > li {
	position: relative;
	flex-grow: 1;
}
.site-nav > ul > li > a {
	padding: 10px;
	display: block;
	text-align: center;
}
.site-nav > ul > li > a:not([href]) {
	cursor: default;
}
.site-nav > ul > li:hover > a {
	background: #f9f9f966;
}
.site-nav > ul > li > .submenu {
	display: flex;
	position: absolute;
	top: 100%;
	background: white;
	padding-left: 0;
	background: #f9f9f9;
	box-shadow: 0 3px 3px rgba(0,0,0,0.2);
	z-index: 1;
}
.site-nav > ul > li > .submenu a {
	display: flex;
	padding: 0.5em 1em;
	border-bottom: 1px dotted #ccc;
	flex-grow: 1;
}
.site-nav > ul > li > .submenu a:hover {
	background: -webkit-linear-gradient(#f9f9f9,#e5e5e5);
	text-decoration: none;
}
.site-nav > ul > li:not(:hover):not(:focus-within) > .submenu{
	display: none;
}
.submenu label {
	padding-left: 0.3em;
	font-size: 0.9em;
}
.submenu li {
	display: flex;
}

.site-title {
	font-weight: bold;
	font-size: 1.6em;
	padding: 5px 0;
	display: inline-block;
}
.site-footer {
	padding: 30px 0;
}

/** Pages **/
.tags a {
	display: inline-block;
	background: #dedede;
	font-size: smaller;
	padding: 0.3em;
	border-radius: 5px;
	margin-bottom: 0.1em;
}

.page-content {
	background: white;
	padding: 1em;
}

/** Post lists **/
.post-list-header {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
}
.post-list-heading { font-weight: normal; margin-bottom: 0; }
.post-list { list-style: none; padding-left: 0;}
.post-list h2 { margin-top: 0; margin-bottom: 0; }
.post-list > li {
	clear: both;
	background: white;
	padding: 1em;
	margin-bottom: 30px;
	border-radius: 5px;
}

/** Homepage **/

.service-list {
	list-style: none;
	padding-left: 0;
}
.service-list h2 {
	font-size: 1.2em;
	font-weight: bold;
	margin-bottom: 0.3em;
	margin-top: 0;
}
.service-list li {
	flex-basis: 230px;
	margin-bottom: 1em;
}
.service-list li > a {
	color: inherit;
	display: block;
}
.service-list li > a:hover {
	text-decoration: none;
	box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.5);
}
.service {
	padding: 0.5em;
	background: white;
}
.service svg {
	width: 25px;
	height: 25px;
	vertical-align: middle;
}
@media (max-width: 500px) {
	.service-list li {
		flex-grow: 1;
		margin-bottom: 10px;
	}
}

.rss-link svg {
	width: 20px;
	height: 20px;
	pointer-events: none;
	vertical-align: middle;
}

.post-meta {
	color: #666;
}

.svg-icon {
	fill: #5a6c6d;
}

/* HOME */

#logo-mm { fill: #2398ee; }
#logo-heart { fill: #db6e81; }

/* OTHER */
.thumbnail {
	flex-shrink: 0;
	width: 300px;
	padding-right: 1em;
	float: left;
}
.warning, .important, .tip {
	display: block;
	border-radius: 10px;
	padding: 0.5em;
	margin: 1em 0;
	border: 2px solid;
	border-color: #0002;
}
.warning {
	background: #fffbeb;
	border-color: #ffdd57;
}
.important { background: #e0eff7; }
.tip { background: #dafbda; }
.warning p, .important p, .tip p {
	margin: 0;
}
.toss-form { margin: 1em 0; }
.toss-label { font-size: small; }
.toss-input {
	background: url(/images/toss.svg) no-repeat;
	background-size: 30px;
	background-origin: padding-box;
	background-position: 98% 50%;
	background-color: white;
	padding: 0.5em;
	width: 100%;
	box-sizing: border-box;
	max-width: 350px;
}
.aside-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
}
.aside-footer > .toss-form {
	flex-basis: 400px;
	flex-grow: 1;
	margin: 0.5em 0;
}
/* For post content */
.float-left {
	float: left;
	padding: 1em;
	padding-left: 0em;
}
.clear {
	clear: both;
}
h1 {font-size: 1.7em;}
h1,h2,h3,h4,h5,h6 {clear: both;}

#toc > ul {
	padding-left: 0;
	font-size: 95%;
}

#toc li {
	padding-bottom: 0.2em;
}