:root{
	--color-red : #E60012;
	--color-orange : #ff870f;
	--color-white :  #FFFFFF;
	--color-dark-theme: #2c2c2c;
	--margin-left : 0px;
	--test-animation : -4%;
	--left : -273px;
	font-family: 'Bangers', system-ui;
	font-family: 'Baloo Bhai 2', cursive;
	font-weight: bold;
}

html{
	scroll-behavior: smooth;
}

body{
	margin: 0;
	padding: 0;
	background-color: var( --color-white, white);
	transition: 1.8s;
}

a{
	font-family: 'Bangers', system-ui;
	font-weight: 400;
}

.visually-hidden:not(:focus):not(:active) {
	clip: rect(0 0 0 0); 
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap; 
	width: 1px;
}

.display-none{
	display: none !important;
}

/* HEADER */

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

#top-corner{
	position: absolute;
	top: 0;
	left: 0;
	width:40%;
	height: 350px;
	background-color: var(--color-red);
	clip-path: polygon(0 0, 100% 0%, 21% 24%, 0 84%);
	z-index: -10;
	transition: 1.8s;
}

/* HEADER COTE GAUCHE */

#head-left{
	position: relative;
	top: 0;
	left: 0;
}

#mario{
	position: relative;
	top: 10px;
	left: 10px;
	width: 50%;
}

#link{
	position: relative;
	width: 25%;
	top: 12px;
	left: 67px;
	transform: rotate(-20deg);
}

/* HEADER COTE DROIT */

#head-right{
	position: relative;
	float: left;
	top: 0;
	right: 0;
}

#head-right h2{
	font-family: 'Baloo Bhai 2', cursive;
	font-weight: bold;
	font-size: 2rem;
	letter-spacing: 0rem;
	color: var( --color-red);
	transition: 1.8s;
}

#titre{
	position: absolute;
	width: 66%;
	top: 40px;
	right: 40px;
	z-index: 2;
}

#inkling{
	position: relative;
	top: 40px;
	right: -10px;
	width: 20%;
	transform: rotate(-10deg);
	z-index: 5;
}

#select-player{
	position: relative;
	height: 10vh;
	top: -6%;
	padding-left: 24px;
}

#select-player h2{
	display: inline-block;
}

#player-select{
	display: inline-block;
}

#head-right h2{
	display: inline-block;
}

.player-picker{
	display: inline-block;
}

.player-picker > fieldset{
	border: 0;
}

.player-picker input[type="radio"]{
	appearance: none;
}

.player-picker label{
	display: inline-block;
	text-align: center;
	font-size: x-large;
	width: 55px;
	height: 40px;
	border-radius: 8px;
	background-color: var(--color-red);
	color: var(--color-white);
	cursor: pointer;
	/* transition: 1.8s; */
}

#selecteur{
	position: relative;
	display: inline-block;
	width: 46px;
	height: 5px;
	background-color: #E60012;
	border-radius: 2px;
	bottom: -25px;
	left: var(--left);
	transition : left 0.8s;
}

/* .un-joueur{
	--left : -273px;
}

.deux-joueurs{
	--left : -203px;
} */
:root:has(#two:checked){
	--left : -203px;	
}

/* .trois-joueurs{
	--left : -133px;
} */
:root:has(#three:checked){
	--left : -133px;	
}
/* 
.quatre-joueurs{
	--left : -64px;
} */
:root:has(#four:checked){
	--left : -64px;	
}

#mini-drapeau{
	height: 30px;
}

#switch-container{
	width: 80px;
	height: 40px;
	border-radius: 18px;
	background-color: #dfdfdf;
}

.switch-label{
	position: relative;
	display: inline-block;
	width: 80px;
	height: 40px;
	border-radius: 18px;
	background-color: #dfdfdf;
	left: 100px;
}

.switch-label input{
	width: 0;
	height: 0;
	border: none;
	opacity: 0;
}

