@import url('https://fonts.googleapis.com/css2?family=Ephesis&family=Roboto:ital,wght@0,100;1,500&family=STIX+Two+Text&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lobster&family=STIX+Two+Text:ital,wght@0,400..700;1,400..700&display=swap');
@font-face {
    font-family: 'Oswald-Medium';
    src: url('resources//Oswald-Medium.ttf');
   
}
@font-face {
  font-family: 'helveticanowtext-black';
  src: url('resources/helveticanowtext-bold.ttf');
  }

@keyframes float {
	0% {
	
		transform: translatey(0px);
	}
	50% {
		
		transform: translatey(-20px);
	}
	100% {
		
		transform: translatey(0px);
	}
}


html {
  padding: 0px 0px;
  scroll-behavior: smooth;
  margin: 0px 0px;
  overflow-x: hidden;
}

*{
  padding: 0;
  margin: 0;
  
}

body {
     /* Image credit: https://pixabay.com/photos/stars-sky-night-starry-sky-1845140/ */
    overflow-x: hidden;
    background: linear-gradient(95deg,#bd51b9, #9854ff,  #6b09ff);
    animation: gradient 15s ease infinite;
    background-size: 400% 400%;
   /*  background: linear-gradient(75deg,rgb(213, 189, 6)0, transparent) rgb(84, 0, 210);*/    
}

@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}



video{
  position: fixed;
  min-width: 100%;
  
}



button{
  
  background: linear-gradient(90deg, #b53fb1, transparent) #5400d2;
  color: rgb(0, 0, 0);
  font-size: 20px;
  padding: 10px 25px;
  border-radius: 50px;
  transition: 0.5s;
  text-decoration: none;
  border:2px solid rgb(251, 249, 255) ;
  text-transform: uppercase;
  font-family: Oswald-Medium;
  color: #ffffff;
  cursor: pointer;
}

button a{
  text-decoration: none;
  
}

button:hover {
  background-color: #f3d721;
}

.intro-buttons:hover{
  background-color: #f3d721;
}



  
/* Skills section*/  
.container-skillstext {
  font-family: Oswald-Medium;
    position: relative;
    background-color: #000000;
    display: flex;
    align-items: center;
    height: 45rem;
}
.text-area{
  color: #ffffff;
  font-size: 2.5rem;
  position: relative;
  right: 7rem;

}

.abouttext {
  font-size: 25px;
  font-weight: lighter;
  font-family: 'Roboto', sans-serif;
 
}
.container-skillicons{
    padding: 0rem 15rem;
    
}

.skill {
  transition: transform 0.5s ease-in;
  
}

.skill{
  height: 55px;
  width: 100px;
}

.skillbox{
  display: flex;
  padding: 1rem 1rem;
  align-items: center;
  text-align: center;
}

.skilltextbox{
  justify-content: space-around;
  font-size: 1.5rem;
}

.skill-section{
  position: relative;
  right: 7rem;
}

.text-area ul li{
  padding: 1rem;
  font-family: 'Roboto', sans-serif;
  list-style: none;
}





/* Skillpage-ends */  

/*Footer*/
footer{
    position: relative;
    bottom: 0;
    left: 0;
    right: 0;
    
    width: 100%;
    color: #ffffff;
}

.fa {
  padding: 20px;
  text-decoration: none;
}


.footer-content{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
}

.socials{
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: center;
    
}

.socials li{
    margin: 0 10px;
}

.socials a{
    text-decoration: none;
    color:#ffffff;
    
}

.socials a i{
    font-size: 2.0rem;
    width: 20px;
    transition: color .4s ease;
    
}

.socials a:hover i{
  
    color: #8d037f;
}

.footer-bottom{
  
    width: 100vw;
    text-align: center;
}

.footer-bottom p{
    font-size: 14px;
    word-spacing: 2px;
    text-transform: capitalize;
    margin-left: 2rem;
    margin-bottom: 1rem;
 }
 .footer-bottom p a{
   color:#ffffff;
   font-size: 15px;
   text-decoration: none;
 }
 .footer-bottom span{
     text-transform: uppercase;
     font-weight: 200;
 }

 .skillfooter {
   position: relative;
 }


 
/* Footer End*/

/* Nav */

header {
    font-family: Oswald-Medium;
    width: 100%;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0px;
    position: fixed;
    top: 0;
    z-index: 5;
    background: #000;
}

.logo {
    font-family: helveticanowtext-black;
    text-decoration: none;
    font-size: 1.5rem;
    color: white;
    margin-left: 1rem;
    transition: transform 0.4s ease-in;
}

.logo:hover {
  
} 

.logoimg{
  width: 3.5rem;
}

.hamburger {
    display: none;
}

.nav-bar ul {
    display: flex;
    list-style-type: none;
    
}
.nav-bar ul li a {
  margin-bottom: 12px;
  color: rgb(255, 255, 255); 
}



.sprog{
  cursor: pointer;
  color: #ffffff;
  font-size: 20px;
  padding: 10px 25px;
}

.intro-text{
  text-align: center;
}

.abouttext{
  font-family: 'Roboto', sans-serif;
}



@media only screen and (max-width: 1320px) {
    header{
        padding: 0 0px;
        z-index: 1;
    }
    video{
      position: fixed;
      min-width: 100%;
      min-height: 145rem;
      
    }
    
}

@media only screen and (max-width: 1100px) {

    header{
        padding: 0 0px;
    }
}

@media only screen and (max-width: 900px) {
    .hamburger {
        display: block;
        cursor: pointer;
    }
    .hamburger .line {
        width: 30px;
        height: 3px;
        background: white;
        margin: 6px 3rem;
    }
    .nav-bar {
        height: 0;
        position: absolute;
        top: 80px;
        left: 0;
        right: 0;
        width: 100vw;
        transition: 0.5s;
        overflow: hidden;
        z-index: 1;
        background-color: #000;
    }
    .nav-bar.active {
        height: 520px;
        width: 100%;
    }
    .nav-bar ul {
        display: block;
        width: fit-content;
        margin: 80px auto 0 auto;
        text-align: center;
        transition: 0.1s;
        opacity: 0;
        z-index: 1;
    }
    .nav-bar.active ul {
        opacity: 1;
        z-index: 1;
        
    }
    .nav-bar ul li a {
        margin-bottom: 12px;
        color: rgb(255, 255, 255); 
    }
    header {
        z-index: 6;
    }
}
/* Navbar-ends */

/* Intro-card */
.index-container{
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    padding: 14rem 10rem;
    background-color: #ffffff00;
    text-align: center;
    color: #ffffff;
    
    
}

.profile-text{
  text-align: left;
  z-index: 1;
  animation: mymove 2s;
  position: relative;
}
@keyframes mymove {
  from {left: -200px;}
  to {left: 0px;}
}

@media only screen and (max-width: 900px) {
  video{
    position: fixed;
    min-width: 100%;
    min-height: 145rem;
    
  }
.skill-section{
  justify-content: center;
}

.container-skillicons{
  padding: 0rem 8rem;
  
}
  .big-index-container{
    flex-wrap: wrap;
  }
  .index-container{
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 1rem;
    margin-left: 1rem;
    margin-right: .8rem;
  }
  .container-skillstext{
    display: flex;
    flex-wrap: wrap;
    margin-left: .8rem;
    margin-right: .8rem;
    
  }
  
  .big-project-container{
    margin-left: .8rem;
    margin-right: .8rem;
  }
  .contact-container{
    margin-left: .8rem;
    margin-right: .8rem;
  }
  #top{
    background-color: #000000;
  }

  h1.text-area{
    font-size: 5rem;
  }



}



