@import url('reset.css');
@import url('fontawesome.css');
@import url('fonts.css');
@import url('grid.css');
@import url('nav.css');
@import url('typo.css');
@import url('classes.css');
@import url('forms.css');
@import url('lightMode.css');
@import url('editor.css');
@import url('quiz.css');

:root {
	--padding: 20px;
	--radius: 4px; 
	--accent: #03d6cb;
	--red: #aa1717;
	--lime: greenyellow;
	/* --dark00: #0a0d10;
	--dark0: #1a1a1a;
	--dark1: #191d21;
	--dark2: #24292e;
	--dark3: #3c444c; */
	--sidebar: #111518;
	--dark00: #0a0d10;
	--dark0: #1a1a1a;
	--dark1: #23282e;
	--dark2: #2e353b;
	--dark3: #49525c;

	--bold: 700;
}


*::selection {
	background: var(--accent);
	color: black;
}
*::-moz-selection {
	background: var(--accent);
	color: black;
}
*::-webkit-selection {
	background: var(--accent);
	color: black;
}

html{
	font-size: 10px !important;
}

body{
	font-family: 'Roboto', Helvetica, Arial, sans-serif;
	background-color: var(--dark1);
	position: relative;
}

.content{
	padding: calc(var(--padding)*2) var(--padding);
	width: calc(100% - 200px);
	margin-left: 200px;
	transition: all 0.3s ease-in-out;
}


.cards{
	display: block;
	font-size: 0;
}

.card{
	background-color: var(--dark2);
	border-radius: 8px;
	padding: 3rem 2rem 2.8rem;
	transition: all .3s ease-in-out;
	max-width: 190px;
    min-height: 150px;
	position: relative;

	i{
		font-size: 3rem;
		color: #fff;
		display: block;
		margin: 0 auto;
		transition: all .3s ease-in-out;
	}

	h2{
		font-size: 2rem;
		text-transform: none;
		text-align: center;
		margin-top: 1.5rem;
		margin-bottom: 0;

		&::before{
			content: none;
		}
	}

	.cardContentWrap{
		/* Center vertically */
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	&:hover{
		background-color: var(--dark3);
		i{
			transform: scale(1.3);
		}
	}
}


#shortcutQuiz{
	max-width: 560px;

	#quizIntro .hint{
		margin-bottom: 1.5rem;
	}

	#quizDifficulty{
		display: inline-block;
		background-color: var(--dark0);
		border: 2px solid var(--dark3);
		border-radius: var(--radius);
		color: #fff;
		padding: 1rem 1rem;
		margin-right: 1rem;
		margin-top: 0;
		vertical-align: top;
	}

	select{
		margin-bottom: 0;
	}

	button{
		display: inline-block;
	}

	#quizFeedback{
		
	}
}


.nextPageTeaser{
	display: table;
	float: right;
	z-index: 10;
	margin-top: 2rem;
	margin-bottom: 3rem;
	background-color: var(--dark0);
	border-radius: var(--radius);
	border: 2px solid var(--dark3);
	color: white;
	padding: 1rem 1.5rem 1.1rem;
	font-size: 1.5rem;

	&:hover{
		background-color: var(--dark3);

		i{
			padding-left: 10px;
			padding-right: 0;
		}
	}

	i{
		transition: all .3s ease-in-out;
			padding-left: 5px;
			padding-right: 5px;
	}

	& + .nextPageTeaser{
		margin-right: 1rem;
	}
}


#neutralinoIframe{
	p{
		color: white !important;
	}
}


/* Let's style the imageHover. When .imageHover .text is being hovered, show the image */
.imageHover {
	position: relative;
	display: inline-block;
	cursor: pointer;
	font-weight: inherit;

	img {
		display: none;
		position: absolute;
		bottom: 100%;
		left: 50%;
		transform: translateX(-50%);
		width: 200px;
		max-width: none;
		height: auto;
		z-index: 9999;
		border: 1px solid white;
	}

	&.bottom {
		img {
			top: 100%;
			bottom: auto;
		}
	}

	.text{
		&:after{
			content: "\f03e" !important;
			font-family: "FontAwesome";
			font-size: 1.6rem;
			margin-left: .5rem;
		}
	}

	&:hover {
		.text {
			visibility: visible;
			opacity: 1;
		}
		img {
			display: block;
		}
		&:after{
			content: "Click to enlarge";
			font-size: 1.2rem;
			line-height: 1.2em;
			background-color: var(--dark3);
			text-transform: none;
			color: white;
			padding: .5rem;
			border-radius: var(--radius);

			position: absolute;
			white-space: nowrap;
			top: .5rem;
			/* left: .5rem; */
		}
	}
}



.footer{
	margin-top: 7rem;
	margin-bottom: -2.5rem;
	z-index: 0;
	width: 100%;
	background-color: var(--dark1);
	clear: both;

	p{
		font-size: 1.4rem;
		text-align: right;
	}
}