#bouton-mario-switch{
	width: 56px;
	border-radius: 50%;
	background-color: var(--color-white);
	border: 5px solid var(--color-red);
	position: relative;
	top: -12px;
	left: -20px;
	transition: 1s;
}

.dark{
	--color-red: #ff870f;
	--color-white: #2c2c2c;
}

.light{
	--color-red : #E60012;
	--color-white :  #FFFFFF;
}

/* :root:has(#switch:checked){
	--color-red: #ff870f;
	--color-white: #2c2c2c;
} */

/* #switch:checked {
	transform: translateX(80px);
	background-color: var(--color-dark-theme);
	border: 5px solid var(--color-orange);
	cursor: pointer;
} */

/* #bouton-mario-switch:hover{
	transform: translateX(80px);
	background-color: var(--color-dark-theme);
	border: 5px solid var(--color-orange);
	cursor: pointer;
} */

/* Accueil site v2*/

.accueil-mk-fond{
	width: 100%;
	height: 100vh;
	margin: 0;
	padding: 0;
	position: absolute;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background-color: white;
}

.to-launcher-fond{
	background-color: var(--color-red);
	padding: 10px 40px;
	border: none;
	border-radius: 40px;
	cursor: pointer;
}

.to-launcher-fond > p{
	text-decoration: none;
	font-size: x-large;
	color: white;
	font-family: 'Bangers', system-ui;
	font-size: 24px;
	margin: 0;
}

.header-accueil-fond{
	position: absolute;
	top: 20px;
	left: 40px;
	/* font-family: 'Baloo Bhai 2', cursive; */
	font-family: 'Bangers', system-ui;
	font-size: 14vw;
	font-weight: bold;
	letter-spacing: .8rem;
	color: var(--color-red);
	margin: 8px 0 4px 0;
}

.accueil-mk{
	width: 100%;
	height: 100vh;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background-color: var(--color-red);
	/* clip-path: polygon(0 0, 58% 0, 79% 100%, 0 43%); */
	clip-path: polygon(40% 0, 66% 100%, 100% 50%, 100% 100%, 66% 100%, 0 44%, 0 0);
}

.to-launcher{
	background-color: white;
	padding: 10px 40px;
	border: none;
	border-radius: 40px;
	cursor: pointer;
}

.to-launcher > p{
	text-decoration: none;
	font-size: x-large;
	color: var(--color-red);
	/* font-family: 'Baloo Bhai 2', cursive; */
	font-family: 'Bangers', system-ui;
	font-size: 24px;
	margin: 0;
}

.fleche-to-launcher{
	width: 40px;
	height: 40px;
	background-color: var(--color-white);
	position: absolute;
	z-index: 50;
	clip-path: polygon(50% 50%, 100% 0, 100% 50%, 50% 100%, 0 50%, 0 0);
}

.fleche-top{
	top: calc(50% + 30px);
	animation: fleche-launcher-top 1s infinite ease-in-out;
}

.fleche-bottom{
	top: calc(50% + 65px);
	animation: fleche-launcher-bottom 1s infinite ease-in-out .15s;
}

@keyframes fleche-launcher-top{
	0%{
		opacity: 0;
		transform: translateY(0px);
	}
	20%{
		opacity: 1;
	}
	80%{
		opacity: 0;
		transform: translateY(20px);
	}
	100%{
		opacity: 0;
		transform: translateY(0px);
	}
}

@keyframes fleche-launcher-bottom{
	0%{
		opacity: 0;
		transform: translateY(0px);
	}
	20%{
		opacity: 1;
	}
	100%{
		opacity: 0;
		transform: translateY(20px);
	}
}

.header-accueil{
	position: absolute;
	top: 20px;
	left: 40px;
	/* font-family: 'Baloo Bhai 2', cursive; */
	font-family: 'Bangers', system-ui;
	font-size: 14vw;
	font-weight: bold;
	letter-spacing: .8rem;
	color: white;
	margin: 8px 0 4px 0;
}

