*,*::before,*::after{
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	list-style: none;
}
body,html{
	min-height: 100%;
	font-family: sans-serif;
}
html{
font-size: calc(1em + 1vw);
}
body{
	background :#000;
}
#splash{
position :fixed;
top:0%;
left:0%;
height:100%;
width:100%;
background :#222;
display :flex;
justify-content :center;
align-items:center;
color:#ddd;
}
button,input{
font-size: inherit;
}
h2{
	color: blueviolet;
}
.name{
	color: #fff;
}

header{
	height :65px;
	padding: .2em 1.2rem;
	display : grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows:1fr 1fr;
	width:100%;
	position: fixed ;
	top:0;
	color:#fff;
	z-index:100;
	align-content :center;
	transition:all ease-in-out .2s;
	margin-top: 20px;
}
header h1:hover{
	color: blue;
}
header h1{
	grid-column:1/-1;
	text-align:center;
	font-size:1.2rem;
	display: flex;
	align-items:center;
	justify-content:center;
	transition: 0.5s;
	cursor: pointer;
}
header ul{
	grid-column: 1/-1;
	grid-row:2/3;
	display : flex;
	align-items: center;
	justify-content:center;
	background-color: #333;
	border-radius: 40px;
}
header ul li{
	font-size:.8rem;
	margin : 0 3vmin;
	cursor: pointer;
	transition: 0.5s;
}
header ul li:hover{
	color: blueviolet;
}
header img{
width:20px;
position: absolute ;
right:1.2em;
top:1.2em;
}

section{
	padding : 0 1.2em;
	line-height: 1.75;
	color:#fff;
	padding-top:70px;
}

main #home::before {
    position: absolute;
    top: 0;
    content: '';
    height: 110vh;
    width: 100%;
    
    background: linear-gradient(to bottom, rgba(36, 5, 36, 0) 50%, blueviolet 100%);    
    background-size: cover;
    background-position: left;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 85%);
    z-index: -1;
}

main #home{
position: relative;
height :80vh;
display :flex;
justify-content :center;
align-items:center;
flex-direction :column;
text-align :center;
color: #fff;
}
main #home h2{
	line-height: 1.75;
}
main #home .txt{
	border-right:1.5px solid blueviolet;
	color:violet;
}
main #home button{
	margin-top: 2vmin;  
	padding : 1.2vmin 1.2rem;
	border-radius:2rem;
	outline :none;
	background :blueviolet;
	border :transparent;
	color: white;
}
.cv{
	background-color: #333;
	width: 250px;
	height: 55px;
	text-align: center;
	border-radius: 30px;
	transition: 1.0s;
}
.cv:hover{
	background-color: #eee;
	color: #000;
}
.cv a{
	color: #fff;
	text-decoration: none;
}
.cv a:hover{
	color: #000;
}
main #about{
position :relative;
display:flex;
flex-direction:column;
}
main #about article{
flex:.6;
text-align: center;
}
main #about article button, main #portfolio button{
border: transparent ;
outline :none;
background :#ddd;
border-radius:2em;
padding:.4rem .8rem;
color:blueviolet;
}
main #about div{
display :flex;
justify-content:center;
align-items:center;
flex:.4;
}
main #about div img{
width:50%;
}
#about-text.collapsed{
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}
#about-text {
    overflow: hidden;
    transition: max-height 0.5s ease-out, padding 0.5s ease-out;
    max-height: 200px; 
    padding: 0; 
}

#about-text.expanded {
    max-height: 1000px; 
    padding: 10px; 
}

main #portfolio{
height : auto;
}
main #portfolio .skillshare{
text-align: center;
}
main #portfolio .skillshare .skills-card{
background:#000;
border-radius:5px;
padding:1.2rem;
margin:10px 0;
}


main #portfolio .skillshare .skills-card img{
width:40px;
height:auto;
display: block ;
margin:0 auto;
}
main #portfolio .skillshare .skills-card span{
color:blueviolet;
font-weight:700;
position: relative ;
}
main #portfolio .skillshare .skills-card span::before{
position: absolute;
content:'';
width:40%;
height:3px;
background:#ddd;
bottom :-6px;
left:30%;
border-radius:2em;
}

