:root {
	--bg-color: #F3F3F3;
	--title-blog-color: darkblue;
	--date-blog-color: pink;
	--info-blog-color: purple;
	--tags-blog-color: green;
	--para-blog-color: black;
}


@font-face {
	font-family: 'Dinish';
	src: url('../fonts/Dinish/Dinish-Regular.otf');
	font-weight: normal;
}
@font-face {
	font-family: 'Dinish';
	src: url('../fonts/Dinish/Dinish-Bold.otf');
	font-weight: bold;
}
@font-face {
	font-family: 'Dinish';
	src: url('../fonts/Dinish/Dinish-Italic.otf');
	font-weight: normal;
	font-style: italic;
}

/* GLOBAL */

html {
	scroll-behavior: smooth;
	font-size: 20px;
}

body {
	background: var(--bg-color);
	font-family: 'Dinish';
	margin: 0px;
	padding: 1rem 0;
	font-size: 1.25rem;
	line-height: 1.1em;
}

main {
	display: flex;
}

section {
	width: 50vw;
	overflow: hidden;
}

@page {
  margin: 2cm;
  background: var(--bg-color);
}


@media print {
    section {
        width: 100vw;
    }
    .right { display: none; }
}

strong {
	text-decoration: underline;
}


sup{

	vertical-align: top;
	font-size: 0.5em;
}

a {
	text-decoration: underline;
	color:inherit;
}

a:visited{

	color:inherit;
}

em {
	font-style: italic;
}


ul > li > ul {
	margin-left: 1em;
}

ul li:hover:before {
	content: '├';
	color: purple;
}

ul li:last-of-type:before {
	content: '└─'
}

ul li:before:nth-of-type(1) {
	content: '└─';
	color: red;  
}
/* ul li.selected:before {
	content: '├─'
	color: purple;
} */

/* GLOBAL: NAV, LANGUAGES  */

nav, .languages{

	font-size: 1rem;
	line-height: 1.1em;
}

nav{

	display: inline-block;
}

nav ul{

	display: flex;

}

.lang,
nav ul li{

	padding: 1rem;
	border-radius: 3rem;
}

nav ul li{

	background: pink;
}

.languages {
	position: fixed;
	top: 0.5rem;
	right: 0.5rem;
}

.lang{

	background: yellow;
	display: inline-block;
	margin-right:5px;
}

/* OPEN CALL PAGE */

.article, #list-blog, header {
	margin: 0;
	padding: 0.5em;
}

.article {
	width: auto;
	margin-bottom: 2em;
}

#list-blog {
	width: auto;
}

#list-blog > ul {
	margin-top: 0;
}

#list-blog > ul > li,
#list-blog > ul > li > a
{
	display: flex
}

.article-content {
	margin: 0em .5em;
	color: var(--para-blog-color)
}

.article-content > * {
	margin-bottom: 1em;
}

.article-content img {
	margin: 0em 0;
	width: 100%;
}

.article-content .introduction {
	text-align: center;
	padding: .5em;
	border-left: 2px solid;
	border-bottom: 2px solid;
	margin-left: 1em;
	width: calc(100% - 3em);
}
.article-content blockquote {
	margin-left: 2em;
	border-left: 2px solid;
	padding: .5em;
}
.article-content h1 {
	text-transform: uppercase;
	text-decoration: underline;
	margin-bottom: 1em;

}
.article-content blockquote cite {
	font-size: .8em;
}

body:not(.poster) h2 {
	border-left: 5px solid;
	letter-spacing: 1px; 
	text-transform: uppercase;
	padding: .5em;
}

.header-title {
	display: flex;
}

.header-title a, .header-title a:visited{
	letter-spacing: .02em;
	color: purple;
}

.mobile {
	display: none;
}

.article-title {
	color: var(--title-blog-color);
}


.date {
	color: var(--date-blog-color);
}

.info {
	color: var(--info-blog-color);
}

.tags  {
	color: var(--tags-blog-color)
}

