/*all*/

	:root {
	  --noir: #111111;
	  --vert: #586c47;
	  --olive: #96b879;
	  --oie: #191f14;
	  --blanc: #f4f3f1;
	  --marron: #413624;
	}

	a{
		text-decoration: none;
	}

	*{
		margin: 0;
		padding: 0;
		cursor: default;
	}

	::-webkit-scrollbar-track{
		background-color: #586c47;
	}

	::-webkit-scrollbar{
		width: 12px;
		background-color: #fff;
	}

	::-webkit-scrollbar-thumb{
		background: #111111;
	}

/*bandeaux*/

	.bandeau{
		width: 100%;
		height: 3.5vh;
		background-color: var(--oie);
	}

/*section header*/

	#top{
		width: 100%;
	}

	/*menu*/

		.nav{
    		display: flex;
    		align-itens: center;
    		justify-content: space-between;
    		background-color: var(--noir);
    		background-size: cover;
    		height: 4.3vh;
    		width: 100%;
    		z-index: 1;
		}

		.nav_list{
			list-style: none;
			display: flex;
			column-gap: 2px;
			align-items: center;
			width: 100%;
			padding: 0;
		}

		.nav_item{
			display: flex;
			align-items: center;
			margin: 0% 2.5% 0% 2.5%;
			justify-content: ;
		}

		.title_nav{
			padding-left: 6px;
			color: var(--blanc);
		}

		.title_nav::selection{
			color: var(--olive);
		}

		.fas{
			color: var(--blanc);
		}

		.nav_link{
			display: flex;
			align-items: center;
			text-decoration: none;
			color: var(--blanc);
			position: relative;
			font-size: 1.5vh;
			font-family: 'Russo One', sans-serif;;
			text-transform: uppercase;
			font-weight: bold;
		}

		.nav_link::after{
			content: "";
			position: absolute;
			left: 0;bottom: 0;
			width: 100%;height: 1px;
			background-color: var(--blanc);
			transform: scaleX(0);
			transform-origin: right;
			transition: transform .5s;
		}

		.nav_link:hover::after{
			transform: scaleX(1.0);
			transform-origin: left;
		}

/*joueur*/

	.joueur{
		background-color: var(--vert);
		padding: 3vh 3vh 3vh 3vh;
		display: flex;
		justify-content: left;
		align-items: flex-start;
		height: 420px;
	}

	.image{
		width: 400px;
		height: 400px;
		box-shadow: 0px 0px 15px black;
		margin-right: 50px;
		border-radius: 20px;
	}

	.image::selection{
		background-color: var(--marron);
	}

	.text_player{
		background-color: var(--blanc);
		padding: 2vh 3vh 2vh 3vh;
		border-radius: 20px;
		height: 370px;
	}

	.player_name{
		font-size: 8vh;
		font-family: Russo One;
		font-weight: bold;
		text-transform: uppercase;
		margin-bottom: 2vh;
	}

	.player_name::selection{
		background-color: var(--olive);
	}

	.code_otan{
		font-size: 4.8vh;
		font-family: Russo One;
		text-transform: uppercase;
	}

	.code_otan::selection{
		background-color: var(--olive);
	}

	.totem{
		font-size: 4.8vh;
		font-family: Russo One;
		text-transform: uppercase;
		margin-bottom: 1vh;
	}

	.totem::selection{
		background-color: var(--olive);
	}

	.player_description{
		font-size: 3.4vh;
		font-family: Russo One;
		text-transform: initial;
	}

	.player_description::selection{
		background-color: var(--olive);
	}

	@media screen and (max-width: 860px){
		.joueur{
			background-color: var(--vert);
			padding: 3vh 3vh 3vh 3vh;
			display: block;
			height: 420px;
			justify-content: center;
		}
		.image{
			width: 200px;
			height: 200px;
			box-shadow: 0px 0px 10px black;
			margin-right: 25px;
			border-radius: 10px;
		}
		.text_player{
			background-color: var(--blanc);
			padding: 2vh 3vh 2vh 3vh;
			border-radius: 10px;
			height: 180px;
		}
		.player_name{
			font-size: 4vh;
			font-family: Russo One;
			font-weight: bold;
			text-transform: uppercase;
			margin-bottom: 2vh;
		}
		.code_otan{
			font-size: 2.4vh;
			font-family: Russo One;
			text-transform: uppercase;
		}
		.totem{
			font-size: 2.4vh;
			font-family: Russo One;
			text-transform: uppercase;
			margin-bottom: 1vh;
		}
		.player_description{
			font-size: 2vh;
			font-family: Russo One;
			text-transform: initial;
		}
	}

	@media screen and (max-width: 500px){
		.player_description{
			display: none;
		}
	}