@keyframes glow-border {
	0% {
	  border-color: blueviolet transparent transparent transparent;
	}
	25% {
	  border-color: blueviolet blueviolet transparent transparent;
	}
	50% {
	  border-color: transparent blueviolet blueviolet transparent;
	}
	75% {
	  border-color: transparent transparent blueviolet blueviolet;
	}
	100% {
	  border-color: blueviolet transparent transparent transparent;
	}
  }
  
  main #portfolio .skills-card {
	position: relative;
	background: #000;
	border-radius: 5px;
	padding: 1.2rem;
	margin: 10px 0;
	overflow: hidden;
	border: 3px solid transparent;
	border-radius: 5px;
	animation: glow-border 4s infinite linear;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
  
  main #portfolio .skills-card:hover {
	transform: scale(1.05); 
  }

.projects-container a {
    text-decoration: none;
    display: block;
}


.projects-container {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 20px;
    padding: 20px;
}

.project-card {
    position: relative;
    width: 300px;
    height: 400px;
    perspective: 1000px; 
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: transform 1.0s ease, box-shadow 0.5s ease;
}

.project-card img {
    width: 300px;
    height: 400px;
    object-fit: cover;
    border-radius: 10px;
}

.project-card .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(154, 13, 241, 0.6); 
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.5s ease;
    color: white;
    font-size: 1.5rem;
    font-weight: bold;
    border-radius: 10px;
}

.project-card:hover {
    transform: rotateX(60deg) rotateZ(0deg); 
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
}

.project-card:hover .overlay {
    opacity: 1;
}


#section-template{
width:50px;
height :auto;
}
main #contact{
	text-align: center;
}
main #contact .contact-area{
display :flex;
flex-direction:column-reverse ;
margin-bottom :1.2em;
}
main #contact .contact-area div{
flex:1;
text-align:center;
}
main #contact .contact-area div p{
display: inline-block;
margin:2px;
}
main #contact .contact-area div p img{
width:20px;
height:auto;
}
main #contact .contact-area div span{
display:block;
}
main #contact .contact-area form{
flex:1.5;
}
input{
width :100%;
padding:8px 4px;
margin:5px 0;
border:1px solid blueviolet;
border-radius:5px;
outline :none;
color:blueviolet;
}
input[type="submit"]{
width:45%;
background-color:blueviolet;
color:white;
}
::placeholder{
color:blueviolet;
}

