@import url('https://fonts.googleapis.com/css2?family=PT+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap');
*{
	margin:0;
	padding:0;
	color:white;
	scroll-behavior:smooth;
	--webkit-user-select:none;
	-webkit-tap-highlight-color: transparent;
	font-family: 'PT Sans', sans-serif;
	font-family: poppins;
}
*::selection {
  color:teal;
  background: none;
}
body{
	background:#090a09;
	/* background: rgb(169, 8, 8); */
	overflow-x:hidden;
}
.MenuBar{
	display:block;
    position:fixed;
    top:0;
    left:0;
    height:7vh;
    width:100vw;
    box-sizing:border-box;
    background:rgba(9,10, 9, 0.7);
	border-bottom:1px solid rgba(112, 93, 17, 0.4);
    backdrop-filter:blur(2px);
    padding:0.1rem;
    z-index:9;
}
	.MenuBar .Logo{
			position:absolute;
			top: 0.1rem;
			left: 0.1rem;
		    height:6vh;
		    width:20vw;
			margin: 0;
			padding: 0;
	}
	.MenuBar .menu{
		display:inline-block;
			position:absolute;
		    height:40px;
		    color:white;
		    font-size:2rem;
		    font-stretch:ultra-expanded;
		    transition:0.2s;
		    right:1.5rem;
		    background:none;
		    outline:none;
		    border:none;
			width:7vw;
		    font-size:23pt;
		    transition:0.2s;
	}
.Snav{
	display: block;
    position:absolute;
	background:rgba(9, 10, 9, 0.8);
    height:100vh;
    width:100vw;
    left:-120vh;
    top:7vh;
    padding:10rem 0 10rem 0;
    text-align:center;
    transition:0.3s;
    z-index:3;
}
	.Snav .nav{
			display:block;
		    color:white;
			width: 40vw;
			margin: 0 auto;
		    font-size:1.5rem;
		    text-decoration:none;
			transition:0.3s;
	}
	.Snav .nav:hover{
		transform:scale(1.1) translateY(0);
	}
	.Snav .nav::after {
		content: '';
		display: block;
		width: 0;
		height: 2px;
		background: #fff;
		transition: width .3s;
	}
	.Snav .nav:hover::after {
		width: 100%;
	}
a:hover{
    text-decoration:none;
    color:black;
    /* border-bottom:1px solid black; */
}
.footer {
	position:relative;
	top:5%;
	height:200%;
	width:100%;
	padding-top:5%;
	overflow:hidden;
  }
	  .footer .social {
			text-align:center;
	  }
	  .footer .social > a {
			font-size:20px;
			width:40px;
			height:40px;
			display:inline-block;
			text-align:center;
			margin:0 1px;
			color:black;
			padding:1%;
			transition:0.5s;
	  }
		  .footer .social > a:hover {
				text-decoration:none;
				outline:none;
				border:none;
				transform:scale(1.4);
		  }
	  .footer:last-of-type p {
			font-size:13px;
			color:#aaa;
			text-align:center;
			font-family:helvetica;
			font-weight:300;
			letter-spacing:2px;
	  }

.container{
	overflow:hidden;
	height:auto;
	padding:1rem;
	margin:20% 5% 2% 5%;
	z-index:6;
}
.blocks{
	display:flex;
	flex-wrap:nowrap;
	justify-content:space-between;
	height:auto;
	overflow-x:hidden;
	position:relative;
}
	.blockA p{
		text-shadow:0px 0px 20px black;
	}
	.blockB{
		text-align:right;
	}
		.blockB p{
			transform:translateX(67%);
		}
	.blockD, .blockE{
		display:block;
	}
	.blockD{
		display: grid;
		grid-template-columns: auto;
		place-items: center;
	}