.img-accueil-mk{
	position: absolute;
	z-index: 50;
}

.mario-accueil{
	left: 2%;
	bottom: 10%;
	width: 40%;
}

.inkling-accueil{
	width: 40%;
	right: 3%;
	transform: scaleX(-1);
}

.img-accueil-logo-egg{
	position: absolute;
	top: -140px;
	right: 30px;
	width: 350px;
}

/* BODY */

.main-roulette{
	position: relative;
	overflow: hidden;
	/* width: 101%; */
}

/* .main-roulette-scrolled{
	width: 100%;
} */

.fond-main{
	position: absolute;
	z-index: -1;
	width: 100%;
	height: 100%;
	background-color: var(--color-red);
	clip-path: polygon(66% 0%, 100% 0%, 100% 28%);
}

.link{
	position: absolute;
	width: 25%;
	transform: scaleX(-1);
	right: -80px;
	top: 10px;
}

.main{
	display: grid;
	grid-template-columns: 66% 34%;
	grid-template-rows: 1fr;
	height: 85vh;
	margin-bottom: 5vh;
}

.bloc-joueurs{
	display: flex;
	flex-direction: column;
	justify-content: space-around;
}

.launcher{
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.categorie{
	width: 65px;
}

.content span{
	display: flex;
	justify-content: center;
	align-items: flex-end;
}

h2{
	font-family: 'Baloo Bhai 2', cursive;
	font-weight: bold;
	letter-spacing:.2rem;
	color: var( --color-red);
}

#logo{
	height: 200px;
}

#player{
	width: 50px;
	font-size: 1.1em;
}

#all_for_one{
	font-family: 'Baloo Bhai 2', cursive;
	font-weight: bold;
	font-size: x-large;
	width: 200px;
	height: 50px;
	background-color: var(--color-white);
	color: var(--color-red);
	border: 3px solid var(--color-red);
	border-radius: 40px;
	cursor: pointer;
}

#all_for_one:hover{
	background-color: var(--color-red);
	color: var(--color-white);
	transition: all 0.2s ease;
}

.erase-all{
	font-family: 'Baloo Bhai 2', cursive;
	font-weight: bold;
	font-size: x-large;
	width: 200px;
	height: 50px;
	background-color: var(--color-white);
	color: var(--color-red);
	border: 3px solid var(--color-red);
	border-radius: 40px;
	cursor: pointer;
}

.content{
	display: grid;
	gap:  .8rem;
	grid-template-columns: 40px repeat(4, 1fr);
	padding: 0 100px;
}

.fond{
	position: relative;
	width: 150px;
	aspect-ratio: 1;
	display: flex;
	justify-content: center;
	align-items: center;
	border: 2px solid var(--color-red);
	border-radius: 50%;
	background-color: #FFFFFF;
    background-size: 4px 4px;
	/* box-shadow: 0px 0px 75px 5px rgba(0, 0, 0, 0.17); */
}

.locked{
	background-color: #D6D3D3;
}

.visible{
	display: grid;
	gap:  1.5rem;
	grid-template-columns: 40px repeat(4, 1fr);
}

.cadre{
	position: relative;
	/* padding: 10px 30px; */
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	align-items: center;
}

.symbole-fond{
	position: absolute;
	width: 56%;
	opacity: 1;
	transition: opacity .2s ease-in-out;
}

.fade-in{
	opacity: 1;
}

.fade-out{
	opacity: 0;
}

.item{
	width: 80%;
	opacity: 1;
	transition: opacity 0.2s ease-in-out;
}

.img-perso{
	width: 70%;
}

.hide-img{
	opacity: 0;
}

/* .item-kart{
	height: 90px;
}

.item-voile{
	height: 90px;
} */

#t_kart{
	display: inline-block;
}

.img_kart{
	width: 128px;
	height: 64px;
}

.lanceur{
	position: absolute;
	border: none;
	background-color: transparent;
	width: fit-content;
	bottom: 5%;
	right: 9%;
}

