@font-face {
	font-family: myFont;
	src: url("font/Gidole-Regular.ttf");
}

body {
	height:100%;
	background-color: #E5E5E5;
	Font-family: Arial, Helvetica;
	margin: 0;
	background-image: url("image/bg-rat.png");
	background-position: left top;
	background-repeat: no-repeat;
}

h1 {
	margin:0;
	padding:0;
	Font-family: myFont;
}

h2 {
	margin:0;
	Font-family: myFont;
}

h3 {
	margin:0;
	font-size: 16px;
	font-style: italic;
	color: #555;
}

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

a:visited {
	color: inherit;
}

.header-tab {
	margin: auto;
	Font-family: myFont;
}

.header {
	width:100%;
	background-color: white;
	border: thin solid black;
	border-top-color: white;
	position:fixed;
	top:0;
	height:154px;				/* image margin to be checked */
}

.tag {
	width:100%;
	background-color: white;
	border: thin solid black;
	border-top-color: white;
	position:fixed;
	top:156px;
	height: 58px;
	left:0;
}


.tag ul {
	list-style-type: none;
	text-align: left;
}

.tag li {
	display: inline;
	margin-right: 5px;
	margin-top: 5px;
	padding: 5px;
	background-color: white;
	border: 1px solid black;
	border-radius: 10px;
}

.tag li a {
	font-size: 16px;
	width: 100px;
	color: black;
	text-decoration: none;
	padding: 5px;
}

.tag li:hover {
	background-color: #DFDFDF;
}


.lang {
	width:50%;
	background-color: none;
	border: none;
	position:fixed;
	top:156px;
	height: 58px;
	right:0;
}

.lang ul {
	list-style-type: none;
	text-align: right;
	margin-right: 30px;
}

.lang li {
	display: inline;
	margin-right: 10px;
	border: none;
}

.lang li a {
	font-size: 16px;
}

.lang a:hover {
	color: grey;
}


.grid-div {
	background-color: white;
	margin: auto;
	width: 70%;
	padding: 20px;
	margin-top: 280px;
	margin-bottom: 80px;
}

.grid-container {
	display: grid;
	grid-template-columns: 60% 40%;
	background-color: black;
	border-top: 1px solid black;
	border-bottom: 1px solid black;
	gap: 1px;
}

.grid-item {
	background-color: white;
	padding: 20px;
	text-align: justify;
}

.item1 {
	grid-area: 1 / 2 / 3 / 2;					
}

.item4 {
	grid-area: 3 / 1 / 4 / 3;	/* to be checked */
}

.item5 {
	grid-area: 4 / 1 / 4 / 3;
	
}

.item5 a:hover {
	color: grey;
}
/*
.grid-item a:hover {			/* to be generalised
	color: grey;
}
*/
.title {
	font-size: 20px;
	font-weight: bold;
}

.article {
	font-size: 18px;
}