#footer{
padding :1rem 1.2em;
border-top:1.5px solid #ddd;
text-align: center;
}
@media screen and (min-width:48em){
	p,li,input,button{
		font-size: .7rem;
	}
header{
	grid-template-rows:1fr;
}
header h1{
	grid-column:1/2;
	text-align: left;
	font-size:1em;
	justify-content:flex-start;
}
header ul{
	grid-column: 2/3;
	grid-row:1/-1;
}
header ul li{
	font-size:.8rem;
}
main #about{
flex-direction:row-reverse;
padding:60px 5em 2em 5em;
}
main #about article{
padding-top:3em;
padding-left:3em;
}
main #about article span{
background :#333;
text-align:right;
}
main #about div img{
width:100%;
}
main #portfolio .skillshare .skills-card{
display: inline-block;
min-width:50vmin;
margin: 10px;
}
main #portfolio .skillshare p{
width:60%;
margin :0 auto;
}
main #contact .contact-area{
flex-direction :row;
padding:2em;
background:url('data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBw0NDQ0NDQ0NDQ0IDQ0HBwcNDQ8IDQcNFREWFhURFRMYHSggGCYlGxMTITEhJSkrLi46Fx8zODMsNygtLisBCgoKDQ0NDg0NDjcZFRktKysrLS0rKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrK//AABEIAJ8BPgMBIgACEQEDEQH/xAAaAAADAQEBAQAAAAAAAAAAAAACAwQBAAUH/8QAHhABAQEAAwEBAQEBAAAAAAAAAAECAxITEWEUMQT/xAAVAQEBAAAAAAAAAAAAAAAAAAAAAf/EABQRAQAAAAAAAAAAAAAAAAAAAAD/2gAMAwEAAhEDEQA/APhznQQM+N+N+CmQB1b1MkbMiF9XdDplsyBHRvRRMNmAT+bvNVOMU4wS+TfL8VzjHOIEPi3xXTiFOIEHg7w/HozibOEHnfzt/n/HpThbOEHmfzu/m/HqeLfH8B5X8zf5nqeP4LwB5X8zv5fx6vg2cAPJ/md/N+PW8GXgB5H8347+f8er4/jLwg8m/wDP+MvC9S8ILxA83xZeJ6F4ga4wQXjZcLLxguAS3IeqnWS9ZAn4wzUBRXZHICGZgNkHI7MHIDpkUyKZHnIAmRTBsyPORCpgU4zs4HnAEzA5xnZwZnApE4x54j5gzOATziFOJTMCnGCacTZxK5gUwCScQpxK/MU4xEfk2cSzzb5gj8W+Szzb5io/Js4Vnm3zBHeEN4V/QN4wefeFl4l94wXjEefeIvXE9HWC9YB594i9ca/WCtYFQa4ytYXbwTvIiLWSdZW7yRuAk1CdKeSJ9CuybmFYOyBmYZnIcm5BuYZMuzDMwHZyZMtzDJADMmZy2QzMAOcGZwLMNzADnjMzgWYZMgCYHMGTIpALmBTBsgpAKmBzBkyOQCZhvQ742QCejeh3xsgE9HTB/wAdIBPQNwpsDYCa4DeNTYGwEmsFaws1CtQEmsFbwr1CtwEW8Ebyt3E+4CPeU3JlbyRNywEPLEu1vKj5P9BmD8EYPwB2Tck4OyBuTcFZNzQNyZkvJkoGZhsKzTJQMybmE5pmaB+YZmE5psoGSDkLzRygOQUgJRygOCkBKKAKRvxn1oN+N+B+t+gL42QP1v0G/A2N+stANgdCtBoAahWoZql6oF6hO4bqk7oE7ifZ+6n3QI5Il5VPJUvKCTlRcv8Aq3lRcv8AoMwdknB2QOwbknBuQOybknJuaB2RwrNMyBspmaVDMgbKPNKzTMgdim5pOaZmgbmjlKlHKBko4XKKUDJRylQcoD+t+hcA/rvofrfoC+t+h+tAVoa76z6DvoNVtodAXovVHqk6oB1Sd0zVK3QJ3SN07dT7AnaXlU7S8tBLyo+X/VfKk5P9BmTclZNyB2TM0nJmaB+aZmkZpkoH5pmaRmmSgdKZmkSjlA+UzOk80ZnQKc0zOk2dGZ0CiaHNJ5oeaB80OaIlFNAfNDmk80OaA7s3sT2bNAbNN7FfXdgO7N7EzTewG9mdgfQ3QD7BtBdBugdrRWtO1ovWgdrRW67Wit6AO6RvQ9aI3oAbqXkp26n5KCflqXkU8iXYMhmaXkyAbmjlKzRygdKOUmUedAfNDlImhZ0CiUc0nmhzQKJozOk00POgU50ZnSWbMmwUzQ5pNNimwUzQ5pNNimwUzQppNNimwU9ndk/ds2Cjs3snm2+gKOzeyfu3uCjsG6J9GegG3QdaKvIHWwFrRetB1srWwFrRW9M1srWwdrRO9N3onWgZvSfdHvRO9AVtPs7dI0DsjgI2AZBSggoBkopSpRSgbNDmiZRSgdNDmiJRSgfNDmk80OaBRnQ86TTQ86BTNCmk00KaBTNCmk00KaBTNtm0803uCnu2bTTbewKO7e6fu3uCju2bTd29wUd2XZHdl2B3cN2VdBuwHrZetguwa0A9bL1oF0C6ButFa0zWi9UHa0Vqt1S9UAaKpmqXQZBBaApRfQNlAcrZQSt+gZK2Uv62UDZWylfRSgbNDmiJps0CjsKaTzQuwKJoU0mmhdwUzbZpN3bNgqm2zaXu2bBV3b3S929wU9290vo30BT3b3S+jvQFfdl2m9GegKO7LtP3Zdgddl60XdgugMugXQLoF0A7ou1l0C0G2g1XWhtANBRUNBznOBrQuAUrfoG/QF9b9B9cBkrvpf130DezexPZvYDuzexHZ3YFHcXdL3b3BT3b3S93dwVd2zaTu30BX6O9Eno70BX6N9Efo70BZ6O9Efo70Bb6M9Efo70BX6MvIl9HegKfQN2n7u7gfdhuiezuwG3QbS+zvoDtDaz6wGsc4H//2Q==');
background-size:cover;
background-position:center;
}
main #contact .contact-area #follow{
text-align:left;
}
main #contact .contact-area #follow img{
	box-shadow: 5px 5px 5px white;
}
main #contact .contact-area div span{
font-weight: bolder;
}
main #contact .contact-area div p{
display: block;
color:#eee;
}
main #contact .contact-area #follow span{
color:violet;
}
main #contact .contact-area form div{
display: flex;
flex-direction: row-reverse;
} 
input{
background :transparent;
color:#fff;
}
::placeholder{
color:#fff;
}
main #contact .contact-area form div p{
margin:0 .8em;
color:#fff;
}
}