/*Import Fonts*/
@font-face {
	font-family: 'Title-Pixel';
	src: url('/Fonts/8bitOperator/8bitOperatorPlus-Bold.ttf') format('truetype');

}

@font-face {
	font-family: 'Button';
	src: url('/Fonts/8bitOperator/8bitOperatorPlus8-Bold.ttf') format('truetype');
}

@font-face {
	font-family: 'ForumTitle';
	src: url('/Fonts/8bitOperator/8bitOperatorPlusSC-Bold.ttf') format('truetype');
}

/*Styles box*/

body {
	padding-left : 2em;
	padding-right : 2em;
	padding-top : 1em;
	padding-bottom:1em;
	background-image: var(--urlbackground);
	height: 100vh;
	background-size:100% 100%;
}

	#Website-box {
		background-color: var(--BackgroundColor);
		padding: 1em;
		border-radius: 1em;
	}

	#container {
		display: grid;
		grid-gap: 10px;
		grid-template-columns: 1fr 4fr;
	}

	#content-box {
		padding-top: 1em;
		padding-left: 0.5em;
		padding-right: 0.5em;
	}

	#search-box {
		padding-right : 1.5em;
	}

	header {
		display: grid;
		grid-template-columns: 1fr 1fr ;
	}

	footer {
		color: var(--FooterColor);
		background-color: var(--FooterBackgroundColor);
		padding: 0em;
		text-align: center;
		border-radius: 1em; 
	}

		footer p {
			padding: 0.5em;
			margin: 0.5em;
		}

	h1, h2 {
		color : var(--TitleColor);
		font-family: 'Title-Pixel', Arial, sans-serif;
		margin-top: 0em;
		margin-bottom: 0.5em;
	}

	h3 {
		color:var(--BasicColor);
		font-family: Arial, Helvetica, sans-serif;
		font-size: 16px;
		font-weight: bold;
	}

	p {
		color:var(--BasicColor);
		font-family: Arial, Helvetica, sans-serif;
		font-size: 14px;
	}

	aside {
		font-family: 'Title-Pixel', Arial, sans-serif;
		font-style: italic;
		font-size: 13px;
		color:var(--TitleColor);
	}

		@media screen and (max-aspect-ratio: 0.66) {
			body {
				padding-left : 0.5em;	
				padding-right : 0.5em;
				padding-top : 0.25em;
				padding-bottom:0.25em;
			}

			#Website-box {
				padding: 0,5em;
			}

			#container {
				text-align: justify;
				grid-template-columns: 1fr;
				grid-template-rows: auto auto; 
			}

			#content-box {
				padding-left : 0em;
			}

			header {
				grid-template-columns: 1fr ;
			}
		
			#HideAndShow {
				grid-column: 1/ span 2;
				grid-row: 2;
				text-align: center;
			}

			h1, h2 {
				text-align: center;
			}
		}

	.hasimage {
		width: 1.5em; 
		height: 1.5em; 
		padding: 0;
		border: none;
		display: inline;
		justify-content: center;
		align-items: center;
		background: var(--backgroundbutton) ;
		border-radius: 2px;
	}	

/*Styles Menu*/

#Menu {
	color: var(--MenuColor);
	background-color: var(--MenuBackgroundColor);
	font-family: 'Title-Pixel', Arial, sans-serif;
	margin-top: 1em;
	min-width: 200px;
}

	@media screen and (max-aspect-ratio: 0.66) {
		#Menu {
			width: 100%;
		}
	}

	#Menu ul {
		text-align: center;
		list-style-type: none;
		padding: 0;
		margin: 0;
		font-size: 1.5em;
	}

	#Menu li {
		margin: 0;
	}

		#Menu a {
			color: inherit;
			display: block;
			padding-bottom: 0.2em;
			padding-top: 0.2em;
			text-decoration: none;
			transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out;
		}

		#Menu a:hover {
			color: var(--MenuColorHoovered);
			background-color: var(--MenuBackgroundColorHoovered);
		}

		#Menu .active {
			color: var(--MenuColorActive);
			background-color: var(--MenuBackgroundColorActive);
			pointer-events: none;
		}

			#Menu .active a {
				color: inherit;
			}
	
	#Search_bar {
		position: relative;
		display: flex;
		align-items: center;
	}
			
	#Recherche_forum {
		border: 2px solid var(--SearchStroke);
		padding-left: 3em;
		width: 100%;
		height: 2em;
	}
			
		#search-button{
			position: absolute;
			left: 1em;
			background: none;
		}
			
			#search-button img {
				width: 100%;
				height: 100%;
			}