.container .blocks .data{
	display:inline-block;
	position:relative;
	z-index:8;
}
	.blocks .data h1{
		font-size:25pt;
		width:100%;
		z-index:5;
		letter-spacing: 0.1rem;
	}
	.blocks .data p{
		color:silver;
		font-size:15pt;
		width:60%;
		line-height:30px;
		letter-spacing:2px;
		margin-top:1%;
		z-index:7;
	}
	.blocks .btn{
		margin-top:7%;
		color:black;
		background:linear-gradient(to right, silver, grey);
		outline:none; border:none;
		padding:2% 4% 2% 4%;
		font-size: 1rem;
		border-radius:5px;
		font-weight:900;
		z-index:5;
		cursor: pointer;
		text-transform: uppercase;
		box-shadow: inset 4px 1px 5px black ,-2px 4px 5px black;
		border-radius: 2rem;
		background: #9c9c9c;
		box-shadow: inset 21px 21px 42px #7d7d7d,
					inset -21px -21px 42px #bbbbbb;
					transition: 0.1s ease-in-out;
	}
	.blocks .btn:hover{
		background:linear-gradient(to right, grey, black);
		background-position:80%;
		color:rgb(211, 211, 211);
		box-shadow: inset 21px 21px 42px #727272,
					inset -21px -21px 42px #7c7c7c;
		
	}
	.blocks .img{
		display:inline-block;
		position:absolute;
		background-position:center;
		background-repeat:no-repeat;
		background-size: contain;
		overflow:hidden;
		z-index: 5;
		height:60%;
		width:60%;
	}
		.imgA{
			background-image:url('./assets/img/1.webp');
			transform:translateX(80%) translateY(15%) scale(1);
			
			/* background-size: 10%; */
		}
		.imgB{
			background-image:url('./assets/img/2.webp');
			transform:translateX(-10%) translateY(30%) scale(1.1);
			background-size: 125%;
		}
		.imgC{
			background-image:url('./assets/img/DALL-E/assistant.webp');
			transform:translateX(70%) translateY(5%);
			background-size: 120%;
		}
.hr{
	display: block;
	width:70vw;
	margin:10rem auto 10rem auto;
	border: none;
	border-top:3px solid white;
	border-radius:5px;
	outline:none;
	z-index:8;
}
.projects{
	padding-top: 10rem;
}
.projects .blockC .data .list{
	display:flex;
	flex-wrap:wrap;
	gap: 1.5rem;
	justify-content:center;
	align-items:center;
	padding:0 5%;
	margin-top:10%;
}

#canvas{
	background-image:silver;
	background-position:center;
	background-repeat:no-repeat;
	background-size:165%;
	margin-bottom:59%;
	box-sizing:border-box;
	left:0;
	right:0;
}
#contact-data{
	display: grid;
	place-items: center;
	grid-template-columns: auto;
	gap: 1rem;
}
.contact-form{
	display:block;
	position:relative;
	text-align:center;
	margin:2rem 10rem auto 1rem;
}
.contact-form .cform{
	display:inline-block;
	position:relative;
	text-align:left;
	margin:auto;
}
.contact-form .cform .row > *:not(.btn-form){
	display:inline-block;
	position:relative;
	background:none; color:silver;
	outline:none; border:none;
	padding:0.3rem; margin:0.5rem;
	width:70vw;
	border-bottom:1px solid silver;
	text-transform: capitalize;	
	font-size:1.1rem;
}
.contact-form .cform .row > *:is(.btn-form , .message){
	text-transform: none;	
}
/* .btn.btn-hire{
	display:block;
	margin:2rem auto;
	width:70vw;
	background:none; color:silver;
	outline:none;
	font-size:1.3rem;
	letter-spacing:0.1rem;
	animation:blink 0.7s linear infinite alternate-reverse;
} */
/* @keyframes blink{
	to{opacity:0;}
} */
.map{
	display: block;
	overflow:hidden;
	margin: auto;
	margin-left: 0rem;
	max-width:75vw;
}
.stats img{
	display: block;
	margin: auto;
	height:40vh;
	width:100%;
}
.stats-lang img{
	display: block;
	margin: auto;
	height:40vh;
	width:100%;
	margin-top:-10vh; 
}

