@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&family=Space+Grotesk:wght@500&display=swap');

:root{

	--Linear-gradient-borders: linear-gradient(90deg, hsl(249, 99%, 64%), hsl(278, 94%, 30%));
	--Red: hsl(0, 100%, 66%);

	--White: hsl(0, 0%, 100%);
	--Light-grayish-violet: hsl(270, 3%, 87%);
	--Dark-grayish-violet: hsl(279, 6%, 55%);
	--Very-dark-violet: hsl(278, 68%, 11%);

}

*{
	font-family: "Space Grotesk", sans-serif;
}

body {
  /* cursor: none;  */
  cursor: url('https://img.icons8.com/softteal-color/24/blue-pointer.png'), auto;
  
} 

/* Mobile layout overflow rest */
html, body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

h1, h2 {
  font-family: 'Roboto', sans-serif;
}

main{
	display: flex;
	min-height: 100vh;

}


@keyframes fadeInUp {
	0% {
	  opacity: 0;
	  transform: translateY(50px);
	}
	100% {
	  opacity: 1;
	  transform: translateY(0);
	}
  }
  
  @keyframes gentlePulse {
	0%, 100% {
	  transform: scale(1);
	}
	50% {
	  transform: scale(1.01);
	}
  }
  


.btn{
	outline: none;
	background: var(--Very-dark-violet);
	border: none;
	border-radius: 6px;
	color: var(--White);
	font-size: 12px;
	cursor: pointer;
	padding: 0.5rem 1rem;
	transition: all .5s linear;
}
.btn:hover{
	background: var(--Linear-gradient-borders);
}

.coder{
	margin-top: 2rem;

}
.coder a{
	text-decoration: none;
	color: var(--Very-dark-violet);
	transition: 0.3s linear;
}
.coder a:hover{
	color: var(--Dark-grayish-violet);
}

@media (max-width: 800px){

	main{
		flex-direction: column;
		
	}


	
	.coder{
		text-align: center;
	}

	.resume{
		margin: auto;
	}	
}

.profile_section.column {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 2rem;
  }
  
  .profile_image.center {
	margin-bottom: 1.5rem;
  }
  
  .profile_image img {
	width: 200px;
	height: 200px;
	border-radius: 50%;
	object-fit: cover;
	border: 4px solid var(--Very-dark-violet);
  }
  
  .profile_details {
	max-width: 900px;
	text-align: left;
  }
  
  .profile_details h1 {
	font-size: 2rem;
	font-weight: 700;
	color: var(--Very-dark-violet);
	margin-bottom: 1rem;
	text-align: center;
	/* margin-left: 16dvw; */
  }
 
  .profile_details h2 {
	font-size: 1.5rem;
	font-weight: 500;
	text-align: center;

	color: var(--Very-dark-violet);
	margin-bottom: 1rem;
	/* margin-left: 8dvw; */
  }
 
  
  .profile_details p {
	font-size: 1.2rem;
	color: var(--Dark-grayish-violet);
	margin-top: 2rem;
	margin-left: 8dvw;
  }
  
  .profile_details h3 {
	/* font-size: 18px; */
	margin-bottom: 1rem;
	color: var(--Very-dark-violet);
	margin-left: 12dvw;
  }
  
.experience_list {
	list-style: none;
	padding-left: 0;
	color: var(--Very-dark-violet);
	font-size: 14px;
  }
  
  .experience_list li {
	margin-bottom: 0.5rem;
	margin-left: 12dvw;
  }
  

  @keyframes slowRotate {
	0% {
	  transform: rotateY(0deg);
	}
	50% {
		transform: rotateY(180deg);
	}
	100% {
	  transform: rotateY(180deg);
	}
  }
  
  @keyframes slideInFromLeft {
	0% {
	  transform: translateX(-100%) rotate(-5deg);
	  opacity: 0;
	}
	100% {
	  transform: translateX(0) rotate(0);
	  opacity: 1;
	}
  }
  
  @keyframes slideInFromRight {
	0% {
	  transform: translateX(100%) rotate(5deg);
	  opacity: 0;
	}
	100% {
	  transform: translateX(0) rotate(0);
	  opacity: 1;
	}
  }
  
  #part_1 .image_1 {
	animation: slideInFromLeft 1s ease-out forwards, slowRotate 20s linear infinite;
	animation-delay: 0s, 1s;
	transform-origin: center;
	transition: transform 0.3s ease;
  }
  
  #part_1 .image_2 {
	animation: slideInFromRight 1s ease-out forwards, slowRotate 20s linear infinite;
	animation-delay: 0s, 1s;
	transform-origin: center;
	transition: transform 0.3s ease;
  }



/* Animation triggers */
.animate-fade-in.visible, .animate-slide-in.visible {
  opacity: 1;
  transform: translateY(0);
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* heading underline */


.animate-underline {
    animation: expandWidth 1s ease-out forwards;
    transform-origin: left;
	left: -2.5rem;
    height: 4px;
    bottom: -8px;
  }

  @keyframes expandWidth {
    from {
      width: 0%;
    }
    to {
      width: 140%;
    }
  }


/* styling cursor */

#cursorCanvas {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  pointer-events: none;
}