.tag-off {
	outline: 1px solid pink;
	background: pink;
	color: black;
}

.article-title span, .date span, .info span, .tags > span {
	background: white;
	border-radius: 5%;
	outline: 5px solid white;
} 

.cover img {
	width: 100%;
	max-width: 600px;
	margin: 0 auto;
}

/* HOME PAGE  */

.poster{

	font-size: 4rem;
	text-align: center;
	background: grey;
	background: #F3F3F3;
}

.poster h1{

	color: darkblue;
	display: inline-block;
	border-radius: 3rem;
}

.poster h2{
	padding: 0.5rem 1rem;
	color: blue;
	font-style: oblique;	

}

.poster h3{

	color: pink;
	display: inline-block;
	text-shadow: 2px 0 0 #000, -2px 0 0 #000, 0 2px 0 #000, 0 -2px 0 #000, 1px 1px #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
}

.poster h5{

	font-size: 4vw;
	display: inline-block;
	position: absolute;
	color: yellow;
	text-transform: uppercase;
	top:  8rem;
	left:  5rem;
	transform: rotate(-15deg);
	text-shadow: 2px 0 0 #000, -2px 0 0 #000, 0 2px 0 #000, 0 -2px 0 #000, 1px 1px #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;

}

.poster .info{

	color: green;
	padding: 1rem;
}

span.town,
span.date,
a.email,
span.dead{

	display: inline-block;
	padding: 0 1rem;
	border-radius: 2rem;
	background: white;
}

span.town{

	color: pink;
}

span.dead{

	color: darkblue;
	background: yellow;
}

span.date{

	background: white;

}


/* RESPONSIVE */



@media screen and (min-width: 1600px) {

	html{

		font-size: 1vw;
	}
	section {

		width: 50vw;
		max-width: 900px;
	}
}
@media screen and (min-width: 1600px) {

	html{

		font-size: 20px;
	}

	.desktop {
		display: none;
	}
	.mobile {
		display: inline-block;
	}


	#list-blog-anchor {
		display: block;
	}



}

@media screen and (max-width: 1500px) {

	main {
		display: block;
	}

	section {

		width: 75vw;
	}

	.languages{

		bottom: 0;
		top: unset;
	}
}

@media screen and (max-width: 1200px) {

	main{

		display: block;
	}

	section{

		width: 100%;
	}

	body.poster{

		font-size: 3rem;
	}

}

@media screen and (max-width:  800px){

	.introduction {
		margin-left: 0em !important;
	}

	.poster h5{

		display: none;
	}
}

@media screen and (max-width: 450px) {
	
	.introduction {
		margin-left: 0em !important;
	}

	html{

		font-size: 16px;
	}



}

/* PRINT */

@media print {

	@page {
		margin: 0;
		size: A4;
	}

	body:not(.poster){
		padding: 1cm;
		padding-bottom: 10cm;
	}
	section {
		width: 100%;
	}

	blockquote h1{

		padding-top: 2rem;
	}


	.languages,
	nav{

		display: none;
	}

	p{
		
		page-break-inside: avoid;

	}

	.right { display: none; }

	p.split{

		padding-top: 3rem;
	}

	.break{

		page-break-after: always;
		break-after: always;
		margin: 4rem;
		display: block;
	}


	/* HOME PAGE */
	a:nth-of-type(1){
		color: var(--title-blog-color);
	}
	a:nth-of-type(2){
		color: var(--date-blog-color);
	}
	a:nth-of-type(3){
		color: var(--info-blog-color);
	}
	
	.poster{

		padding: 0;
		font-size: 8vw;
	}

	.poster h1, .poster h2, .poster h3, .poster h5{

		padding: 1.5vw;	
	}

	.poster h2, .poster a{

		background: blue;
		color: white;
		
	}

	.poster h5{

		top: 15cm;
		font-size: 30vw;
		left:  3rem;
	}

	.poster .info{

		position: absolute;
		bottom: 0;
		width: 100%;
		right: 0;
	}
}