/* Fonts */

@font-face {
	font-family:Alegreya;
	src:url('fonts/AlegreyaSans-Regular.ttf')
}
@font-face {
	font-family:Alegreya;
	font-weight:bold;
	src:url('fonts/AlegreyaSans-Bold.ttf')
}
@font-face {
	font-family:Alegreya;
	font-style:italic;
	src:url('fonts/AlegreyaSans-Italic.ttf')
}
@font-face {
	font-family:Alegreya;
	font-weight:100;
	src:url('fonts/AlegreyaSans-Light.ttf')
}
@font-face {
	font-family:Alegreya;
	font-weight:300;
	src:url('fonts/AlegreyaSans-Medium.ttf')
}

/* Basic sizes */

html {
		font-size:8px;
	}
:root {
	--background-all: white
}
/* Animations */

@keyframes fadeIn {
	0% {
		transform: translateY(-20px);
		opacity: 0.0;		
	}
	60% {
		transform: translateY(0);	
	}
	80% {
		opacity: 1;	
	}
	100% {
		transform: translateY(0);
		opacity: 1;
	}		
}
@keyframes moveAway {
	0% {
		transform: translateX(-50vw)
	}
	100% {
		transform: translateX(-300vh)
	}		
}
@keyframes moveHalfway {
	100% {
		transform: translateX(-50vw)
	}		
}
@keyframes moveIn {
	0% {
		transform: translateX(300vh)
	}
	100% {
		transform: translateX(0vh)
	}		
}
/* General */

body {
	font-family:Alegreya;
	display:flex;
	flex-direction:column;
	justify-items:center;
	background:var(--background-all);
	margin:0;
}
a, .help_link {
	color:royalblue;
	text-decoration:none;
	transition:.3s;
	cursor:pointer
}
a:hover, .help_link:hover {
	text-decoration:underline;
	color:coral
}
.faded-in {
	animation: fadeIn 1.5s forwards ease-in-out;
}

/* Menu */

#menu_bar {
	box-sizing: border-box;
	width: 100%;
	min-height:8.75rem;
	position:fixed;
	top:0px;
	left:0px;
	transition: .3s;	
	z-index : 400;
	padding:10px 0 10px 0;
}
#menu_bar ul {
	display:flex;
	float:right;
	justify-content:space-evenly;
	padding:0;
	width:fit-content;
	margin-right:5px
}
#menu_bar ul li, .dl_dark {
	list-style-type: none;
	font-size: calc(12px + .75rem);
	cursor: pointer;
	color:white;
	transition:.4s;
	font-weight:300;
	padding:2rem;
	transition:.2s;
	opacity:.8;
}
#menu_bar ul li:hover, .dl_dark:hover {
	opacity:1
}

.dl, .dl_dark {
	background:royalblue;
	border-radius:4px;
	font-weight:bold;
	opacity:.98 !important
}
.dl:hover, .dl_dark:hover {
	background:coral;
	color:white !important
}

/* Intro */

#mega_intro {
	box-sizing: border-box;
	width:100%;
	background: #333;
	margin:0;
	border-radius: 0 0 50vh 50vh / 0 0 10vh 10vh;
	padding:65px 8.75rem;
	box-shadow:0 10px 15px 10px #555555;
	-webkit-box-shadow: 0 10px 15px 10px #555555;
	-moz-box-shadow: 0 10px 15px 10px #555555;
	-o-box-shadow: 0 10px 15px 10px #555555;
	display:grid;
	grid-template-columns:18.5rem auto auto
}
.page_title {
	font-size:11.25rem;
	font-weight:bold;
	color:white;
	grid-column: 2/span 2
}
.page_subtitle {
	font-size:calc(9px + .75rem);
	font-weight:100;
	color:white;
	grid-row:2;
	margin-top:-15px
}
#logo {
	width:16rem;
	grid-row: 1/span 2;
	filter:drop-shadow(0 0 2rem #555)
}
.intro_text {
	color:white;
	font-size:3rem;
	text-align:left;
	font-weight:100;
	grid-column:2;
	padding:10rem 2rem 2rem 0;
	max-width:56rem;
	min-width:22rem
}
strong {
	font-weight:300
}

.page_subtitle a {
	color:white;
}
.page_subtitle a:hover {
	text-decoration:none;
	color:coral
}
.download_main{
	padding-top:10rem;
	display:flex;
	flex-direction:column;
	justify-content:center;
}
.download {
	text-align:center;
	background:white;
	border-radius:5px;
	font-weight:300;
	padding:1.1rem;
	min-height:3.5rem;
	line-height:3.5rem;
	cursor:pointer;
	transition:.3s;
	margin: 0 auto;
	margin-top:1.1rem;
	font-size:calc(10px + 1rem);
}
.counter {
	font-size:calc(8px + .4rem);
	text-align:center;
	font-weight:bold;
	box-sizing:border-box;
	color:rgb(255,160,40);
	margin:5px;
	min-height:.9rem;
	line-height:.9rem;
	padding-left:.55rem;
	padding-right:.55rem;
	width:100%;
}
.download:hover {
	background:royalblue;
	color:white
}
#social_buttons {
	margin-top:8rem;
	grid-column:1/span 3;
	display:flex;
	justify-content:center;
	transform:translateY(35px)
}
#social_buttons img {
	display:block;
	margin:2rem;
	cursor:pointer;
	width:5rem;
	height:5rem;
	opacity:.8;
	transition:.2s
}
#social_buttons img:hover {
	opacity:1
}

