*{margin: 0;
padding: 0;
list-style-type: none;
text-decoration: none;
scroll-behavior: smooth;}
body{margin: 0;
padding: 0;
width: 100%;
overflow: hidden;
}
#back {background: 	#121621;
	color: var(--fg);
	font: 1em/1.5 sans-serif;
	height: 100vh;
	width:  100%;
	display: grid;
	place-items: center;
	position: fixed;
	z-index: 90;
	transition: 1s ease-in;
	text-align: center;
	
	}
	
   #back svg{width: 100%;
	   position: absolute;
	   top: 10px;} 
	   #back  svg path{
		  stroke-width: 80px;
		  stroke-dasharray: 9500px;
		  stroke-dashoffset: 9500px;
		  animation: draw 5s ease forwards;
	  }
	  @keyframes draw {
		  90%{
			  stroke-dashoffset: 0px;
			 fill: #038ecf0a; 
		  }
         100%{
			fill: #038ecf; 
		 }
	  }
  

html{scroll-behavior: smooth;
	

}
body{display: none;

	
}
section{width: 100%;
	
}

::-webkit-scrollbar {
  display: none;
}






@media screen and (max-width: 480px) and (min-width: 300px) {

	body{
		display: block;
		background-color: #121621;;
	}
#nav{
background-image: url(wave.svg);
background-repeat: no-repeat;
background-size: 160% 110%;
	position: fixed;
	display: flex;
	width: 100%;
	margin-bottom:   10px;
	text-align: left;
	align-items: center;
	font-family: poiret one;
	z-index: 8;
	


}
#nav strong{font-family: poiret one;
	border-bottom: none;}
nav li ul li a i{font-size: 20px;
} 
#logo1{width:70px;
padding:  5px;
margin-left: 10px;
transition: 0.5s ease;
transition-delay: 1s;
border-radius: 0;}
#nav #imgprofile{display: block;
	position: relative;
	border-radius: 50%;}
#nav.active #imgprofile{display: block;
position: relative;
border-radius: 50%;}
#logo1{display: flex;
opacity: 0;}
#nav .profil {position: absolute;
left: 90px;
opacity: 0;
transition: 15s ease;}


#nav .submenu img{width:80px;
}

.log span{font-size: 20px;
	background-color: white;
	border-radius: 10px;
	padding: 10px;
	font-family: poiret one;
	position:relative;
top: 610px;
left: 5px;
margin: 5px;

}
.jour{width: 100px;
height: 50px;
font-size: 30px;
text-align:center ;
margin: 5px 50px;
color: grey;}
.log i{color: #1e90ff;}
#reverse{background-color: #1e90ff;}
#reverse a{color: rgb(255, 255, 255);
}
#reverse i {color: white;}
.log span a{color: #1e90ff;
}




#picwallet{z-index: 3;
	position:absolute;
	top: 60px;
	left: 5px;}
.coin{display: flex;
position: absolute;
left: 90px;
top: 80px;}

.first .text {position: absolute;
top: 300px;
color: #038ecf;
margin: 10px;
width: 100%;

font-family: poppins;}
.first .text h1{
	font-size: 60px;
}
.first .text .lien{text-align: center;
}
.first .text .lien {font-family: poppins;
padding: 10px 20px;
margin:  35px;
margin-left: 10px;
background-color: #038ecf;
border-radius: 10px;
}
.first .text .lien a{
	font-family: poppins;
}
.first h1 span{
	color: #d8ab3a;
}
.degre{font-size: 30px;
	color: gray;
}
.degre1{font-size: 10px;
	color: gray;}
.two .box{width: 260px;
height: 200px;
margin: 50px;
text-align: center;
font-family: poiret one;
border-radius: 10px;
color: white;}
.two .box .img:nth-child(1){position: absolute;
	left: 150px;
animation: shake 5s ease infinite;
z-index: 2;

}
.two .box .img:nth-child(2){position: absolute;
	left: 80px;
	top: 120px;
	animation: shake 5s ease infinite;
	animation-delay: 2s;


}
@keyframes shake {
	0%{
		transform: translateY(18px);
	}
	50%{transform: translateY(8px)}
	100%{transform: translateY(18px)}
	
}
.two .box .tx{display: block;

}
.two .box .tx span{margin: 10px 40px;
	text-align: center;}