.hdng{
	display: block;
	position: relative;
	margin:0 7rem;
}   

.iffi{
	transform:translate(-20%,0);
}
	.fi{
		position:absolute;
		color:transparent;
		-webkit-text-stroke:1px orange;
		transform:translate(10%,0);
	}
	.lf{
		position:absolute;
		color: orange;
		-webkit-text-stroke:1px orange;
		transform:translate(10%,0);
		animation: wv 4s ease-in-out infinite;
	}

@keyframes wv {
  0%,
  100% {
    clip-path: polygon(
      0% 45%,
      16% 44%,
      33% 50%,
      54% 60%,
      70% 61%,
      84% 59%,
      100% 52%,
      100% 100%,
      0% 100%
    );
  }
  50% {
  clip-path: polygon(
  0% 60%,
  15% 65%,
  34% 66%,
  51% 62%,
  67% 50%,
  84% 45%,
  100% 46%,
  100% 100%,
  0% 100%
  );
  }
  
  }

.font-sts{
	font-size:2.5rem;
	letter-spacing:0.3rem;
	color:orange;
	-webkit-text-stroke:1px orange;
}






.sections-clob{
	width:80vw; height:10rem;
	background-position:center; 
	background-repeat:no-repeat;
	background-size:cover;
	overflow:hidden;
	border-radius:2rem;
	text-align:center;
	margin-bottom:0.5rem;
}
.sections-clob:hover{
	background-size:110%;
}
.sections-clob a{
	display:grid;
	text-decoration: none;
	height: 100%;
	width: 100%;
	text-align:center; place-items:center;
	
}
.games-section{
	background:linear-gradient(rgba(0,0,0,0.3), rgba(0,0,30.5)),url('./assets/img/DALL-E/game-m.webp');
	background-position:center; 
	background-size:cover;
} 
.music-section{
	background:linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,30.5)),url('./assets/img/DALL-E/music.webp');
	background-position:center; 
	background-size:cover;
}
.clcli-section{
	background:linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,50.5)),url('./assets/img/DALL-E/confused.webp');
	background-position:center; 
	background-size:cover;
}
#games p , #musicz p , #clcli p{
	width:60vw;
	color: fuchsia;
	font-weight:900;
	font-size:1.5rem;
	letter-spacing:0.2rem;
	text-shadow:0px 2px 20px black;
	-webkit-text-stroke:0.1px purple;
}
#games button , #musicz button , #clcli button{
	background:none; outline:none;
	border:2px solid fuchsia; border-radius:2rem;
	padding:0.5rem; font-size:1rem;
	width:50vw; letter-spacing:0.1rem;
	transition:0.2s ease;
}
	#games:is(:hover, :focus) button{
		background:purple;
	}
	#musicz p{
		color:lime;
	}
	#musicz button{
		border:2px solid lime;
	}
	#musicz:is(:hover, :focus) button{
		background: #a1ad17;
	}
	#clcli p{
		color: #d1cfcf;

	}
	#clcli button{
		border:2px solid teal;
	}
	#clcli:is(:hover, :focus) button{
		background: #5c5a5a;
	}

















	.c-stacks{
		margin-left: 3rem;
	}
	.stacks-list{
		display: grid;
		place-items: center;
		grid-template-columns:  minmax(auto, auto) 1fr 1fr 1fr;
		overflow: hidden;
	}
	.stacks-list img{
		height: 3rem;
		width:3rem;
		margin: 0.5rem;
		transition: 0.1s ease-in-out;
	}
	.stacks-list img:hover{
		transform: scale(1.35);

	}
	/* body{

		background-image: url('./assets/img/BG/layered-steps-haikei (1).svg');
	} */