// @import "../template/mixins";
// @import "../template/settings";
// $heading2Size: 101px;
// @import "../template/theme";

@import url('https://free.bboxtype.com/embedfonts/?family=FiraSans:300,600');
@font-face {
	font-family: 'Fira Code';
	src: url('../../lib/font/fira-code/FiraCode-Regular.otf');
	font-weight: 400;
}
@font-face {
	font-family: 'Fira Code';
	src: url('../../lib/font/fira-code/FiraCode-Bold.otf');
	font-weight: 700;
}


body {
	font-family: 'Fira Sans';
	margin: 0;
	line-height: 1.2em;
	font-size: 1.5vw;
}

section {
	min-height: 100vh;
	width: 100vw;
	padding: 0 !important;
}

.layout {
	min-width: 100vw;
	max-width: 100vw;
	min-height: 100vh;
	max-height: 100vh;
	overflow: hidden;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr 12fr;
	background: linear-gradient(to right, #cccccc 0%, #cccccc 50%, #ffffff 50%, #ffffff 100%);

	&-title {
		grid-column-end: span 2;
		padding: 3.5vw calc(50% + 4vw) 0.5vw 4vw;
		line-height: 1.15em;
	}

	&-content-left {
		overflow: auto;
		padding: 4vw;

		*:first-child {
			margin-top: 0
		}
	}

	h2 {
		margin: 0;
	}

	ul {
		list-style-type: disc;
		padding-left: 0;
		ul {
			padding-left: 2vw;
		}
	}

	pre {
		margin-left: -4vw;
		padding-left: 4vw;
		line-height: 1.2em;
		position: relative;
		overflow: hidden;

		&::before {
			content: attr(data-sourcefile);
			position: absolute;
			top: .3em;
			left: calc(1.5vw - 100%);
			width: 100%;
			text-align: right;
			transform: rotate(-90deg);
			transform-origin: 100% 50%;
			color: #cccccc;
		}
	}

	code {
		font-size: 0.9em;
		font-family: 'Fira Code';
	}

	code.hljs {
		padding: .3em 0;
	}
}