/*scroll div*/

	.card_scroll{
		display: flex;
		flex-direction: row;
	}

	.image_scroll{
		border-radius: 15px;
	}

	.image_scroll::selection{
		background-color: var(--marron);
	}

	.image_scroll:hover{
		cursor: pointer;
	}

	@media screen and (min-width: 860px){
		.image_scroll{
			width: 200px;
			height: 200px;
			box-shadow: 0px 0px 15px black;
			margin-right: 50px;
		}

		.scroll_container{
			width: 96%;
			height: 230px;
			overflow-x: scroll;
			background-color: var(--vert);
			padding: 2%;
		}
	}

	@media screen and (max-width: 860px){
		.image_scroll{
			width: 100px;
			height: 100px;
			box-shadow: 0px 0px 8px black;
			margin-right: 25px;
		}

		.scroll_container{
			width: 96%;
			height: 130px;
			overflow-x: scroll;
			background-color: var(--vert);
			padding: 2%;
		}
	}

	
	.scroll_label::selection{
		background-color: var(--olive);
	}

/*article*/

	#collections{
		display: block;
		justify-content: center;
		background-color: var(--vert);
		padding: 4vh;
	}

	.resp-card{
		background: linear-gradient(-45deg, var(--olive), var(--vert), var(--oie));
		color: white;
		padding: 1rem;
		background-size: 400% 400%;
		/*height: 6rem;*/
		animation: gradient 10s ease infinite;
		box-shadow: 0px 0px 20px black;
		border-radius: 2rem;
		display: flex;
		align-items: center;
		border: solid var(--noir) 1px;
		transition-duration: 0.3s;
		letter-spacing: 0.4rem;
	}

	.resp-card:hover{
		border: solid var(--noir) 5px;
	}

	@media screen and (max-width:  1200px){
		.resp-card{
			height: 2rem;
			justify-content: center;
		}	

		.airsoft_1{
			display: none;
		}

		.airsoft_2{
			font-size: 3vh;
		}

		.bushcraft_1{
			display: none;
		}

		.bushcraft_2{
			font-size: 3vh;
		}

		.logo_article{
			height: 5vh;
			margin-right: 1.5vh;
		}
	}

	@media screen and (min-width:  1200px){
		.resp-card{
			height: 6rem;
		}

		.airsoft_1{
			font-size: 6vh;
		}

		.airsoft_2{
			display: none;
		}

		.bushcraft_1{
			font-size: 6vh;
		}

		.bushcraft_2{
			display: none;
		}

		.logo_article{
			height: 10vh;
			margin-right: 2.5vh;
			margin-left: 3%;
		}
	}

	.logo_article::selection{
		background-color: var(--vert);
	}

	.airsoft_1{
		font-family: Russo One;
		text-transform: uppercase;
		font-weight: bold;
		color: var(--blanc);
		/*font-size: 6vh;*/
	}

	.airsoft_1::selection{
		background-color: var(--olive);
	}

	.airsoft_2{
		font-family: Russo One;
		text-transform: uppercase;
		font-weight: bold;
		color: var(--blanc);
		/*font-size: 6vh;*/
	}

	.airsoft_2::selection{
		background-color: var(--olive);
	}

	.bushcraft_1{
		font-family: Russo One;
		text-transform: uppercase;
		font-weight: bold;
		color: var(--blanc);
		/*font-size: 6vh;*/
	}

	.bushcraft_1::selection{
		background-color: var(--olive);
	}

	.bushcraft_2{
		font-family: Russo One;
		text-transform: uppercase;
		font-weight: bold;
		color: var(--blanc);
		/*font-size: 6vh;*/
	}

	.bushcraft_2::selection{
		background-color: var(--olive);
	}

	.card_container{
		max-width: 800px;
		margin: 0 auto;
		display: grid;
		grid-gap: 1rem;
	}

	@media (min-width 600px){
		.card_container{
			grid-template-columns: repeat(2, 1fr);
		}
	}

	@media (min-width 900px){
		.card_container{
			grid-template-columns: repeat(3, 1fr);
		}
	}

	@keyframes gradient {
		0% {
			background-position: 0% 50%;
		}

		50% {
			background-position: 100% 50%;
		}

		100% {
			background-position: 0% 50%;
		}
	}