/* News */

#news {
	display:grid;
	grid-template:60% auto;
	min-width:fit-content;
	margin: 5rem auto -3rem auto;
	grid-column:1/span 3;
	font-size:calc(10px + 1rem);
	color:white;
	border-radius:1rem;
	border:1px grey solid;
	padding:2rem 2.2rem 1.2rem 2.2rem
}
.news_header {
	font-weight:300;
	color:coral
}
.news_features {
	grid-column: 1;
	margin-right:1rem;
	font-size:calc(7px + 1rem);
	margin-top:-1rem
}
.news_download_container {
	grid-column: 2;
	grid-row:1/span 2;
	display:flex;
	flex-direction:column;
	justify-content: center;
	text-align: left;
	padding-left:10rem
}
.news_download {
	font-size:calc(12px + .9rem);
	color: rgb(255,160,40);
	font-weight:300
}
.news_download:hover {
	text-decoration:underline;
	cursor: pointer
}
/* Main features */

#main_features {
	font-size:5rem;
	color:black;
	font-weight:300;
	width:100%;
	overflow:hidden;
	margin-top:10rem;
	display:flex;
	overflow-x:hidden
}
#main_features > div {
	display:none
}
#main_features > div:first-child {
	display:grid;
	grid-template-columns:50vw 100vw;
}
#main_features img {
	max-height:75rem;
	width:auto;
	margin:auto;
	cursor:pointer;
	transition:.5s;
	border:1px solid #333;
	border-radius:8px;
}
#main_features img:hover {
	transform: translateX(-4rem);
}
.caption {
	margin:auto;
	padding:12rem;
	text-align:right
}
.slideshow {
	height:76rem;
	text-align:center;
}

/* Footer */

#footer {
	padding-bottom:5px;
	position:relative;
	bottom:0;
	text-align:center;
	width:100%;
	font-size:calc(8px + 0.48rem);
	background:#eee
}
#footer a {
	color:darkred;
	text-decoration:none
}
#footer a:hover {
	color:white
}


/* Features */

#features {
	box-sizing: border-box;
	background: #333;
	width:100%;
	margin:0;
	margin-top:6rem;
	padding:10px 20rem;
	font-size:calc(12px + 1rem);
	color:white;
	z-index: 4
}
h1 {
	padding-top:.6rem;
	margin-bottom:1rem;
	font-size:6rem;
	text-align:center
}
h2 {
	padding-top:.3rem;
	margin-bottom:1rem;
	font-size:3.8rem;
	text-align:center
}
h3 {
	border-bottom: 1px solid silver;
	font-size:4rem
}
h4 {
	font-size:2rem;
	text-align:center
}
h5 {
	border-bottom: 1px solid silver;
	font-size:3.14rem;
	margin-bottom:0;
	position:relative;
	width:100%
}
.upDate {
	font-weight: 100;
	font-size:2rem;
	position:absolute;
	right: 0px;
	bottom:2px
}
.help_table {
	display:grid;
	grid-template-columns: 40% auto;
	grid-gap:2em;
}
.help_command {
	text-align:left;
	font-weight:bold
}

code {
	font-size:110%;
	font-variant: small-caps
}

/* Reviews */

#reviews {
	box-sizing: border-box;
	width:100%;
	margin:0;
	margin-bottom:8rem;
	padding:10px 20rem;
	font-size:calc(8px + 1rem);
}
#reviews > div::before {
	content:'';
	display:block;
	width:11rem;
	background-image:url('icon.png');
	background-size:11rem;
	height:11rem;
	position:absolute;
	opacity:.3
}
#reviews > div {
	grid-template-columns: 35% 45% 20%;
	display:grid;
	grid-auto-flow:columns;
	font-size:calc(12px + .5rem);
	border-radius:6px;
	min-height:11rem;
	padding-left:11rem;
	margin-top:2rem;
	grid-gap:2px
}
#reviews > div > div {
	margin:.25rem;
	line-height:2.5rem;
	padding: 0 1.25rem;
	display: flex;
	align-items:center
}
#reviews > div > div:nth-child(1) {
	font-weight:bold;
	grid-column:1
}
#reviews > div > div:nth-child(2) {
	grid-column:3;
	text-align: right;
	justify-content:flex-end;
	font-size:calc(9px + .5rem)
}
#reviews > div > div:nth-child(3) {
	grid-column:2;
	grid-row:2;
	text-align: left;
	font-size: calc(9px + .5rem)
}
#reviews > div > div:nth-child(4) {
	grid-column:1/span 3;
	grid-row:1;
	font-size:calc(8px + .45rem);
}
#reviews > div > div:nth-child(5) {
	grid-column:1/span 3;
	line-height:2.6rem;
	border-top:1px solid #777;
	padding-top:1rem
}

