* {
	box-sizing: border-box;
}

body {
	margin: 0;
	font-family: "Segoe UI", sans-serif;
	background: #2e3440;
	color: #eceff4;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}
#container {
	display: flex;
	flex: 1;
}

aside#sidebar {
	width: 20%;
	background: #3b4252;
	border-right: 1px solid #444;
	overflow-y: auto;
	height: calc(100vh - 2vh);
	position: sticky;
	top: 0;
}

header {
	background: #808695;
	box-shadow : 0px 1px 10px 12px #808695;
	margin : 0;
}
header img {
	width : 100%;
	height : auto;
}



#filters {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding : 1rem;
	margin-top : 1rem;
}

#filters h2 {
	margin-top: 0;
	font-size: 1.2rem;
	border-bottom: 1px solid #444;
	padding-bottom: 0.5rem;
}

#filters .filter_element {
	border-bottom : 1px solid white;
}

#filters label {
	display: block;
	font-size: 0.9rem;
	margin-bottom: 0.3rem;
	color: #d8dee9;
}
#filters .search_label {
	font-size : 1rem;
	color: #e8eef9;
	font-weight : bold;
	margin-top : 0.4rem;}


.checkbox-element {
	display : flex;
	flex-direction : row;
	gap : 1rem;
	align-items : flex-start;
}

#cluster-filters {
	display : flex;
	flex-direction : column;
	gap : 0.5rem;
}

.cluster-checkbox {
	margin-top : 0.5rem;
}

#date-end ,
#filters input[type="text"] {
	width: 100%;
	padding: 0.4rem;
	background: #434c5e;
	color: #eceff4;
	border: 1px solid #4c566a;
	border-radius: 4px;
}

#time-start,
#date-start {
	-width: ;
	padding: 0.4rem;
	background: #434c5e;
	color: #eceff4;
	border: 1px solid #4c566a;
	border-radius: 4px;
}

.date_container {
	display : flex;
	flex-direction : row;
	justify-content: space-between;
}


#filters button {
	padding: 0.5rem;
	background: #5e81ac;
	border: none;
	color: white;
	cursor: pointer;
	border-radius: 4px;
	transition: background 0.2s;
}

#filters button:hover {
	background: #81a1c1;
}

main#article-view {
	flex: 1;
	padding: 1rem;
	overflow-y: auto;
	height: calc(100vh - 2vh);
}

#sort-bar {
	display: flex;
	justify-content: flex-end;
	margin-bottom: 1rem;
	gap : 1rem;
	align-items : center;
}

#sort-bar select {
	background: #434c5e;
	color: #eceff4;
	border: 1px solid #4c566a;
	padding: 0.3rem;
	border-radius: 4px;
}

section {
	background: #3b4252;
	margin-bottom: 2rem;
	padding: 1rem;
}

section h2 {
	font-size: 1.2rem;
	margin-top: 0;
	margin-bottom: 1rem;
	color: #eee;
	cursor: pointer;
}

section.collapsed .cluster-articles {
	display: none;
}

section h2::after {
	content: " ▼";
	float: right;
	color: #888;
}

section.collapsed h2::after {
	content: " ►";
}

section.collapsed .collapse-button {
  display: none;
}

.collapse-button {
	width : 100%;
	height : 3rem;
	border : none;
	background-color: rgba(0,0,0,0);
	color : white;
	cursor : pointer;
}

.article {
	padding: 0.5rem 0;
	border-bottom: 1px solid #4c566a;
}

.article h3 {
	margin: 0 0 0.3rem 0;
	font-size: 1rem;
}

.article h3 a {
	color: #eceff4;
	text-decoration: none;
}

.article h3 a:hover {
	text-decoration: underline;
}

.article small {
	font-size: 0.8rem;
	color: #a3be8c;
}

.article p {
	margin: 0.3rem 0;
	font-size: 0.95rem;
}

.article img {
	max-width: 100%;
	max-height: 200px;
	margin: 0.5rem 0;
	border-radius: 4px;
}

#burger {
	display : none;
}

footer {
	background-color:#1f2c3a;
	color:#eee;
	padding:2em;
	font-size:0.9em;
	text-align:center;
}
#footer_description strong {
	font-size : 1.1rem;
}
#footer_gitlab_href {
	display : block;
	width : fit-content;
	margin : auto;
	color : white;
	text-decoration : none;
	transition : color 0.5s;
}
#footer_gitlab_href:hover {
	color : red;
}
#footer_gitlab {
	margin-top:1em;
	display:flex;
	align-items:center;
	justify-content:center;
	gap:10px
}
#footer_gitlab img {
	height:3rem;
}

#footer_last_update {
	text-align : right;
}
#footer_json a{
	color : white;
	text-decoration : none;
	transition : color 0.5s;
}
#footer_json a:hover{
	color : red;
}

@media (max-width: 768px) {
	#burger {
		display : block;
		position : absolute;
		top : 0.5rem;
		left : 1rem;

		font-size : 3rem;
		line-height : 3rem;

		color : white;
		background-color : rgba(255,255,255,0);
		border : 0;

		transition: transform 0.5s ease;
		z-index :9999;
	}

	#burger.right-side {
		#left: auto;
		#right: 1rem;
		transform: translateX(calc(100vw - 2rem - 1em));
	}

	#container {
		display : block;
	}

	aside#sidebar {
		display : absolute;
		top : 0;
		left : 0;

		width : 100%;
		height : 100vh;

		margin : 0;
		transform: translateX(-100%);
		transition: transform 0.3s ease-in-out;
		z-index : 100;
	}
	#sidebar.sidebar-visible {
		transform: translateX(0);
	}
	main#article-view {
		width : 100%;
		display : block;
		position : absolute;
		top : 0;
		left : 0;
		z-index : 50;
	}

	#article-view.sidebar-visible-blur {
		filter: blur(2px);
		transition: filter 0.3s ease;
	}

	header img {
		width : 50%;
		height : auto;
	}

	#filters label {
		font-size: 1.3rem;
	}

	#filters .search_label {
		font-size : 1.7rem;
		margin-top : 1rem;
		margin-bottom : 1rem;
	}

	.source-checkbox {
		width : 2rem;
		height : 2rem;
	}

	#source-filters {
		display : flex;
		flex-direction : column;
		gap : 1rem;
	}

	.checkbox-element {
		align-items : center;
		align-self : flex-start;
	}

	.cluster-checkbox {
		width : 2rem;
		height : 2rem;
		margin:0;
		flex-shrink: 0;
	}

	#cluster-filters {
		gap : 1rem;
	}

	#filters input[type="text"],
	#filters input[type="time"],
	#filters input[type="date"] {
		font-size : 1.5rem;
		padding: 0.4rem;
	}

	#filters button {
		width : 90%;
		font-size : 1.6rem;
		height : 4rem;
		padding : auto;
		margin-left : 5%;
	}



	main#article-view {
		flex: 1;
		overflow-y: auto;
		height: calc(100vh - 2vh);
		padding : 0;
		margin : 0;
	}

	#sort-bar {
		font-size : 1.3rem;
		margin : 1rem;
	}

	#sort-bar select {
		font-size : 1.3rem;
	}


	section {
		margin : 0;
		border-bottom : 3px solid black;
	}


	.article p {
		font-size : 1rem;
		text-align : justify;
		line-height : 1.5rem;
	}


}