/* Some ideas from Dead Simple Grid (c) 2015 Vladimir Agafonkin */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&family=Domine:wght@400;500;600;700&family=IBM+Plex+Sans+Condensed:ital,wght@0,300;0,400;0,600;1,300;1,400;1,600&family=IBM+Plex+Mono:ital,wght@0,400;0,500;1,400;1,500&display=swap');

:root {
	--white: #fff;
	--black: #000;

	--gray: #6c757d;
	--gray-subtle: #eee;
	--gray-light: #ccc;
	--gray-medium: #888;
	--gray-dark: #343a40;

	--blue: #007bff;
	--indigo: #6610f2;
	--purple: #6f42c1;
	--pink: #e83e8c;
	--red: #dc3545;
	--orange: #fd7e14;
	--yellow: #ffc107;
	--green: #28a745;
	--teal: #20c997;
	--cyan: #17a2b8;
	
	--primary: #007bff;
	--secondary: #6c757d;
	--success: #28a745;
	--info: #17a2b8;
	--warning: #ffc107;
	--danger: #dc3545;
	--light: #f8f9fa;
	--dark: #343a40;
	
	--logo-0: #55d08f;
	--logo-1: #ff3d53;
	--logo-2: #83d8ef;
	--logo-3: #77898d;
	--logo-4: #ffbc44;
	
	--font-family-sans-serif: 'IBM Plex Sans', sans-serif;
	--font-family-serif: 'Domine', serif;
	--font-family-monospace: 'IBM Plex Mono', monospace;
	--font-family-condensed: 'IBM Plex Sans Condensed', sans-serif;
}

body {
	font-family: var(--font-family-serif);
	margin: 0;
}

a {
	color: var(--blue);
	transition: all .15s linear;
	border-bottom: 0.0625em solid var(--blue);
	text-decoration: none;
}

h1 {
	font-size: 2.2em;
}

h2 {
	font-size: 1.4em;
}

h2, h3, h4 {
	margin-top: 0;
}

h3, h4 {
	margin-bottom: 0.5em;
}

p, 
ul {
	font-size: 1em;
	line-height: 1.6;
	margin: 0 0 1.6em;
}

code {
	font-family: var(--font-family-monospace);
	font-size: 1.05em;
	color: var(--gray);
}

iframe {
	border: 0;
	overflow: hidden;
}

hr {
  border-top: 0.0625em dotted var(--gray);	
}

/* Grid */

.row .row { 
	margin:  0 -1.5em; 
}

.col { 
	padding: 0  1.5em; 
}

.row:after {
	content: "";
	clear: both;
	display: table;
}

.container {
	margin: 0 auto 2rem auto;
	max-width: 90em;
	padding: 1em 0;
}

.content {
	border-bottom: 0.0625em dotted var(--gray);
	margin-bottom: 1.5em;
}

.footer {
	padding-top: 1.5em;
}

.desc,
.color-gray-medium {
	color: var(--gray-medium);
}

.intro {
	border-bottom: 0.0625em dotted var(--gray);
	padding-bottom: 1.5em;
}

.references {
	border-top: 0.0625em dotted var(--gray);
	padding-top: 1.5em;
}

.footer {
	border-top: 0.0625em dotted var(--gray-dark);
}

.condensed {
	font-family: var(--font-family-condensed);
}

/* Backgrounds and margins */

.background-gray-light {
	background-color: var(--gray-light);
}

.background-gray-subtle {
	background-color: var(--gray-subtle);
}

.no-margin-bottom {
	margin-bottom: 0 !important;
}

.margin-bottom {
	margin: 0 0 1.6em;	
}

.margin-bottom-short {
	margin: 0 0 0.8em;	
}

.half-width {
	width: 50%;
}

.full-width {
	width: 100%;
}

.padding-left {
	padding-left: 0.5rem;
}

.padding-right {
	padding-right: 0.5rem;
}

/* Classes */

img.inline-logo {
	height: 1em;
}

img.personal-pic {
	height: 9em;
}

.float-left {
	float: left;
	margin-right: 0.2em;
}

.float-right {
	float: right;
	margin-left: 0.2em;
}

.shape-outside-circle {
	margin-right: 1em; 
	border-radius: 50%;
	-webkit-shape-outside:circle();
	shape-outside:circle();
}

a.disabled {
	pointer-events: none;
	cursor: default;
}

/* Hyphenation */

.hyphenation-none {
	-webkit-hyphens: none;
	-ms-hyphens: none;
	hyphens: none;
}

.hyphenation-manual {
	-webkit-hyphens: manual;
	-ms-hyphens: manual;
	hyphens: manual;
}

.hyphenation-auto {
	-webkit-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto;
}

/* Fonts */

.font-sans-serif {
	font-family: var(--font-family-sans-serif);	
}

.font-serif {
	font-family: var(--font-family-serif);	
}