/*footer*/

	#footer{
		background-color: var(--noir);
	}

	/*link*/

		.all_icons{
			display: flex;
			justify-content: center;
			margin: 0% 40% 0% 40%;
			padding-top: 5vh;
		}

		.socials{
			display: flex;
			gap: 25px;
			margin: 0 10px 0 10px;
		}

		.socials_links{
			position: relative;
			width: 50px;
			height: 50px;
			background: linear-gradient(90deg, var(--vert), var(--oie));
			display: inline-flex;
			align-items: center;
			justify-content: center;
			font-size: 24px;
			text-decoration: none;
			color: var(--blanc);
			border-radius: 50%;
			transition: scale 0.15s;
		}

		.socials_links:hover{
			scale: 0.9;
		}

		.socials_links::after{
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			z-index: -1;
			width: 100%;
			height: 100%;
			background: linear-gradient(90deg, var(--vert), var(--olive));
			border-radius: 50%;
			opacity: 0;
			scale: 0.95;
			pointer-events: none;
		}

		.socials_links:hover::after{
			animation: pulse 1s;
		}

		@keyframes pulse {
			0%{
				opacity: 0.0;
			}
			50%{
				opacity: 0.5;
			}
			100%{
				scale: 2;
				opacity: 0;
			}
		}

		/*faire bouger les icones*/

		@keyframes shake {
			10%{transform:rotate(15deg);}
			20%{transform:rotate(-15deg);}
			30%{transform:rotate(15deg);}
			40%{transform:rotate(-15deg);}
		}

	/*contact*/

		.contact{
			margin: 4vh 0 5vh 2vh;
		}

		.contact::selection{
			background-color: var(--vert);
		}

		.president{
			font-family: Russo One;
		}

		.president::selection{
			background-color: var(--vert);
		}

		.email{
			font-family: Russo One;
			display: flex;
			align-items: baseline;
			margin-top: 10px;
		}

		.email::selection{
			background-color: var(--vert);
		}

		.contact_nom{
			font-family: Russo One;
			font-size: 1.4rem;
			color: var(--olive);
		}

		.contact_nom::selection{
			background-color: var(--vert);
		}

		.contact_adresse{
			font-family: Russo One;
			font-size: 0.9rem;
			color: var(--olive);
			margin-left: 5px;
		}

		.contact_adresse:hover{
			color: var(--blanc);
			transition-duration: 0.3s;
		}

		.contact_adresse::selection{
			background-color: var(--vert);
		}

	/*credit*/

		.credit{
			font-family: 'Russo One', sans-serif;
			margin: 10px 0 0 2vh;
			color: var(--olive);
		}

		.credit::selection{
			background-color: var(--vert);
		}