.lanceur img{
	width: 38%;
}

.lanceur:hover{
	cursor: pointer;
}

.lanceur_row{
	position: relative;
	top: -60px;
	font-family: 'Baloo Bhai 2', cursive;
	font-weight: bold;
	font-size: 1.3rem;
	width: 40px;
	height: 40px;
	border: none;
	border-radius: 40%;
	background-color: var(--color-red);
	color: var(--color-white);
}

.lanceur_row:hover{
	cursor: pointer;
}

.center{
	grid-row-start: 1;
	grid-row-end: end;
	/* width: 100%;
	display: flex;
	justify-content: center;
	align-items: baseline; */
}

.first-col{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.grid-col-all{
	grid-column: span 5;
	text-align: center;
}

.grid-col-left{
	grid-column: span 5;
	text-align: left;
	padding: 0 20px;
}

.lakitu{
	width: 40px;
	position: relative;
	left: -27px;
	top: -48px;
	z-index: 2;
	/* opacity: 1;
	transition: all 0.2s ease-in-out; */
}

.boo{
	width: 40px;
	position: relative;
	left: -19px;
	top: -41px;
	z-index: 2;
	/* opacity: 1;
	transition: all 0.2s ease-in-out; */
}

.hide{
	/* opacity: 0; */
	display: none;
}

#tout:hover{
	background: yellow;
	transition: 0.3s;
}

.rond{
	width: 150px;
	height: 30px;
	float: left;
	background-color: yellowgreen;
	clip-path: polygon(0 0, 100% 0, 90% 50%, 100% 100%, 0 100%, 10% 52%);
}

#bas{
	position: relative;
	bottom: 0;
	height: 50px;
	width: 100%;
}

/* FOOTER */

#footer{
	position: relative;
	overflow-x: hidden;
	overflow-y: hidden;
	width: 100%;
	height: fit-content;
	padding-bottom: 70px;
}

#bottom-corner{
	position: absolute;
	bottom: 0;
	right: 0;
	width: 30%;
	height: 80%;
	background-color: var(--color-red);
	clip-path: polygon(80% 80%, 100% 0%, 100% 100%, 0% 100%);
	z-index: -10;
}

.mini{
	position: absolute;
	width: 60px;
	margin: 0 15px;
	bottom: 0%;
}

#min-mario{
	left: -6%;
	animation: monte 8s infinite linear;
}

#min-mario-d{
	left: -6%;
	animation: monte 8s infinite linear 4s;
}

#min-luigi{
	left: -6%;
	animation: monte 8s infinite linear 1s;
}

#min-luigi-d{
	left: -6%;
	animation: monte 8s infinite linear 5s;
}

#min-peach{
	left: -6%;
	animation: monte 8s infinite linear 2s;
}

#min-peach-d{
	left: -6%;
	animation: monte 8s infinite linear 6s;
}

#min-bowser{
	left: -6%;
	animation: monte 8s infinite linear 3s;
}

#min-bowser-d{
	left: -6%;
	animation: monte 8s infinite linear 7s;
}

#yoshi{
	width: 15%;
	position: absolute;
	right: 0;
}

#yoshidden{
	width: 15%;
	visibility: hidden;
}

#trace{
	position: absolute;
	transform: rotate(-14deg);
	left: -7%;
	width: 55%;
}

#here-we-go{
	position: absolute;
	left: 27%;
	width: 35%;
	display: block;
}

.bob-omb{
	position: relative;
	height: 50px;
	left: -4%;
	bottom: -150px;
	/* animation: avance 15s infinite linear; */
	animation: monte 15s infinite linear;
}

/* ANIMATION BAS DE PAGE */

@keyframes monte {
	0%{ 
		left: -4%;
		bottom: 2%;
	}
	64%{
		transform: rotate(0deg);
	}
	65%{
		left: 69%;
		bottom: 2%;
		transform: rotate(-15deg);
	}
	80%{
		left: 88%;
		transform: rotate(-15deg);
		bottom: 18%;
	}
	81%{
		transform: rotate(-75deg);
	}
	100%{
		transform: rotate(-75deg);
		bottom: 130%;
		left: 99%;
	}
}