.three .box{width: 300px;
color: white;
	margin: 30px;
}
.three .box div {text-align: center;}
.three .box span{margin: 5px;
color:#d8ab3a;
font-family: poppins;}
.three .box a{margin: 5px;
	padding: 5px 10px;
	color: #ffffff;
	background-color:#d8ab3a;
	border-radius: 10px;
	font-family: poppins;}
	.three .center{text-align: center;
	font-family: poppins;
color: #1e90ff;}
.center{text-align: center;
	font-family: poppins;
color: #1e90ff;
margin-top: 300px;}

.center div i{padding: 15px;
	color: #d8ab3a;}
	.center div {padding: 15px;
		color: white;}
.three .center div{padding: 15px;
color: white;}
.three .center div h1{color: #1e90ff;}
 .box a i{color: white;
border-radius: 50%;
padding: 5px;
margin: 5px;}
.three .box p{margin: 5px;
font-family: poiret one;
}
.three .box .info i{color: white;

font-size: 30px;
margin: 10px;
padding: 10px;
}

.foot{	background-color: #121621;
	font-family: poiret one;

}
.footimg{float: left;
	shape-outside: circle(60%);
}
.foot h3{color: #ffffff;}
.foot  p{margin: 5px;
	color: white;
text-align: justify;}
.foot  .news div{padding: 5px;
margin: 5px;
display: flex;}
.foot  .news a img{width: 150px;}
.foot  .news h3{color: #ffffff;}
.foot .finfo div{color: white;
text-align: center;
padding: 3px;
margin: 3px;}
.foot .finfo .media{
	display: flex;
margin: 20px 70px;
z-index: 4;
}
#cookie{position: fixed;
	font-family: poiret one;	
	top: 500px;
	right: -350px;
	margin: 10px;
width: 300px;
height: 120px;
border: 1px solid white;
background-color: #121621;
box-shadow: 4px 4px 4px 1px grey;
transition:0.5s cubic-bezier(1,.06,0,1.05) ;
animation-delay: 5s;
}
#cookie img{float: left;}
#cookie a{color: #1e90ff;
text-decoration: underline;}
#cookie i{position: absolute;
top: 4px;
right:4px;
font-size: 20px;
color: #d8ab3a;}
 .media a i{
	font-size: 20px;
	color:#d8ab3a;
	padding: 10px;

}
.foot .finfo .payments i{font-size: 30px;
padding: 10px;
color:#d8ab3a;}
.news{text-align: center;}
.news h1{color: #ffffff;}
.news form input{text-align: center;
	width: 250px;
	height: 30px;
	margin: 0 45px;

}
.news form button i{color: #d8ab3a;
font-size: 20px;}
.news form button{position: absolute;
right: 45px;
margin:8px 10px;
border: none;
background-color: transparent;
}
.news form img{position: relative;
left: 45px;
top:15px;}
#copy{	color: #ffffff;
text-align: center;
}

.bar{width: 0px;
	height: 0px;
	color:  rgb(28, 192, 233);
	z-index: 10;
}

.bar.active:before{background-color: rgb(255, 255, 255);
	
	z-index: 10;
	transform: translateX(300px) translateY(-40px)   rotate(45deg);}
	.bar.active:after{background-color: rgb(255, 255, 255) ;
		
		z-index: 10;
		transform: translateX(300px) translateY(-40px)  rotate(-45deg);}



.bar:before,.bar:after{content: "";
	width: 20px;
	height: 2px;
	border-radius: 50px;
	background-color: white;
padding: 0px 5px;
position: absolute;
transition: 0.3s ease;}
.bar:before{background-color: white;
	transform: translateX(300px) translateY(-50px);}
.bar:after{background-color: white;
	transform: translateX(300px) translateY(-40px);}
#menux{position: relative;
right: 25px;
z-index: 1;
opacity: 0%;}



#check {display: block;
position: absolute;
top: 11px;
visibility: hidden;
}
#shop{width: 10px;}

.Csub{
	position: absolute;


}

header{
	width: 100%;
	height: 100vh;
}
.submenu{background: linear-gradient(200deg,#1e90ff 10%,#06212d 60%);
	position: fixed;
	height: 100vh;
	overflow-x: hidden;
	overflow-y: scroll;
	top:0px;
	transform: translateX(-450px);

	transition: 0.5s ease;
	z-index: 8;
}
.submenu.a{
	transform: translateX(-1px);
	color: white;	
}
.submenu.a h2,p{text-align: center;}
.submenu h2{text-align: center;
margin: 3px 0;}
.submenu.a h3{margin: 0 3px;}
.submenu h3{margin: 0 3px;}
#pic{
	margin: 0 150px;
	text-align: center;

}
#pic span{display: block;}
#pic img{z-index: 2;
	padding: 8px;
	background-color:#1b83e6 ;
	}
	#bell{position: absolute;
	top:10px;
left:250px;
font-size: 25px;}
#edit{position: absolute;
	z-index: 9;
	top:90px;