/* Button */

#CreateForum, #Download_Button {
	float:right;
}

	button, #CreateForum button, #Download_Button button {
		color: var(--ButtonColor);
		background-color: var(--ButtonBackgroundColor);
		border: 2px solid var(--ButtonStroke);
		font-family: 'Button', Arial, sans-serif;
		border-radius: 1em;
		padding: 0.5em 0.5em;
		cursor: pointer;
		font-weight: bold;
		transition: background-color 0.3s ease;
	}
	
	button:hover:not(.hasimage), #CreateForum button:hover, #Download_Button button:hover {
		color: var(--ButtonColorHoovered); 
		background-color: var(--ButtonBackgroundColorHoovered); 
	}

	@media screen and (max-aspect-ratio: 0.66) {
		#CreateForum, #Download_Button {
			float:none;
			margin-top: 0.5em;
			margin-bottom: 0.5em;
			text-align: center;
		}
	}

	#Login-button {
		color: var(--LoginColor);
		background-color: var(--BackgroundLogin);
		border-radius: 2em;
		padding: 0.5em;
		font-family: 'Button', Arial, sans-serif;
		text-decoration: none;
	}

	

/*Profil et images*/
#info ul {
	color:var(--Darker);
}

#User_info {
	padding-left: 0.25em;
	padding-right: 0.25em;
	color: var(--Darker);
}
		
/*Form*/
	label {
		font-style: italic;
	}

	form textarea, form .widearea {
		border: 2px solid var(--TextAreaStroke);
		font-family: 'Button', Arial, sans-serif;
		width: 100%;
	}

	form textarea {
		height: 10em;
	}


/*Sous onglets */
.SubTab {
	display: flex;
	justify-content: flex-end;
	border-radius: 1em;
	overflow: hidden;
	border: solid 2px var(--BorderSubtab);
	}

	.SubTab button {
		color : var(--SubTabColor);
		background-color: var(--SubTabBackground);
		font-family: 'Button', Arial, sans-serif;
		padding: 1em;
		border: none;
		padding: 10px 20px;
		cursor: pointer;
		width: 50%; 
		transition: background-color 0.3s;
		font-weight: bold;
		border-radius: 0em;
	}

	.SubTab button:hover {
		color: var(--SubTabColor);
		background-color: var(--SubTabBackgroundHover);
	}

	.SubTab button.hovered {
		color:var(--SubTabColorActive);
		background-color:var(--SubTabBackgroundActive) ;
	}


/*Classe personnalisée*/
.clickable-username {
	cursor: pointer;
}

/*Profil*/

#Infos_Generales form ul {
	list-style-type: none;
	padding: 0;
	margin : 0;
	margin-left: 0.5em;
}

#content ul {
	color: var(--Darker);
}

	#Erase_profil {
		font-size: 12px; 
		color: white; 
		background-color: rgba(255, 0, 0, 0.5);
		float:right;
		border: 1px solid rgba(255, 0, 0, 0.5);
		border-radius: 2em; 
		padding: 5px 10px; 
		text-decoration: none; 
		
	}
	
	#Erase_profil:hover {
		background-color: rgba(255, 0, 0, 0.7); 
		border: 1px solid rgba(255, 0, 0, 0.7); 
	}

	#Infos_Generales_Privées ul {
		list-style-type: none;
		padding-left: 0;
		color: var(--Darker);
	}
	
	#Infos_Generales_Privées ul li:nth-child(odd) {
		padding-left: 0;
		font-weight: bold;
	}

	#Infos_Generales_Privées ul li:nth-child(even) {
		padding-left: 2em;
		padding-bottom: 1em;
	}


/*Quick*/

	label {
		color: var(--Darker);
	}