:root:not([data-theme=dark]), [data-theme=light] {
	--background-color: #fafafa;
	--muted-border-color: #e4e4e4;
	--content-margin:	16px;
	--primary-hover-underline: #08769b66;
	--primary-transparent-underline: #08769b00;
	--typography-spacing-vertical: .75em;
}

a {
	transition: background-color var(--transition),color var(--transition),text-decoration var(--transition),box-shadow var(--transition), text-decoration-color var(--transition);
	text-decoration-color: var(--primary-transparent-underline);
}

a:active, a:focus, a:hover {
	--color: var(--primary-hover);
	--text-decoration: underline;
	text-decoration-line: underline;
	text-decoration-thickness: .5px;
	text-underline-offset: .15em;
	text-decoration-color: var(--primary-hover-underline);
}

h1, h2, h3, h4, h5, h6 {
	--font-weight: 500;
	margin-top: var(--typography-spacing-vertical);
	margin-bottom: calc(var(--typography-spacing-vertical) / 2);
}

h1 {
	--typography-spacing-vertical: 1.5rem;
}

h2 {
	--margin-top: 2rem;
}

ul li {
	list-style: "—";
	padding-left: .25em;
}

hr {
	margin: 1rem 0;
}

body>header {
	padding: 16px 0;
}

.content {
	margin: 0 auto;
	max-width: 920px;
	padding-left: var(--content-margin);
	padding-right: var(--content-margin);
}

@media (min-width:  768px) {
	.content {
		margin-left: auto;
		margin-right: auto;
	}
}

.content--task {
	margin-top: 5vh;
}

.content--default {
	margin-top: 5vh;
}

.header {
	margin: 0 auto;
	max-width: 920px;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	padding-left: var(--content-margin);
	padding-right: var(--content-margin);
}

@media (min-width:  768px) {
	.header {
		margin-left: auto;
		margin-right: auto;
	}
}

.header_logo {
	margin-right: 16px;
}

.header__menu {
	display: flex;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
	overflow-x: auto;
}

@media (max-width:  768px) {
	.header__menu {
		min-width: 560px;
	}
}

ul.header__menu li {
	list-style: none;
}

.menu__item {
	margin-right: 16px;
}

.menu__item:last-child {
	margin-right: 0;
}

.menu__link {
}

.todo {
	background: #f0f;
	color: #fff;
	padding: 16px;
}

.lifehack {
	max-width: 920px;
}

.lifehack__item {
	background: #e8edef;
	padding: 1rem;
	border-radius: .5rem;
	margin: 1.5rem 0;
}

.danger {
	max-width: 920px;
}

.danger__item {
	background: #efebe8;
	padding: 1rem;
	border-radius: .5rem;
	margin: 1.5rem 0;
}

.source {
	max-width: 920px;
	margin: 1.5rem 0;
}

.tags {
	--font-size: 1.25rem;
	--typography-spacing-vertical: 0.5rem;
	margin: 1.5rem 0;
}

.tags__item:before {
	content: "#";
	opacity: .5;
	color: var(--primary-hover);
	margin-right: .1em;
}

.tags__gallery {
	display: flex;
	flex-wrap: wrap;
}

.tags__item {
	margin-right: 16px;
}

.tags__item:last-child {
	margin-right: 0;
}

.row {
	display: flex;
	flex-direction: column;
	width: 100%;
	margin-bottom: var(--typography-spacing-vertical);
}

@media (min-width:  768px) {
	.row {
		flex-direction: row;
	}
}

.row > div:not(:last-child) {
	margin-right: 1.5rem;
}

.column--right {
	order: 2;
}

.column--1-3 {
	width: 100%;
}

@media (min-width:  768px) {
	.column--1-3 {
		width: calc(100% / 3);
	}
}

.column--2-3 {
	width: 100%;
}

@media (min-width:  768px) {
	.column--2-3 {
		width: calc(100% / 3 * 2);
	}
}

.column--1-2 {
	width: 100%;
}

@media (min-width:  768px) {
	.column--1-2 {
		width: calc(100% / 2);
	}
}

.skill h2 {
	--font-size: 1.25rem;
	--typography-spacing-vertical: 1.5rem;

	margin-top: var(--typography-spacing-vertical);
	margin-bottom: 0;
}

.skill>ul {
	padding-left: 0;
}

.skill ul li {
	list-style: none;
}

.footer {
	opacity: .75;
	margin-bottom: 1.5rem;
}

.footer p {
	font-size: .85rem;
}

@media (min-width: 768px) {
	.row {
		margin-left: auto;
		margin-right: auto;
	}
}

.index .tech-post {
	padding-left: 0;
}

.last-tech {
	background: #eff5f3;
	padding: 1rem;
	border-radius: .5rem;
	margin: 1.5rem 0;
}

.last-tech__header {
	margin-top: 0;
	margin-bottom: 1rem;
}

.last-tech__tags {
	margin-bottom: 0;
}

.tech-post__item {
	list-style: none;
	line-height: 1.2;
	margin-bottom: .7em;
}

.tech-post__item sup {
	opacity: .75;
}

.tech-post__item--important a {
	font-weight: 600;
}

.example {
	font-style: italic;
	margin-left: var(--typography-spacing-vertical);
	margin-bottom: var(--typography-spacing-vertical);
}

figure figcaption {
	padding-left: 50%;
	font-size: 85%;
	font-style: italic;
}

.label {
	display: inline-block;
	transform: translateY(-50%);
	color: var(--primary-hover);
	background: #d8ece4;
	padding: 0.05rem 0.25rem 0.15rem 0.25rem;
	border-radius: .25rem;
	line-height: 0.8;
	font-size: 60%;
}