.aboutheading {
  font-size: 6vw;
  color: rgb(255, 255, 255); 
  text-transform: uppercase;
  font-family: 'helveticanowtext-black';
}
/*background: linear-gradient(0deg, rgb(255, 255, 255), transparent) #ffffff;
  -webkit-background-clip: text;
  -webkit-text-stroke: 4px transparent;
 */

 #top{
    -webkit-transition-delay: 1s;
      -o-transition-delay: .1s;
      transition-delay: .1s;
      -webkit-transition: 1s;
      -o-transition: .1s;
      transition: .5s;
 }

.skillheading {
  font-family: Oswald-Medium;
  font-size: 4vw;
  color: rgb(255, 255, 255);
  text-align: center;
  align-items: center;
  margin-bottom: 5rem;
  text-transform: uppercase;
  z-index: 1;
}


@media only screen and (max-width: 900px) {
  video{
    position: fixed;
    min-width: 100%;
    min-height: 145rem;
    
  }

  .profilepic{
    order: 0;
  }


  .text{
    
  }

  div.firstcol{
    padding: .1rem .1rem;
  }

  div.btnbox{
    margin-top: 1rem;
    flex-wrap: nowrap;
  }

  a.btn{
    padding: 0.1rem;
    font-size: 14px;
    margin: 0.3rem;
  }

  p{
     font-size: 1rem;

  }
 
  .intro-text{
    padding: 0;
    font-size: 0.7rem;
  }


  .aboutheading{
    margin-bottom: 0rem;
  }



  div.container-skillstext{
    margin-bottom: 0.5rem;
    padding: 5.0rem 2rem;
    margin-top: 1rem;
    

  }
  p.skillstext{
    font-size: .7rem;
    padding: 0rem 0rem;
  }
  h1.skillheading{
    margin-bottom: 0.5rem;
    font-size: 2.5rem;

  }



}


