@import url('https://fonts.googleapis.com/css?family=Play:400');

:root {
	--dark-tomato-color: #c6c6c6;
	--dark-tomato-alt-color: #cccccc;
	--dark-tomato-accent-color: #be2424;
	--dark-tomato-active-color: #ffffff;
	--dark-tomato-background: #111111;
	--dark-tomato-panel-background: #202020;
	--dark-tomato-container-background: #0a0a0a;
	--dark-tomato-shadow-color: 255, 255, 255;

	--light-tomato-color: #76838f;
	--light-tomato-alt-color: #cccccc;
	--light-tomato-accent-color: #2180de;
	--light-tomato-active-color: #ffffff;
	--light-tomato-background: #2b323a;
	--light-tomato-panel-background: #fff;
	--light-tomato-container-background: #f0f1f4;
	--light-tomato-shadow-color: 150, 150, 150;

	--tomato-font-size: 16px;
	--tomato-small-font-size: 14px;
	--tomato-width: 80%;

	--icon-home: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path d='M20 7.093l-3-3v-2.093h3v5.093zm4 5.907h-3v10h-18v-10h-3l12-12 12 12zm-10 2h-4v6h4v-6z'/></svg>");
	--icon-features: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path d='M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-.001 5.75c.69 0 1.251.56 1.251 1.25s-.561 1.25-1.251 1.25-1.249-.56-1.249-1.25.559-1.25 1.249-1.25zm2.001 12.25h-4v-1c.484-.179 1-.201 1-.735v-4.467c0-.534-.516-.618-1-.797v-1h3v6.265c0 .535.517.558 1 .735v.999z'/></svg>");
	--icon-screenshots: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='2 2 16 16'><path d='M11 7c-1.657 0-4 1.343-4 3a4 4 0 014-4v1z'/><path fill-rule='evenodd' d='M16.333 5h-2.015A5.97 5.97 0 0011 4a5.972 5.972 0 00-3.318 1H3.667C2.747 5 2 5.746 2 6.667v6.666C2 14.253 2.746 15 3.667 15h4.015c.95.632 2.091 1 3.318 1a5.973 5.973 0 003.318-1h2.015c.92 0 1.667-.746 1.667-1.667V6.667C18 5.747 17.254 5 16.333 5zM3.5 7a.5.5 0 100-1 .5.5 0 000 1zm7.5 8a5 5 0 100-10 5 5 0 000 10z' clip-rule='evenodd'/><path d='M4 5a1 1 0 011-1h1a1 1 0 010 2H5a1 1 0 01-1-1z'/></svg>");
	--icon-contact: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'><path d='M.05 3.555L8 8.414l7.95-4.859A2 2 0 0014 2H2A2 2 0 00.05 3.555zM16 4.697l-5.875 3.59L16 11.743V4.697zm-.168 8.108L9.157 8.879 8 9.586l-1.157-.707-6.675 3.926A2 2 0 002 14h12a2 2 0 001.832-1.195zM0 11.743l5.875-3.456L0 4.697v7.046z'/></svg>");
	--icon-wiki: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='1 0 16 16'><path d='M15.502 1.94a.5.5 0 010 .706L14.459 3.69l-2-2L13.502.646a.5.5 0 01.707 0l1.293 1.293zm-1.75 2.456l-2-2L4.939 9.21a.5.5 0 00-.121.196l-.805 2.414a.25.25 0 00.316.316l2.414-.805a.5.5 0 00.196-.12l6.813-6.814z'/><path fill-rule='evenodd' d='M1 13.5A1.5 1.5 0 002.5 15h11a1.5 1.5 0 001.5-1.5v-6a.5.5 0 00-1 0v6a.5.5 0 01-.5.5h-11a.5.5 0 01-.5-.5v-11a.5.5 0 01.5-.5H9a.5.5 0 000-1H2.5A1.5 1.5 0 001 2.5v11z' clip-rule='evenodd'/></svg>");
	--icon-toggle: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path d='M24 13.616v-3.232c-1.651-.587-2.694-.752-3.219-2.019v-.001c-.527-1.271.1-2.134.847-3.707l-2.285-2.285c-1.561.742-2.433 1.375-3.707.847h-.001c-1.269-.526-1.435-1.576-2.019-3.219h-3.232c-.582 1.635-.749 2.692-2.019 3.219h-.001c-1.271.528-2.132-.098-3.707-.847l-2.285 2.285c.745 1.568 1.375 2.434.847 3.707-.527 1.271-1.584 1.438-3.219 2.02v3.232c1.632.58 2.692.749 3.219 2.019.53 1.282-.114 2.166-.847 3.707l2.285 2.286c1.562-.743 2.434-1.375 3.707-.847h.001c1.27.526 1.436 1.579 2.019 3.219h3.232c.582-1.636.75-2.69 2.027-3.222h.001c1.262-.524 2.12.101 3.698.851l2.285-2.286c-.744-1.563-1.375-2.433-.848-3.706.527-1.271 1.588-1.44 3.221-2.021zm-12 2.384c-2.209 0-4-1.791-4-4s1.791-4 4-4 4 1.791 4 4-1.791 4-4 4z'/></svg>");
	--icon-source: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='1 0 15 15'><path d='M4 1h5v1H4a1 1 0 00-1 1v10a1 1 0 001 1h8a1 1 0 001-1V6h1v7a2 2 0 01-2 2H4a2 2 0 01-2-2V3a2 2 0 012-2z'/><path d='M9 4.5V1l5 5h-3.5A1.5 1.5 0 019 4.5z'/><path fill-rule='evenodd' d='M8.646 6.646a.5.5 0 01.708 0l2 2a.5.5 0 010 .708l-2 2a.5.5 0 01-.708-.708L10.293 9 8.646 7.354a.5.5 0 010-.708zm-1.292 0a.5.5 0 00-.708 0l-2 2a.5.5 0 000 .708l2 2a.5.5 0 00.708-.708L5.707 9l1.647-1.646a.5.5 0 000-.708z' clip-rule='evenodd'/></svg>");
	--icon-download: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'><path fill-rule='evenodd' d='M.5 8a.5.5 0 01.5.5V12a1 1 0 001 1h12a1 1 0 001-1V8.5a.5.5 0 011 0V12a2 2 0 01-2 2H2a2 2 0 01-2-2V8.5A.5.5 0 01.5 8z' clip-rule='evenodd'/><path fill-rule='evenodd' d='M5 7.5a.5.5 0 01.707 0L8 9.793 10.293 7.5a.5.5 0 11.707.707l-2.646 2.647a.5.5 0 01-.708 0L5 8.207A.5.5 0 015 7.5z' clip-rule='evenodd'/><path fill-rule='evenodd' d='M8 1a.5.5 0 01.5.5v8a.5.5 0 01-1 0v-8A.5.5 0 018 1z' clip-rule='evenodd'/></svg>");
	--icon-support: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='1 0 15 15'><path fill-rule='evenodd' d='M4 1h8a2 2 0 012 2v10a2 2 0 01-2 2H4a2 2 0 01-2-2V3a2 2 0 012-2zm0 1a1 1 0 00-1 1v10a1 1 0 001 1h8a1 1 0 001-1V3a1 1 0 00-1-1H4z' clip-rule='evenodd'/><path fill-rule='evenodd' d='M4.5 10.5A.5.5 0 015 10h3a.5.5 0 010 1H5a.5.5 0 01-.5-.5zm0-2A.5.5 0 015 8h6a.5.5 0 010 1H5a.5.5 0 01-.5-.5zm0-2A.5.5 0 015 6h6a.5.5 0 010 1H5a.5.5 0 01-.5-.5zm0-2A.5.5 0 015 4h6a.5.5 0 010 1H5a.5.5 0 01-.5-.5z' clip-rule='evenodd'/></svg>");
	--icon-check: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'><path fill-rule='evenodd' d='M15.354 2.646a.5.5 0 010 .708l-7 7a.5.5 0 01-.708 0l-3-3a.5.5 0 11.708-.708L8 9.293l6.646-6.647a.5.5 0 01.708 0z' clip-rule='evenodd'/><path fill-rule='evenodd' d='M1.5 13A1.5 1.5 0 003 14.5h10a1.5 1.5 0 001.5-1.5V8a.5.5 0 00-1 0v5a.5.5 0 01-.5.5H3a.5.5 0 01-.5-.5V3a.5.5 0 01.5-.5h8a.5.5 0 000-1H3A1.5 1.5 0 001.5 3v10z' clip-rule='evenodd'/></svg>");
	--icon-ttb: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='15 15 40 40'><path d='M40.62,22.35a2,2,0,0,1-1.91,2c-1.31.06-2.44-1.15-3.44-1.85.81,1.36,2.76,3.54,1.07,5S32.81,27,31.5,26.17c-1.31.81-3.23,2.37-4.56.64-.93-1.21.29-2.74,1-3.74-.86.61-1.77,1.52-2.92,1.3a2,2,0,0,1-1.63-2A17.23,17.23,0,0,0,15,36.1,17.27,17.27,0,0,0,31.58,54,17.29,17.29,0,0,0,49,37,17.1,17.1,0,0,0,40.62,22.35Z'/><path d='M30.2,16.75a6.57,6.57,0,0,1,1.44,1l.08.1a1.71,1.71,0,0,1,.28.45,1.11,1.11,0,0,1,.14-.29,4.15,4.15,0,0,1,1.66-1.26l.41-.23A25,25,0,0,1,35.57,11H31.7A25.9,25.9,0,0,0,30.2,16.75Z'/><path d='M25,16c.62,1,1.71,2.11,1.8,3.35s-.85,2.18-1.42,3.1c1.59-1.12,3.17-2.28,4.79-3.36,0,0,0,0,0,0h0Z'/><path d='M33.84,19.06h0v0h0l4.77,3.32-1-1.59C36.42,19.2,38.15,17.35,39,16,37.28,17,35.53,18,33.84,19.06Z'/><path d='M31.73,24.2c1.21.1,2.31,1.19,3.3,1.8h0l-3.11-5.17-3.34,4.78C29.54,25,30.53,24.1,31.73,24.2Z'/></svg>");
}

