:root{
	--glow-blur: 20px;
	--glow-color: #00ffffaa;
}


body {
    font-family: "Poppins", sans-serif;
    text-shadow: 0px 0px 20px #000B;

    background:
        radial-gradient(
            ellipse 70% 140% at 50% 50%,
            #0000ff 0%,
            #00ffff 100%
        ),
		radial-gradient(
            ellipse 80% 200% at 50% 50%,
            #00000055 0%,
            #fff3 100%
        )
		;
	box-shadow: inset 0px 0px 0px #00ffff;
    background-blend-mode: screen;
    background-repeat: no-repeat;
    background-attachment: fixed;
	--shadow-spread: clamp(4px, 2vw, 28px);
	animation: inset-breath 2s alternate infinite ease-in;
}



@keyframes inset-breath{
	0%{
		box-shadow: inset 0 0 20px var(--shadow-spread) var(--glow-color);
	}
	100%{
		box-shadow: inset 0 0 20px 0px var(--glow-color);
	}
}


/*Block needed for background animation*/

body::before,body::after{
	display: block;

	position: fixed;
	content: "";
	width: 30vw;
	height: 30vw;
	background: radial-gradient(
            ellipse 50% 50% at 50% 50%,
            var(--glow-color) 0%,
            rgba(255, 255, 255, 0) 100%
        )
	;
	z-index: -1000;
	border-radius: 50%;
	filter: blur(8px);
}

body::after{
	animation: anim-glow 6s infinite alternate ease-in, x-movement 8s infinite alternate ease-in, y-movement 7s infinite alternate ease-in;
}


body::before{
	animation: anim-glow 5s infinite alternate ease-in, x-movement 5s infinite alternate ease-in, y-movement 6s infinite alternate ease-in;
}

@keyframes anim-glow{
	0%{
		box-shadow: inset 0px 0px 20px #fff0, 0px 0px 20px #fff0;
		opacity: 0;
		transform: scale(0);
		
	}
	75%{
	opacity: 0.90;		
	}
	100%{
		box-shadow: inset 0px 0px 20px var(--glow-color), 0px 0px 20px var(--glow-color);
		opacity: 1;
		transform: scale(1);
	}
}

@keyframes x-movement{
	0%{
		left: 0;
	}
	100%{
		left: 100%;
	}
}

@keyframes y-movement{
	0%{
		top: 0;
	}
	100%{
		top: 100%
	}
}


/*End of block*/

main {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 100%;
  text-align: center;
  padding-inline: clamp(2px,1em,60px );
  width: 100%;
  gap: 10px;
}


.row{
  display: flex;
  flex-direction: row;
  flex: 1;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1em;
}

.column{
  display: flex;
  flex-direction: column;
  gap: 1.2em;
}

.column p{
  text-align: center;
  line-height: 1.7;
}

.column a{
justify-self: center;
}

.paragraph{
	display: flex;
	color: white;
	flex-direction: column;
	flex-wrap: wrap;
	align-items: center;
	flex: 1;
}

#GrandTournoi{
display: flex;
flex-direction: column;
flex: 1;
align-items: center;
gap: 1em;
}

#LogoTrackmania{
  max-width: clamp(250px, 24vw, 500px);
}

#IntegTwitch{
  flex: 1;
  display: flex;
  flex-direction: column;
}

#Car{
  max-width: 50%;
}

#Trophies{
  max-width: clamp(300px, 30vw, 600px);

}

.cashprize{
	line-height: 1.7;
	flex: 1;
}

.paragraph-right{
  display: flex;
  color: white;
  flex-direction: column;
  flex: 1;
  border-width: 5px;
  border-color: aqua;
  max-width: 50%;
  align-items: center;
}

.paragraph-middle{
  display: flex;
  flex-wrap: wrap;
  color: white;
  flex-direction: column;
  max-width: 100vw;
  justify-self: center;
  align-items: center;
}


@media screen and (max-width: 768px) {
  .paragraph{
    max-width: 100vw;
  }
  .paragraph-right{
    max-width: 100vw;
  }
  .paragraph-middle{
    flex-direction: column;
    max-width: 100vw;
  }
}


#buttons{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  justify-content: center;
  gap: 1.5em;
}


.button{
    display: flex;
    padding-inline: clamp(2px, 1vw, 12px);
    min-width: fit-content;
    justify-content: center;
    border: 3px solid var(--border_backgroud);
    border-radius: 35px;
    background: #ffffff6e;
    color: var(--color_color);
    gap: 1.2em;
    flex: 1;
	align-items: center;
	backdrop-filter: blur(16px);
	width: fit-content;
	transition: background-color 0.2s ease-in;
	cursor: pointer;
}

.button{
  padding-inline: clamp(1px, 1vw, 9px);
}

#CondPres{
  display: flex;
  flex-direction: row;
  gap: 1em;
}

.Responsive{
flex: 1;
}


.inscription-btn{
    display: flex;
    justify-content: center;
    background-color: #6EFAA0;
    color: black;
    align-items: center;
    align-self: center;
	text-shadow: none;
}

.logo-button{
  height: 2em;
  width: 2em;
  fill: white;
}

.inscription-btn svg{
	fill: black;
}



.button:hover .logo-button,.button:focus-visible .logo-button{
	fill: black;
}



/*Block needed for animation of buttons*/
@keyframes breath{
	0%{
		box-shadow: 0 0 20px var(--shadow-spread) #0CFF63;
	}
	100%{
		box-shadow: 0 0 20px 0px var(--glow-color);
	}
}



.button:hover,.button:focus-visible{
	/*Vars needed for anim config*/
	--glow-color: var(var(--btn-color));	
	--shadow-spread : 10px;

	animation: breath 3s infinite alternate ease-in;
}

/*End of block*/

.button:hover,.button:active, .button:focus-visible{
  --btn-color: var(--accent-color);
  background-color: var(--btn-color);
  color: black;
  text-shadow: none;
  transition: background-color 0.2s ease-in;
}

@media screen and (max-width:768px){

  :has(> #Car){
    display: none;
  }
}

@media screen and (max-width:768px){
  .row{
    flex-direction: column;
  }
}

@media screen and (max-width:768px){
  #buttons{
    flex-direction: column;
  }
}

@media screen and (max-width:768px){
  #CondPres{
    flex-direction: column;
  }
}


@media screen and (min-width:1000px){
  header,main,footer{
	padding-inline: clamp(24px,8vw,800px);
  }
}

/*Block needed for twitch embed*/
	#twitch-embed{
		border-radius: 16px;
    border: solid 5px #0ffb;
    aspect-ratio: 16 / 9;
	}

	#twitch-embed iframe{
		border-radius: 5px;
    aspect-ratio: 16 / 9;
	}
/*End of block*/

.green-txt{
    color: var(--accent-color);
}
.underlined{
  text-decoration: underline;
}