* {
	margin: 0;
	padding: 0;
}

:root {
	--background: #222328;
	--veille-background: #2f3038;
	--active: linear-gradient(#D9D9D905, #73737305);
	--font-size-category: 1.1em;
	--font-size-title: 1.5em;
	--font-size-description: 1em;
	--font-size-detail: 1em;
	--font-size-keyword: .8em;
}

html {
	scroll-behavior: smooth;

	background: var(--background);
}

.separator {
	margin-bottom: 70px;
}

#header {
	display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;

	position: fixed;
		top: 0%;
		z-index: 1;
		left: 50%;
		transform: translate(-50%, 0%);

	width: 100vw;

	background: rgba(170, 170, 170, .25);
		backdrop-filter: blur(10px);
		padding: 5px;

	margin-bottom: 20px;
}

#header > * {
	margin: 0px 20px;
}

#header > .side {
	display: flex;
		flex-direction: row;
		gap: 10px;
}

.side-element {
	display: flex;
		flex-direction: column;
		align-items: center;
}

#header img {
	object-fit: contain;

    max-width: 2.5em;
}

#header .titre {
    font-size: var(--font-size-title);
        font-family: 'Jura';
}

#filtres {
	display: flex;
		flex-direction: row;
		justify-content: flex-start;
		gap: 50px;
		align-items: center;

	background: rgb(54, 54, 54);
		padding: 30px;

}

#filtres > button {
	font-family: 'Jura';
	font-weight: 900;
    padding: 8px 15px;
    background-color: #415f70;
    color: white;
    border: none;
    border-radius: 0px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

#filtres > button:hover {
    background-color: #699ab6;
}

.veille {
	position: relative;
	display: flex;
		flex-direction: row;
		gap: 15px;

	background: var(--veille-background);
	border-radius: 10px;
	padding: 30px;

	transition: transform 250ms;
}

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

#veilles-liste > .veille:hover {
	transform: scale(1.025);
}

.veille .contenu {
	display: flex;
		flex-direction: column;
		gap: 15px;

	border-radius: 10px;
}

.veille .titre {
    color: white;

    font-size: var(--font-size-title);
        font-family: 'Roboto';
		font-weight: 700;
}

.veille .description {
    color: white;

    font-size: var(--font-size-description);
    	font-family: Roboto;
		font-weight: 100;
}

.veille .image {
	object-fit: contain;

    max-width: 25%;
    max-height: 25%;

}

.veille .datetime {
    color: white;

    font-size: var(--font-size-detail);
        font-family: 'Jura';
        text-decoration: none;
		font-weight: 100;

	position: absolute;
		right: 10px;
		bottom: 10px;
}

.veille .category {
	color: rgb(180, 175, 252);
		filter: drop-shadow(4px 4px 4px rgb(0, 0, 0, 1));

    font-family: 'Jura';
    	font-size: var(--font-size-category);

	transition: filter 250ms;

	padding: 5px;
		width: fit-content;
}

.veille .category:hover {
	filter: drop-shadow(0px 0px 4px rgb(131, 131, 131));
}

.keywords {
	display: flex;
		flex-direction: row;
		gap: 10px;
}

.keyword {
	color: #a8ff90;
		background-color: #596955a9;
		filter: drop-shadow(2px 2px 5px rgb(0, 0, 0, .5));


	font-family: 'Jura';
		font-size: var(--font-size-keyword);

	border-radius: 5px;
	padding: 5px;

	transition: transform 250ms;
}

.keyword:hover {
	transform: scale(1.5) rotate(5deg);
}

.editor  {
	background-color: #464858;
	padding: 10px;
	border: ridge black 2px;
	min-width: 40%;
	margin: 10px;
}

#veilles-liste {
	display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 50px;

	margin: 20px;
}

#login {
	position: absolute;
		transform: translate(-50%, -50%);
		left: 50%;
		top: 50%;

	font-family: 'Jura';
		font-size: var(--font-size-title);
		font-weight: 900;
		color: white;
}

#login * {
	padding: 5px;
}

#login > form {
	display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap: 10px;
}

#login > form > .champs {
	display: flex;
		flex-direction: column;
}

#login .statue-message {
	font-family: monospace;
	font-weight: 100;
}

#adminOption {
	position: absolute;
		right: 5px;
		top: 5px;

	display: flex;
		flex-direction: row;
		gap: 10px;

	padding: 10px;
}

#adminOption img {
	object-fit: contain;

    max-width: 2.5em;
}