/* Changelog */

#changelog {
	box-sizing: border-box;
	width:100%;
	margin:0;
	padding:10px 0px;
	font-size:calc(8px + .6rem);
	background:#eee;
	display:flex;
	flex-direction:column;
	align-items:center
}
#changelog > div {
	width:80%
}
#changelogwrapper {
	display: flex;
	flex-wrap:wrap;
}
#changelogwrapper > div:not(#filler) {
	width:30rem;
	margin: 1rem;
	flex-grow: 1
}
#filler {
flex-grow:3
}

/* Responsive design */

@media (max-width: 70em) {
	#reviews > div {
		grid-template-columns: auto auto;
	}
	#reviews > div > div:nth-child(4) {
		grid-column:1/span 2;
	}
	#reviews > div > div:nth-child(2) {
		grid-column:2;
		grid-row:3;
	}
	#reviews > div > div:nth-child(3) {
		grid-column:1;
		grid-row:3;
	}
}
@media (max-width: 59em) {
	html {
		font-size:6px
	}
}
@media (max-width: 53em) {
	#mega_intro {
		grid-template-columns:18.5rem 40rem auto
	}
	.page_subtitle {
		grid-column:2/span 2
	}
	#features {
		padding: 10px 18rem
	}
}
@media (max-width: 47em) {
	html {
		font-size:5px
	}
	.page_subtitle {
		margin-top:-5px
	}
	#features {
		padding: 10px 15rem
	}
}
@media (max-width: 37em) {
	html {
		font-size:4px
	}
	#menu_bar ul {
		float:none;
		position:relative;
		left:50%;
		transform:translateX(-50%)
	}
	.intro_text {
		grid-column:2/span 2;
		max-width:100%;
	}
	.download_main {
		grid-column:1/span 3;
	}
	#features {
		padding: 10px 8rem
	}
	#changelogwrapper > div:not(#filler) {
		width:50rem;
	}
}

@media only screen and (max-device-width: 768px) {
	#mega_intro {
		width:100%;
		grid-template-columns:20.5rem auto auto;
		margin:0;
		padding:0;
		padding-top:15rem;
	}
	a, .help_link {
		color:coral
	}
	.page_title {
		font-size:13.5rem;
	}
	.page_subtitle {
		font-size:4rem;
	}
	#logo {
		width:16rem;
		grid-row: 1/span 2;
		filter:drop-shadow(0 0 2rem #555);
		padding-left:2rem
	}
	.intro_text {
		color:white;
		font-size:5rem;
		text-align:left;
		font-weight:100;
		grid-column:1/span 3;
		max-width:100%;
		padding:10rem 4rem 0 4rem;
		box-sizing:border-box
	}
	.download {
		padding:3rem;
		min-height:7rem;
		line-height:7rem;
		cursor:pointer;
		transition:.3s;
		margin: 0 auto;
		font-size:6rem;
	}
	.counter {
		font-size:3.5rem;
		margin:5px;
		min-height:3.5rem;
		line-height:3.5rem;
	}
	#menu_bar li {
		font-size:4.5rem !important
	}
	#menu_bar ul {
		float:none;
		position:relative;
		left:50%;
		transform:translateX(-50%)
	}
	.download_main {
		grid-column:1/span 3;
	}
	#features {
		padding:2rem;
		font-size:5rem
	}
	h3 {
		font-size:5.5rem
	}
	#social_buttons img {
		display:block;
		margin:2rem;
		margin-top:-5rem;
		cursor:pointer;
		width:10rem;
		height:10rem
	}
	#social_buttons {
		margin-bottom:10rem
	}
	#reviews {
		padding:0
	}
	#reviews > div::before {
		background:transparent
	}
	#reviews > div {
		grid-template-columns: 75% 25%;
		margin:5.1rem 2rem 0 2rem;
		padding:1.5rem;
		border: 1px solid silver;
	}
	#reviews > div > div {
		margin:.25rem;
		line-height:5rem;
		padding: 0 1.25rem;
	}
	#reviews > div > div:nth-child(1) {
		grid-column:1;
		font-size:5.1rem
	}
	#reviews > div > div:nth-child(2) {
		grid-column:2;
		grid-row:3;
		font-size:4rem
	}
	#reviews > div > div:nth-child(3) {
		grid-column:1;
		grid-row:3;
		text-align: left;
		font-size: 4rem;
	}
	#reviews > div > div:nth-child(4) {
		grid-column:1/span 2;
		grid-row:1;
		font-size:4rem;
	}
	#reviews > div > div:nth-child(5) {
		grid-column:1/span 2;
		line-height:5rem;
		padding-top:2rem;
		font-size:5.2rem;
	}
	#changelog {
		padding:2rem;
		font-size:4rem
	}
	h5 {
		font-size:4.2rem
	}
	#changelogwrapper {
		display: block;
	}
	#changelogwrapper > div:not(#filler) {
		width:100%;
		margin: 1rem;
	}
	#filler {
		display:none
	}
}

/** Buttons **/