body[data-theme='dark'] {
	--tomato-color: var(--dark-tomato-color);
	--tomato-alt-color: var(--dark-tomato-alt-color);
	--tomato-accent-color: var(--dark-tomato-accent-color);
	--tomato-active-color: var(--dark-tomato-active-color);
	--tomato-background: var(--dark-tomato-background);
	--tomato-panel-background: var(--dark-tomato-panel-background);
	--tomato-container-background: var(--dark-tomato-container-background);
	--tomato-shadow-color: var(--dark-tomato-shadow-color);
}

body[data-theme='light'] {
	--tomato-color: var(--light-tomato-color);
	--tomato-alt-color: var(--light-tomato-alt-color);
	--tomato-accent-color: var(--light-tomato-accent-color);
	--tomato-active-color: var(--light-tomato-active-color);
	--tomato-background: var(--light-tomato-background);
	--tomato-panel-background: var(--light-tomato-panel-background);
	--tomato-container-background: var(--light-tomato-container-background);
	--tomato-shadow-color: var(--light-tomato-shadow-color);
}

::selection {
	color: var(--tomato-active-color);
	background: var(--tomato-accent-color);
}

* {
	font-family: Play, Arial, Sans-Serif;
	font-size: var(--tomato-font-size);
	-o-transition: font-size 1s;
	-moz-transition: font-size 1s;
	-webkit-transition: font-size 1s;
	transition: font-size 1s;

}