.img-container {
  background-color: n;
  z-index: 1;
/*	transform: translatey(0px);
	animation: float 6s ease-in-out infinite;
  */
  
}
.profilepic{
  height: 333px;
    border-radius: 50%;
    border: 2.5px solid white;
  }
    
  /* Intro-card-ends */

  /* Projects-list */


  .project-heading{
    color: #ffffff;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
    font-size: 4.5vw;
    text-transform: uppercase;
  }

  .btnproj {
    font-family: Oswald-Medium;
  background-color: inherit; /* Green */
  border:2px solid rgb(251, 249, 255) ;
  border-radius: 6rem;
  color: white;
  padding: 0.5rem 2rem;
  margin: 0rem 1rem;
  text-align: center;
  text-decoration: none;
  font-size: 25px;
  transition: 0.5s;
  background: linear-gradient(90deg, #b53fb1, transparent) rgb(84, 0, 210);
  
  }


  .btnproj:hover {
    background-color: #f3d721;
  }


  .project-name{
    font-size: 55px;
    text-transform: uppercase;
    position: relative;
    bottom: 2.5rem;
    margin-left: .6rem;
  }

  .platform{
    height: 65px;
    width: 65px;
    margin: 0rem .5rem;
  }

 

 
  
/* Miscelaneous */


/* Miscelaneous ends*/

/* Smaller viewports */
@media only screen and (max-width: 900px) {
 
  p.abouttext{
    font-size: 18px;
  }
 
  h1.skilltextbox{
    font-size: 18px;
  }
  a.btnproj{
    font-size: 16px;
    padding: .4rem .7rem;
  }
 
  .project-name{
    font-size: 45px;
  }

 
  p.abouttext{
    font-size: 18px;
    margin-bottom: 0;

 }
 .container-abouttext{
  margin-top: 1.5rem;
 }
 
 .aboutheading{
  font-size: 2.5rem;
 }
 .project-heading{
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
 }

 
 h1{
  font-size: 2.2rem;
 }


.skilltextbox{
  font-size: 0.5rem;
}

.big-project-container{
  padding: 5px 5px;
}
p.intro-text{
  font-size: 18px;
}

video{
  position: fixed;
  min-width: 100%;
  min-height: 145rem;
  
}

.text-area{
  color: #ffffff;
  font-size: 2.5rem;
  left: 12rem;
}




}

@media only screen and (max-width: 600px){
  video{
    position: fixed;
    min-height: 49rem;
    
  }
  .profile-text{
    font-size: 1rem;
    animation: none;
  }
  p.intro-text{
    font-size: 18px;
  }
  img.skill{
    height: 3.2rem;
    width: 4.2rem;
    margin: .5rem;
  }

  .btnproj{
    font-size: 12px;
  }

  .skillbox{
    padding: 0rem .5rem;
  }

  .big-project-container{
    padding: 2px 2px;
  }

  h2.introheading2{
    font-size: 31px;
    margin-top: 0;
    margin-bottom: 1rem
  }
  h1.introheading{
    font-size: 44px;
  }
  .aboutheading{
    font-size: 52px;
  }
  p.abouttext{
    font-size: 22px;
    
  }
  p.skillstext{
    font-size: 18px;
  }
  a.btn1{
    font-size: 18px;
  }
  h1.skilltextbox{
    font-size: 18px;
  }
  a.btnproj{
    font-size: 18px;
  }
  h2.project-heading{
    font-size: 45px;
  }
  #top{
    background-color: #000000;
  }

  button{
    font-size: 12px;
    padding: 8px 15px;
  }

  .index-container{
    padding: 11rem 1rem;
  }
 
}

/* Smaller viewports ends*/


@media only screen and (max-width: 766px) {

  .project-container{
    justify-content: center;
  }
  #top{
    background-color: #000000;
  }
}


 /* Progress bar experiment V2  */

#skills-section h1{
  margin-top: .5px;
  margin-bottom: 2px;
  text-align: center;
}
.container{
  width: 60%;
  margin: 22px auto;
  background-color: #000000;
  padding: 2rem 2rem;
}
.container p{
  text-align: center;
  color: #fff;
  margin:  1rem;
}

.progress{
  height: 18px;
  background-color: #ffffff;
  border: 2px solid rgb(255, 255, 255);
  border-radius: 10px;
  
}

