@font-face
{
	font-family: icofont;
	src:url("icofont/fonts/icofont.ttf");
}

@font-face
{
	font-family: jost-bold;
	src:url("fonts/Jost-Bold.ttf");
}

@font-face
{
	font-family: jost-med;
	src:url("fonts/Jost-Medium.ttf");
}

@font-face
{
	font-family: jost;
	src:url("fonts/Jost-Regular.ttf");
}

:root
{
	--bg:#F3F0FF;
	--lightblue:#4A90E2;
	--blue :#0252a5;
	--color3:#ed9e1c;
	--color:#ffc669;
	--green:#16A34A;
	--darkgreen:#14532D;
	--lightgreen : #4ADE80;
	--white:#ffff;
	--grey:#707070;
	--lightgrey:#dfdfdf;
	--darkblue :#0b1634;
	--dark:#202020;
	--dark2:#2a3036;
	--black:#101010;
	--bg:#103030;
	--bg1:#101922;
	--bg2:#1C1C1E;
	--lightbg:#192633;
	--bd:#213345;
	--lightblue:#c0dffe;



}

:not(:defined) {

  opacity: 0;

}

body, a, button, input {
  -webkit-tap-highlight-color: transparent;
}

*
{
  -ms-overflow-style: none;
  scrollbar-width: none;
}

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

:not(:defined) {
  visibility: hidden !important;
}

a
{
	text-decoration: none;
}



.bold
{
	font-family: jost-bold;
	
}

body
{
	font-family: jost;
	padding: 0px;
	margin: 0px;
}

.tagbtn
{
	border:none;
	padding: 5px 10px;
	border-radius: 5px;

	&:hover
	{
		background: var(--color3) !important;
		color:var(--lightgrey) !important;
	}
}

.rbtn
{
	font-family: jost-bold;
	padding: 8px 10px;
	border:none;
	
	color:white;
	background: var(--blue);
	cursor: pointer;
	
	border-radius: 50px;

	& i
	{
		font-size: 34px;
		color:var(--lightblue);
	}

	&:hover
	{
		color:var(--lightblue);
		box-shadow: 0px 0px 10px lightgrey;
		
	}
}

.sbtn
{
	padding: 5px 16px;
	font-family: jost-bold;
	width: 100%;
	outline:2px solid var(--blue);
	border:none;
	color:var(--white);
	background: var(--blue);
	cursor: pointer;

	border-radius: 5px;
	&:hover
	{
		box-shadow: 0px 0px 10px lightgrey;
		
	}
}

.btn
{
	padding: 10px;
	width: 100%;
	outline:2px solid var(--bd);
	border:none;
	color:white;
	background: var(--lightblue);
	cursor: pointer;
	font-family: jost-bold;
	
	border-radius: 50px;

	& i
	{
		font-size: 34px;
		color:var(--lightgrey);
	}

	&:hover
	{
		box-shadow: 0px 0px 10px grey;
		& i
		{
			color:black;
		}
	}
}

[loading]
{
	&::before
	{
		font-family: icofont;
		content:"\eff4";
		display: block;
		font-size: 92px;
		text-align: center;
		position: fixed;
		margin-top: 10rem;
		animation-direction: alternate;
		animation: wheel 2s infinite ease-in-out;
		z-index: 5000;
		width: 100%;
		

	}

	&::after
	{
		content: "";
		width: 100%;
		height: 100dvh;
		position: fixed;
		top:0px;
		left:0px;
		display: grid;
		z-index: 500;

	}
	
}

[phxloader]
{
	&::before
	{
		font-family: icofont;
		color:orange;
		content:"\eff4";
		display: block;
		font-size: 92px;
		text-align: center;
		position: fixed;
		margin-top: 10rem;
		animation-direction: alternate;
		animation: wheel 2s infinite ease-in-out;
		z-index: 5000;
		width: 100%;
		

	}

	&::after
	{
		content: "";
		width: 100%;
		height: 100dvh;
		position: fixed;
		top:0px;
		left:0px;
		display: grid;
		z-index: 500;

	}
	
}



.blur
{
	backdrop-filter: blur(1px);
	
}


.cursor
{
	cursor: pointer;
}


.icon
{
	font-family: icofont;
}


.enter
{
	animation: viewer 0.5s ease-in-out forwards;
}


@keyframes viewer
{
	0%{opacity: 0}
	100%{opacity: 1}
}

@keyframes wheel
{
	0%{transform: rotate(0deg);}
	0%{transform: rotate(360deg);}
}

.mobilemenu
{
  position: fixed;
  display: relative;
  height: 100vh;
  width: 100vw;
  display: none;

  box-sizing: border-box;
  padding: 7rem 10px;
  top:0px;
  left:0px;
  z-index: 300;
  background: white;
  transition: all 3s ease-in-out;
  animation: slideUpFade 0.5s ease-out forwards;

  & .links
  {
  	padding: 10px 16px;
  	text-align: center;
  	& a
  	{
  		display: block;
  		font-size: medium;
  		margin-top: 10px;
  		&:hover
  		{
  			color:var(--blue);
  		}
  	}

  }

  & .mbtn
  {
  	
  	
  	width: 100%;
  	padding: 10px 16px;
  	margin-top: 16px;
  	& .ubtn
  	{
  		display: block;
  		background: var(--blue);
  		color:white;
  		padding: 10px 16px;
  		border-radius: 15px;
  		width: 100%;
  		font-family: jost-bold;
  		text-align: center;
  	}  	

  }
}


@keyframes slideUpFade {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}