left:230px;
font-size: 25px;}
#edit i{color:#053b54;
font-size: 15px;}
#bell i{color:#053b54;}
#bell strong{position: absolute;
font-weight: bold 1px;
font-size: 10px;
color: white;
border-radius: 50%;
padding:1px 2px;
left: 10px;
}
#wallet {display: flex;
position: absolute;
transform: translateY(-140px) translateX(-40px);}
#wallet div{background-color: rgba(255, 255, 255, 0.103);
	border-radius: 20px;
	padding-top: 20px;
	padding-bottom: 20px; 
	padding-right: 100px; 
	padding-left: 20px; 
	margin:0 35px;

	
	
}
#wallet div i{font-size: 40px;
color:#053b54;}
#wallet .currency{
	font-size: 20px;
}

#everage{
	display: flex;
	width: 300px;
}
#everage div{background-color:rgba(255, 255, 255, 0.103);
	border-radius: 10px;
	padding: 15px ;
	margin:0 17px;
	border: 1px solid rgba(255, 255, 255, 0.164);
	position: relative;
	
	
}
#everage div p{text-align: center;
}
#everage div i{font-size: 30px;
color:	#053b54;
margin: 5px 12.5px;
}
.submenu div{
padding: 15px;
margin: 1px 0px;
border-radius: 5px;}
#dash div{width: 300px;
	background-color: rgba(255, 255, 255, 0.103);
	border-radius: 10px;
	padding: 10px 5px ;
	margin:10px;
	margin-left: 5px;
	
}
a{color: white;}
#dash div i{font-size: 20px;
color:  #1e90ff;}
#id{cursor: pointer;
}
.play{display: none;
	transition: 0.5s ease;
}
.play.active{display: block;}

	

.container{width: 100%;
	overflow: hidden;
	position: absolute;
	top: 30px;
	transition: 0.5s ease;
		transform:     translateX(0px) translateY(0px) ;
}
.container.active{
	transform:translateX(380px)  ;
	display: none;
}
#coin{width: 100px;
position: relative;
right: 103px;
top: -2.5px;
transform: rotateX(46deg) rotateY(10deg) rotateZ(0deg);
}
.brands ul{background-color: #038ecf;
	display: flex;
position: fixed;
margin-top: 75vh;
}
.brands ul li{

}
.brands ul li a{color: white;}
footer{width: 100%;
	margin-bottom: 5px;
	
	
}
#logoa img{ width: 200px;
border-radius: 50%;
padding: 20px;}




#menu li a i{color:#121621b7;}
#logo{border-radius: 50%;}
#avatar {width: 90%;
	z-index: 10;
	display:flexbox;
	background-color: rgba(0, 0, 0, 0.692);
	backdrop-filter: blur(5px);
	overflow: scroll;
	position: fixed;
	top: 0px;
	left: 0;
	margin: 0;
	transition: 1s ease;
	display: none;
}
#avatar.a{
	display: block;
}
#avatar input{
	position: absolute;
	opacity: 0;
}
#avatar.a input{
	position: absolute;
	opacity: 0;
}
#avatar h1{text-align: center;
font-family: poiret one;}
#avatar img{width: 150px;
border-radius: 50%;
margin: 5px;
opacity: 60%;}








}