.progress .progress-bar{
  width: 0%;
  opacity: 0;
  height: 100%;
  background: linear-gradient(90deg,#b53fb1, transparent) rgb(84, 0, 210);
  border-radius: 10px;
  position: relative;
  transition: all 1.8s;
  animation-delay: 5s;
   
}

.progress-bar span{
  position:relative;
  bottom: 4px;
  color: #c7c7c7;
  padding: 1rem 11rem;
}


.reveal.active {
  transform: translateY(0px);
  opacity: 1;
}

@media only screen and (max-width: 1025px) {
  .abouttext{
   padding: 1px;
  }
  .container-skillstext{
    padding: 25px .1px;
    margin: auto;
  }

@media only screen and (min-width: 1500px) {
  
  
}
 }

 .intro-buttons{
  margin-right: 1.5rem;
  font-family: Oswald-Medium;
  border:2px solid rgb(251, 249, 255) ;
  border-radius: 6rem;
  color: white;
  padding: 0.5rem 1rem;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 22px;
  transition: 0.5s;
  background: linear-gradient(90deg, #b53fb1, transparent) rgb(84, 0, 210);
 }
 .buttons{
  margin-top: 1.2rem;
  display: flex;
  
 }

.skillparent{
  display: flex;
  align-items: center;
}







/* Carousel Container */
.carousel {
  width: 80%;
  margin: auto;
  margin-top: 6rem;
  margin-bottom: 4.5rem;
  overflow: hidden;
  position: relative;
}

/* Carousel Wrapper (for slides) */
.carousel-wrapper {
  display: flex;
  transition: transform 0.5s ease;
}


/* Optional: Dots Navigation */
.carousel-dots {
  position: relative;
  bottom: 61px;
  display: flex;
  gap: 10px;
  justify-content: center;
}


  /* Arrows */
  

  @media only screen and (max-width: 500px) {

    

    .card-image{
      height: 12rem;

    }
    
    
    a.btnproj{
      padding: .1rem .75rem;
      border: 1px solid rgb(251, 249, 255);
    }
    .container-skillicons{
      padding: 0rem 6rem;
    }
    
    .text-area{
      left: 11%;
      margin: 1.5rem 1.5rem;
      font-size: 1.5rem;
      }
    
    .big-project-container{
     padding: 6rem 0rem;
     margin:  0; 
    }
    .project-container{
      padding: 0rem ;
    }

    .carousel{
      margin-top: 2.5rem;
      width: 100%;
    }
    div.container-skillstext{
      margin-bottom: 0.5rem;
      padding: 2.5rem 2rem;
      margin-top: 0rem;
      height: 50rem;
  
    }

    
    .carousel-wrapper{
      height: 15.5rem;
    }

    .buttons{
      justify-content: center;
    }

    .profile-text{
      order: 2;
      text-align: center;
    }

    .img-container{
      order: 1;
    }
    .profilepic{
      height: 8rem;
    }

  }

  

  .carousel {
    width: 78%;
    overflow: hidden;
    position: relative;
  }
  
  /* Carousel Wrapper (for slides) */
  .carousel-wrapper {
    display: flex;
    transition: transform 0.5s ease;
  }
  
  .dots-container {
    position: relative;
  bottom: 61px;
  display: flex;
  gap: 10px;
  justify-content: center;
  }
  
  .dot {
    width: 10px;
    height: 10px;
    background: #ddd;
    border-radius: 50%;
    cursor: pointer
  }
  
  .dot.active {
        background: #ee0bc4;
  }

  .card {
    color: #ffffff;
    font-family: Oswald-Medium;
    background-color: #000000;
    min-width: 100%;
    max-height: 43rem;
  }

  .card img{
    max-width: 100%;
    height: auto;
  }

 

  .project-references{
    position: relative;
    display: flex;
    justify-content: space-between;
    bottom: 42px;
    align-items: center;
  }
  

  .carousel-arrow{
    position: absolute;
    bottom: 18rem;
    display: flex;
    font-size: 18px;
    transform: translateY(-50%);
    width: 25px;
  }

  .carousel-arrow.left {
    left: 15px;
    
  }

  .carousel-arrow.right {
    right: 15px;
  }
 

  
  @media only screen and (max-width: 450px){
    
    .container-skillicons{
      padding: 0rem 5rem;
    }
    .progress-bar span{
      padding: 1rem 7.9rem;
    }
    .carousel{
      width: 92%;
    }
    .intro-buttons{
      border: 1px solid rgb(255, 255, 255);
    }
    a.btnproj{
      font-size: 16px;
      margin-left: 15px;
    }
    .project-references{
      bottom: 20px;
    }

    .project-name{
      font-size: 35px;
      bottom: 8%;
    }
    .platform{
      height: 15px;
      width: 28px;
      margin: 0rem .15rem;
    }
  }