:root{
	--primary-color:green;
	--secondary-color:white;
	--primary-color-contrast: white;
	--secondary-color-darkest: grey; /* the "darkest" and "darklight" variables are*/
	--primary-color-darkest: darkgreen;/* for the elements that can't have filter*/
	--secondary-color-darklight: lightgrey;
	--primary-color-darklight: rgb(0,200,0);
	--primary-color-3 : rgb(0,150,0);
	--primary-color-4: rgb(0,255,0);
	--tertiary-really-dark-color: rgb(50,50,50);
	--tertiary-medium-dark-color:rgb(100,100,100);
	--default-text-color:black;
}
body{
	margin:0;
	height:100vh;
	width:100%;
	display:flex;
	flex-direction:column;
}
.list-style-none{
	list-style:none;
	justify-content:space-around;
}
header.navbar{
	position:relative;
	height:70px;
	display: flex;
	margin:0px;
	flex-direction:row;
	box-shadow: 0 4px 2px -2px gray;
}
header.navbar .navbar-logo-container {
	padding-left:5px;
	height:70px;

}
header.navbar .navbar-logo {
	height:70px;
}
header.navbar .navbar-list{
	position: absolute;
	padding:0;
	padding-right: 15px;
	right:0px;
	height: calc(100%);
	display: flex;
	flex-direction: row;
	margin: 0px;
	list-style-type: none;
	justify-content: center;
	align-items: center;
}
header.navbar .navbar-list-item{
	color:var(--primary-color);
	height:100%;
	line-height:70px;
	vertical-align:middle;
	text-align:center;
	padding: 0px 10px;
}
header.navbar .navbar-list-item *{
	color:var(--primary-color);
}
header.navbar .navbar-list-item a{
	text-decoration:none;
}
header.navbar .navbar-list-item:hover a{
	text-decoration:underline;
}
header.navbar .navbar-list-item:hover{
	background-color:var(--primary-color-darkest);
	color:var(--secondary-color);
}
header.navbar .navbar-list-item.active{
	background-color:var(--primary-color-darklight);
	color:var(--secondary-color);
}
header.navbar .navbar-list-item:hover *, header.navbar .navbar-list-item.active *{
	color:var(--secondary-color);
}

@media (max-width: 700px){
	header.navbar #navbar-list-toggler-label{
		position:absolute;
		right:5px;
		height: 100%;
		width: 70px;
		font-size:70px;
		text-align:center;
		line-height:70px;
		vertical-align:middle;
	}
	header.navbar .navbar-list-item{
		height:unset;
		width:100%;
		padding: 10px 0px;
	}
	header.navbar #navbar-list-toggler:checked ~ .navbar-list{
		display:flex !important;
		z-index:5;
		flex-direction:column;
		position:fixed;
		bottom:0px;
		left:0px;
		width:100vw;
		align-content:center;
		justify-content:center;
		backdrop-filter:blur(10px);
		background-color: rgba(50,50,50,0.5);
		height: calc(100vh - 70px);
	}
	header.navbar #navbar-list-toggler:checked ~ .navbar-list .navbar-list-item{margin: 0;}
}


main.main{
	flex: 2 0;
}
main.main h1, main.main h2, main.main h3, main.main h4, main.main h5, main.main h6, main.main p{
	padding: 0px 20px;
	color: var(--primary-color-darkest);
}
main.main h1, main.main h2, main.main h3{
	text-align:center;
	padding:0px;
	width:calc(100%);
}
main.main h1{
	font-weight:500;
	text-decoration:underline;
}
main.main h2{
	margin: 0;
}

footer.footer{
	justify-content:space-around;
	background-color:var(--tertiary-really-dark-color);
	color:var(--secondary-color);
	display:flex;
	flex-direction:column;
}

footer.footer .row{
	padding:20px 0px;
	display:flex;
	flex-direction:row;
	justify-content:space-around;
	text-align:center;
}
footer.footer .row.top{margin: 0;}
footer.footer .row.bottom{margin: 0;}

footer.footer .col {
	display:flex;
	flex-direction:column;
	color:var(--secondary-color);
}
footer.footer .col li {
	padding:10px;
	color:var(--secondary-color);
}
footer.footer .col a {
	color:var(--secondary-color);
}
footer.footer .col.left{margin: 0;}
footer.footer .col.middle{margin: 0;}
footer.footer .col.right{margin: 0;}



.articles-list{
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
}
.articles-list .article-item{
	display:flex;
	color: var(--primary-color);
	flex-direction:column;
	width:300px;
	height:300px;
	justify-content:center;
	align-items:center;
	border:2px  solid;
}
.articles-list .article-item .article-item-main{
	display:flex;
	color:var(--primary-color);
	flex-direction:column;
	width:100%;
	justify-content:center;
	align-items:center;
	text-align:center;
}
.articles-list .article-item .article-item-main *{
	text-align:center;
}
.articles-list .article-item .article-item-main .baneer{
	border-radius:100%;
	height:120px!important;
	border:2px solid var(--primary-color-darkest);
	width:120px!important;
}
.articles-list .article-item .infos{margin: 0;}
.articles-list .article-item .infos .authors{margin: 0;}
.articles-list .article-item .infos .authors .author{color:var(--primary-color-darkest);font-weight:600}

.blogarticle{
	display:flex;
	flex-direction:column;
}
.blogarticle img{
	max-width:80vw!important;
}
.blogarticle .blogarticlehead{
	display:flex;
	flex-direction:row;
}
.blogarticle .blogarticletitle{
	flex:2 0;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	/*font-weight:700;
	font-size:200%;
	text-decoration:underline;
	color:var(--primary-color);*/
}
.blogarticle .blogarticleinfos {
	display:flex;
	flex-direction:row;
	background-color:var(--tertiary-medium-dark-color);
	color:var(--primary-color-darklight);
	justify-content: space-around;
	align-items: center;
	padding: 20px;
	width:fit-content;
}
.blogarticle .blogarticleinfos .categories {margin: 0;}
.blogarticle .blogarticleinfos .category {
	background-color:var(--primary-color);
	color:var(--primary-color-contrast);
	display:inline-block;
	padding:5px;
}
.blogarticle .blogarticleinfos .tags {margin: 0;}
.blogarticle .blogarticleinfos .tag {
	background-color:var(--primary-color);
	color:var(--primary-color-contrast);
	display:inline-block;
	padding:5px;
}

.blogarticle .blogarticleinfos .authors{margin: 0;}
.blogarticle .blogarticleinfos .authors .author{ color:var(--primary-color-4); font-weight:500; text-decoration:underline;}
.blogarticle .blogarticleinfos .date{margin: 0;}
.blogarticle .blogarticlecontent{padding: 10px 30px;}
.blogarticle .blogarticlecomments{margin: 0;}







/* width */
::-webkit-scrollbar {
	width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
	box-shadow: inset 0 0 5px grey;
	background: var(--secondary-color-darklight);
}

/* Handle */
::-webkit-scrollbar-thumb {
	background: var(--primary-color-darklight);
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
	background: var(--primary-color-darkest);
}

@media (max-width:700px){
	*.desktop-only-element{
		display:none !important;
	}
}
@media (min-width: 700px){
	*.mobile-only-element{
		display:none !important;
	}
}