@keyframes tremble{
	0%{
		margin-bottom: 0px;
	}

	50%{
		margin-bottom: 5px;
	}
	100%{
		margin-bottom: 0px;
	}
}

@keyframes tourne {
	from {
		transform: rotateX(90deg);
	}
	to{
		transform: rotateX(0deg);
	}
}

@media (max-width: 1600px){
	.main{
		grid-template-columns: 75% 25%;
	}

	.lanceur{
		bottom: 0%;
		right: 0%;
	}
}

@media (max-width: 1400px){
	.main{
		grid-template-columns: 80% 20%;
	}

	.fond{
		width: 140px;
	}
}

@media (max-width: 1200px){
	.content{
		gap: 10px;
	}

	/* .cadre{
		padding: 10px 20px;
	} */

	.fond{
		width: 130px;
	}
}

@media (max-width: 1050px){
	.fond{
		width: 130px;
	}

	.content{
		padding: 0 10px 0 30px;
	}

	#all_for_one{
		width: 150px;
		height: 40px;
		font-size: 22px;
	}

	.launcher{
		align-items: center;
	}
}

@media (max-width: 1000px){
	.fond{
		width: 110px;
	}

	.item{
		width: 70%;
	}
	.img-perso{
		width: 60%;
	}
}

@media (max-width: 900px){
	.lanceur{
		right: -8%;
	}
}

@media (max-width: 800px){
	#all_for_one{
		width: 130px;
	}

	.lanceur{
		right: -20%;
	}
}

@media (max-width: 720px){
	.main{
		height: auto;
		grid-template-columns: 70% 30%;
	}

	.content{
		grid-template-columns: 40px 1fr 1fr;
	}

	.cadre:nth-child(4){
		grid-column-start: 2;
	}

	.bloc-joueurs{
		gap: 10px;
	}

	.link{
		right: -38px;
	}

	.icon-item{
		display: none;
	}

	.lanceur{
		right: -2%;
	}
}

@media (max-width: 600px){
	.fond-main{
		display: none;
	}

	.player-picker label{
		font-size: 21px;
		width: 46px;
		height: 34px;
		border-radius: 8px;
	}

	#selecteur{
		width: 44px;
	}

	.lanceur{
		right: -10%;
	}

	:root{
		--left : -242px;
	}

	:root:has(#two:checked){
		--left : -180px;	
	}
	
	:root:has(#three:checked){
		--left : -120px;	
	}

	:root:has(#four:checked){
		--left : -60px;	
	}
}

@media (max-width: 520px){
	.lanceur{
		right: -20%;
	}
}

@media (max-width: 470px){
	.main{
		grid-template-columns: 1fr;
		gap: 30px;
	}

	#select-player{
		height: auto;
		margin-bottom: 50px;
	}

	#select-player h2{
		margin: 0;
	}

	.lanceur{
		right: -10%;
	}
}

@media (max-width: 375px){
	.lanceur{
		right: -14%;
	}
}

@media (max-width: 340px){
	#select-player{
		margin-bottom: 0px;
	}

	.content{
		grid-template-columns: 1fr 1fr;
		padding: 0 20px;
	}
	.cadre:nth-child(2){
		grid-column-start: 1;
	}

	.cadre:nth-child(4){
		grid-column-start: 1;
	}

	.lanceur_row{
		top: -10px;
	}

	.lakitu{
		top: 0px;
	}

	.boo{
		top: 0px;
	}
}

@media (max-width: 314px){
	#select-player{
		padding: 0;
	}

	#selecteur{
		display: none;
	}

	.player-picker-resp label{
		width: 42px;
		height: 30px;
		background-color: white;
		color: var(--color-white);
		border: 4px solid var(--color-red);
	}
}