/**************************************/
/*   web site FBFT by zenZero 2025    */
/*   1.0
/*   
/*   
/*   
/*	TODO
/*	ok - Pancarte dans le footer
/*	ok - Mise en forme de la section event
/*		ok - max width image css
/*	ok - Voir pour presenter la chaine YT et/ou JS
/*	ok - L'histoire du serveur
/*	ok - favicon
/*	ok - img css
/*	ok - Clean le HTML
/*	ok - Clean le CSS
/*	ok - Clean le JS
/*	ok - marking du code 1.0
/*	ok - Correction du texte
/*	- relase Github 1.0
/*
/*
/*
/**************************************/





/*****************************/
/*color setting */
:root {
	--t-white		: #fff;
	--white			: #ddd;
	--ll-grey		: #aaa;
	--l-grey		: #ccc;
	--grey			: #999;
	--dark-grey		: #555;
	--black			: #111;
	--green			: #1a1;
	--light-green	: #4d4;
	
	--t-white		: #fff;
	--dscr-bleu		: #5865f2;
	--yt-red		: #f00;
}

/*****************************/
/*font loading */
@font-face {
    font-family: "minecraftia";
    src: url("/Fonts/Minecraftia-Regular.ttf");
}


/******************************/
/*reset */
* {
	margin : 0;
	padding : 0;
}


/******************************/
/*main style*/
body {
	
/*background*/
	background-color : var(--black);
	background-image : linear-gradient(to bottom, rgba(1, 1, 1, 0) , rgba(1, 1, 1, 1) 10%),
					   url("/Images/chaos_00.png");
	background-position : top center;

/*font*/
	color :var(--ll-grey);
	font-family:minecraftia, Lucida Console, monospace;
	font-size : 20px;
	text-align : center;
	
}

/*Lien et titre*/
a {
	color : var(--green);
	text-decoration : none;
}
a:hover {
	color : var(--light-green);
	text-decoration : underline;
}

b {
	color : var(--white);
	font-size: 110%;
}

h1 {
	color : var(--white);
	font-size : 250%;
}
h2 {
	color : var(--white);
	font-size : 200%;
}
h3 {
	font-size : 200%;
}


/******************************/
/*LINK BUTTONS */
.button {
	position : relative;
	
	background-color : var(--green);
	color : var(--t-white);
	
	display : inline-block;
	border-radius : 4px 4px 6px 6px;
	border-bottom : solid 5px rgba(85, 85, 85, 0.6);
	padding : 10px 10px 0px 10px;
	
	text-shadow : 0px 0px 5px var(--black);
	font-weight : bold;
	text-decoration : none;
	text-align : center;
}
.button span {
	position : absolute;
	top : -20%;
	right : -8%;
	rotate : -20deg;
	display : inline-block;
	
	text-shadow : 0px 0px 5px var(--black);
	font-size : 90%;
	
}
.button:hover {
	color : var(--t-white);
	text-decoration : none;
	text-shadow :none;
	box-shadow : inset 0px 0px 4px var(--l-grey);
}

.discord {
	background-color : var(--dscr-bleu);
	color :var(--t-white);
}

.youtube {
	background-color : #f00;
	color : var(--t-white);
}


/******************************/
/* HEADER */
header {
	/* margin-bottom : 30px; */
}
header a {
	position : relative;
}
#logo-container {
 max-width : 1000px;
 margin : 0px auto;
}

#logo-container img {
	width : 100%;
	height : 100%;
}


/******************************/
/* event box */
#event {
	display : none;
	margin : 2% auto;
	padding : 10px;
	max-width : 1200px;
	width: 90%;
	background-color : #373; 
	border : double 10px var(--white);
	color : var(--t-white);
}

#event h2 {
	color : var(--t-white);
}

#event .button{
	background-color : var(--ll-grey); 
}

#event img {
	float : left;
	width : 100%;
	max-width : 250px;
}

/******************************/
/* youtube embed */
.yt-container {
	text-align : center;
	
}
.yt-embed {
	padding : 1%;
	max-width : 1100px;
	width: 90%;
	aspect-ratio: 16 / 9;
}


/******************************/
/* Section Display*/
.row {
	margin : 80px 10% 0px 10%;
	/* border-top : 1px solid #555; */
}
/* Clear floats after the columns */
.row:after {
	content: "";
	display: table;
	clear: both;
} 

/* columns */
.column {
	float : left;
	/* width : 33.33%; */
	box-sizing : border-box;
	margin : 30px 0 ;
	border : solid 0px var(--grey);
	border-left-width : 1px;
}
.column:first-child {
	border-left-width : 0px;
}

.c3 {
	width : 33.33%;
	font-size : 80%;
}

.c2 {
	width : 50%;
}

.column p {
	margin : 20px;
}

.column img {
	float : left;
}

/* Responsive layout */
@media screen and (max-width: 1200px) {
	.column {
		width: 100%;
		border-left-width : 0px;
		border-bottom-width : 1px;
	}
} 


/******************************/
/* FOOTER*/
footer {
	height: 120px;
	background-color : var(--black);
	background-image : linear-gradient(to top, rgba(1, 1, 1, 0) , rgba(1, 1, 1, 1) 40% ),
					   url("/Images/bedrock.png");
					   

	display: flex;
	align-items: flex-end;
	justify-content: flex-end ;
}

footer img{
	width : 150px;
	margin-right : 50px;
	filter : brightness(0.8);

}