.font-sans-monospace {
	font-family: var(--font-family-monospace);	
}

.font-condensed {
	font-family: var(--font-family-condensed);	
}

/* Cookies consent */

.cconsent-container {
	z-index: 999;
	width: 21.875em;
	min-height: 1.25em;
	box-sizing: border-box;
	padding: 1em;
	background: var(--gray-dark);
	overflow: hidden;
	position: fixed;
	bottom: 1.875em;
	right: 1.875em;
	display: none;
	font-family: var(--font-family-sans-serif);
}

.cconsent-container .title a {
	color: var(--white);
	font-size: 1.375em;
	line-height: 1.25em;
	display: block;
	border-bottom: none;
	text-decoration: none;
}

.cconsent-container .description p {
	margin: 0;
	padding: 0;
	color: var(--white);
	font-size: 0.8125em;
	line-height: 1.25em;
	display: block;
	margin-top: 0.625em;
} 

.cconsent-container .description a {
	color: var(--white);
	border-bottom: 0.0625em solid var(--white);
	text-decoration: none;
}

.cconsent-container .button a {
	display: inline-block;
	color: var(--white);
	font-size: 0.875em;
	font-weight: bold;
	margin-top: 0.875em;
	background: var(--black);
	box-sizing: border-box; 
	padding: 0.5em 1em;
	text-align: center;
	transition: background 0.3s;
	border-bottom: 0;
	text-decoration: none;
}

.cconsent-container .button a:hover { 
	cursor: pointer;
	background: var(--gray);
}

/* Flags & language */

a.flag {
	border-bottom: 0;
}

img.flag {
	height: 0.5em;
}

img.flag-normal {
	height: 0.8em;
}

img.flag-grayscale {
	filter: grayscale(100%);
}

/* Tooltips */

[data-tooltip]{ 
	position: relative; 
}

[data-tooltip]::before { 
	content: ""; 
	position: absolute; 
	bottom: 50%; 
	left: 50%; 
	transform: translate(-50%, 0.625rem); 
	display: block; 
	border-top: 0.5rem solid var(--gray-medium); 
	border-right: 0.5rem solid transparent; 
	border-bottom: 0 solid transparent; 
	border-left: 0.5rem solid transparent; 
	margin-bottom: 0.625rem; 
	pointer-events: none; 
	transition: .3s; 
	opacity: 0; 
}

[data-tooltip]::after { 
	content: attr(data-tooltip); 
	position: absolute; 
	bottom: 50%; 
	left: 50%; 
	transform: translate(-50%, 0.625rem); 
	display: inline-block; 
	background-color: var(--gray-medium); 
	color: white; 
	padding: .5em 1em; 
	white-space: nowrap; 
	margin-bottom: 1.125rem; 
	border-radius: 0.25rem; 
	pointer-events: none; 
	transition: .3s; 
	opacity: 0; 
	font-size: 1rem;
}

[data-tooltip]:hover::before { 
	opacity: 1; 
	transform: translateX(-50%); 
}

[data-tooltip]:hover::after { 
	opacity: 1; 
	transform: translateX(-50%); 
}

/* Media queries */

@media only screen { 
	.col {
		float: left;
		width: 100%;
		box-sizing: border-box;
	}
}

@media (max-width: 61.25em) {
	.cookieConsentContainer {
		bottom: 0 !important;
		left: 0 !important;
		width: 100%  !important;
	}
}

@media only screen and (min-width: 34em) {
	p, ul {
		font-size: 1em;
	}

	.feature, 
	.info { 
		width: 50%; 
	}
	
	.feature:first-child,
	.info:first-child {
		border-right: 0.0625em dotted var(--gray);
	}
	
	.container {
		padding: 1em;
	}
	
	h1 {
		font-size: 2.6em;
	}
	
	h2 {
		font-size: 1.6em;
	}
}

@media only screen and (min-width: 54em) {
	.content {
		border: none;
		border-right: 0.0625em dotted var(--gray);
		margin-bottom: 0;
		width: 66.66%; 
	}
	
	.info { 
		width: 100%; 
	}

	.info:first-child {
		border: none;
	}
	
	h1 {
		font-size: 3em;
	}
	
	h2 {
		font-size: 1.7em;
	}

	.sidebar { 
		width: 33.33%; 
	}
	
	.content-half {
		width: 50%; 
	}
}

@media only screen and (min-width: 76em) {
	.info:first-child {
		border-right: 0.0625em dotted var(--gray);
	}
	
	h1 {
		font-size: 3.2em;
	}
	
	h2 {
		font-size: 1.8em;
	}

	.content { 
		width: 58.33%; /* 7/12 */
	} 
	
	.sidebar { 
		width: 41.66%; /* 5/12 */
	} 
	
	.content-half { 
		width: 50%; /* 6/12 */
	} 

	.info { 
		width: 50%; 
	}
}