html,
body {
	margin: 0;
	padding: 0;
	color: var(--tomato-color);
	background: var(--tomato-container-background);
}

a {
	text-decoration: none;
	color: var(--tomato-accent-color);
	border-radius: 4px;
}

a:hover {
	color: var(--tomato-active-color);
	background: var(--tomato-accent-color);
}

.wrapper {
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-ms-flex-direction: column;
	-moz-flex-direction: column;
	-webkit-flex-direction: column;
	flex-direction: column;
	width: 100%;
}

.header {
	width: 100%;
	min-width: 600px;
	height: 100px;
	padding: 0;
	background: var(--tomato-accent-color);
	-moz-box-shadow: rgba(var(--tomato-shadow-color), .3) 0px 0px 8px;
	-webkit-box-shadow: rgba(var(--tomato-shadow-color), .3) 0px 0px 8px;
	box-shadow: rgba(var(--tomato-shadow-color), .3) 0px 0px 8px;
	z-index: 2;
}

.switcher {
	min-width: 50px;
	height: 100%;
	float: right;
	line-height: 100px;
	margin-left: 0;
}

.title {
	margin: 0 auto;
	width: var(--tomato-width);
	min-width: 600px;
}

.logo {
	float: left;
	position: relative;
	margin-left: 62px;
	padding: 10px;
}

.main-title {
	font-size: 188%;
	font-weight: bold;
	color: var(--tomato-active-color);
	padding-top: 20px;
	padding-bottom: 4px;
	margin-left: 267px;
}

.sub-title {
	font-size: 96%;
	color: var(--tomato-alt-color);
	margin-left: 269px;
}

.container {
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	position: relative;
	margin: 0 auto;
	width: var(--tomato-width);
	min-width: 600px;
	border: none;
	border-spacing: 0;
}

.left {
	width: 290px;
	background: var(--tomato-background);
	min-height: calc(100vh - 100px);
}

.right {
	width: 100%;
	margin-left: 20px;
}

.right-inner {
	display: inline-block;
	margin-top: 20px;
	width: 100%;
	background: var(--tomato-panel-background);
	box-shadow: rgba(var(--tomato-shadow-color), .2) 0px 1px 1px;
}

