:root {
	--var-body-bg: #fff;
	--var-body-fc: #333;
	--var-header-bg: #eee;
}

@media (prefers-color-scheme: dark) {
	:root {
		--var-body-bg: #333;
		--var-body-fc: #fff;
		--var-header-bg: #666;
	}
}

body {
	font: 18px/1.5 sans-serif;
	padding: 0;
	margin: 0;
	background-color: var(--var-body-bg);
	color: var(--var-body-fc);
   height: 100%;
}



.header {
	padding: 1rem;
	background-color: var(--var-header-bg);
	border-bottom: 0.1rem solid var(--var-body-fc);
}

a {
   text-decoration: none;
   color: var(--var-body-fc);
   position: relative;

}

a::before {
   content: '';
   position: absolute;
   width: 100%;
   height: 2px;
   background-color: var(--var-body-fc);
   bottom: 0;
   left: 0;
   transform-origin: right;
   transform: scaleX(0);
   transition: transform .5s ease-in-out;
}

a:hover::before {
   transform-origin: left;
   transform: scaleX(1);
}



.tho-column {
	columns: 2;
	column-gap: 50px;
}