@media only screen and (max-width: 800px) {
	:root {
		--tomato-font-size: var(--tomato-small-font-size);
	}
	.container {
		display: block;
	}
	.left {
		width: 100%;
	}
	.left a.active::after {
		display: none;
	}
	.right {
		margin-left: 0;
	}
}

.switcher a,
.switcher a:hover {
	color: var(--tomato-active-color);
	background: var(--tomato-accent-color);
	margin: 0 20px 0 0;
	float: right;
	border-radius: 0;
}

.left a {
	color: var(--tomato-color);
	display: block;
	padding-left: 20px;
	height: 2em;
	line-height: 2em;
	white-space: nowrap;
	border-radius: 0;
}

.left a:hover {
	color: var(--tomato-active-color);
	background: rgba(255,255,255,0.05);
	-o-transition: background-color .3s, color .3s;
	-moz-transition: background-color .3s, color .3s;
	-webkit-transition: background-color .3s, color .3s;
	transition: background-color .3s, color .3s;
}

.switcher a::before,
.left a::before,
li::before {
	color: transparent;
	background: var(--tomato-active-color);
	margin-right: 8px;
	width: 1.2em;
	display: inline-block;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
	-webkit-mask-size: contain;
	mask-repeat: no-repeat;
	mask-position: center;
	mask-size: contain;
}

.left a::before {
	background: var(--tomato-color);
}

li::before {
	background: var(--tomato-color);
	opacity: 0.6;
}

.left a.active::before,
.left a:hover::before {
	background: var(--tomato-active-color);
}

.left a.active {
	font-weight: bold;
	color: var(--tomato-active-color);
	background: var(--tomato-accent-color);
}

.left a.active::after {
	content: "";
	position: absolute;
	left: 234px;
	border: 1em solid transparent;
	border-right-color: var(--tomato-container-background);
}

.switcher a.toggle::before {
	content: "\2699";
	-webkit-mask-image: var(--icon-toggle);
	mask-image: var(--icon-toggle);
}

.left a.home::before {
	content: "\2617";
	-webkit-mask-image: var(--icon-home);
	mask-image: var(--icon-home);
}

.left a.wiki::before {
	content: "\270D";
	-webkit-mask-image: var(--icon-wiki);
	mask-image: var(--icon-wiki);
}

.left a.features::before {
	content: "\2606";
	-webkit-mask-image: var(--icon-features);
	mask-image: var(--icon-features);
}

.left a.screenshots::before {
	content: "\23F7";
	-webkit-mask-image: var(--icon-screenshots);
	mask-image: var(--icon-screenshots);
}

.left a.support::before {
	content: "\26A0";
	-webkit-mask-image: var(--icon-support);
	mask-image: var(--icon-support);
}

.left a.download::before {
	content: "\2913";
	-webkit-mask-image: var(--icon-download);
	mask-image: var(--icon-download);
}

.left a.source::before {
	content: "\23F7";
	-webkit-mask-image: var(--icon-source);
	mask-image: var(--icon-source);
}

.left a.ttb::before {
	content: "\2604";
	-webkit-mask-image: var(--icon-ttb);
	mask-image: var(--icon-ttb);
}

.left a.contact::before {
	content: "\2709";
	-webkit-mask-image: var(--icon-contact);
	mask-image: var(--icon-contact);
}

li::before {
	content: "\2611";
	width: 1.1em;
	-webkit-mask-image: var(--icon-check);
	mask-image: var(--icon-check);
}

ul {
	list-style-type: none;
	padding-left: 0;
}

.footer {
	width: 100%;
	text-align: center;
	vertical-align: middle;
	padding: 20px 0 20px 0;
	margin-bottom: 20px;
}

.section-title {
	font-weight: bolder;
	font-size: larger;
	color: var(--tomato-accent-color);
	margin: 20px;
}

.section {
	margin: 0 20px 20px 20px;
}

.section-ss {
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-flow: row wrap;
	-moz-flex-flow: row wrap;
	flex-flow: row wrap;
	margin: 20px;
	text-align: center;
	font-size: 0;
}

.sshot {
	-ms-flex: 1;
	flex: 1;
	min-width: 410px;
	width: 50%;
	font-size: 1em;
	text-align: center;
}

.sshot a:hover {
	color: transparent;
	background: none;
}

.sshot img {
	border-radius: 4px;
}

.spacer {
	margin-top: 0.8em;
}

.centered {
	text-align: center;
}

.btc {
	font-size: 12px;
	color: #aaf;
}

.ssmall {
	font-size: 10px;
}