*{
    margin:0;
    padding:0;
}

html{
    overflow:hidden;
    overflow-y:scroll;
    scroll-behavior:smooth;
}


/*nav-section and name here*/

body{
    background-color:bisque;
    margin:0;
    padding:0;
    width:100vw;
}

#navbar{
margin-right:20px;
padding:15px;
display:flex;
 gap:20px;
 justify-content: flex-end;
}

ul{
    list-style-type: none;;
}

#my-name{
    font-family:Courier,sans-serif;
    color:white;
    position:absolute;
    top:10px;
    left:15px;
}

nav{
background-color: 	#000053;
height:3em;
top:0;
width:100vw;
z-index:-1;
}

li{
    color:white;
    font-weight:bolder;
}

li:hover{

color:#f7c923;
text-shadow:0 0 11px #f7f70b;
transition: 0.2s;
}
a{
    text-decoration:none;
}


/*nav-section and name end here (it has a,li,body,ul,nav selectors)*/

#name-para-pic-ss{
margin-top: 8em;
margin-right:25%;
margin-left: 25%;
margin-bottom:3%;
display:flex;
}

/* heading*/


h1{
font-family:Arial, Helvetica, sans-serif;
font-size:3em;
font-weight: bolder;
background: linear-gradient(90deg,blue,magenta,skyblue);
color:transparent;
-webkit-background-clip:text;
text-shadow:0 0 100px rgb(12, 12, 209);
animation:2s heading infinite alternate;
margin-bottom:10%;
}

@keyframes heading{
100%{
    text-shadow:0 0 100px rgb(214, 10, 214);
}  
}
/*heading ending here*/

/*my picture*/

#my-picture{
margin:-20% 20% 10% 30%;
width:180%;
border-radius:30% 70% 70% 30% / 30% 30% 70% 70%;
	box-shadow:15px 15px 50px rgba(0,0,0,0.2);
	animation: morph 10s infinite;
	overflow:hidden;
}
@keyframes morph {
		0% {
			border-radius:30% 70% 70% 30% / 30% 30% 70% 70%;	
		}
		25% { 
			border-radius:58% 42% 75% 25% / 76% 46% 54% 24%;
		}
		50% {
			border-radius:50% 50% 33% 67% / 55% 27% 73% 45%;
		}
		75% {
			border-radius:33% 67% 58% 42% / 63% 68% 32% 37%;	
		}
	}

/*my picture ends here*/

/*about and Linkdin Icon*/

/* para animation*/
#greetings{
    font-style: italic;
    color:grey;
    font-size:120%;
    margin-bottom:2%;
     overflow: hidden;
  white-space: nowrap;
  border-right: 3px solid black;   /* blinking cursor */
  width: 0;
  animation:
    typing 4s steps(60, end) forwards,
    blink 0.8s infinite;
}

@keyframes typing {
  from { width: 0 }
  to { width:77% } /* <- have to increase the % when changing the screen*/
}

/* cursor blink */
@keyframes blink {
  50% { border-color: transparent }
}

#linkdin-icon{
    width:5%;
}

#github-icon{
    margin-left:-15px;
    margin-bottom: -5px;
    width:11%;
}
/*about and Linkdin Icon ends here*/

/*stacks*/

#toolset-container{
display:flex;
justify-content:space-evenly;
width:70%;
align-items:center;
margin-bottom:15%;
}

#html-icon{
    width:4%;
    height:4%;
}

#css-icon{
    width:4%;
    height:4%;
}
#js-icon{
    width:4%;
    height:4%;
}
#react-icon{
    width:4%;
    height:4%;
}

/*stacks ends here*/


/*about me starts here*/

#about{
  display:flex;
  justify-content: center;
}

#about-img{
    width:110%;
    border-radius:5%;
    transform:rotate(-2deg);
    margin-left:20%;
}

#about-text{
    margin-left:110px;
    margin-right:50px;
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    color:blue;
}

#about-para{
    margin-top:35px;
    color:gray;
    font-family:Georgia, 'Times New Roman', Times, serif;
    font-size:12px;
    font-weight: bold;
}
/*about me ends here*/

/*project, heading, cards and para*/

#project-box{
margin-top:15%;
}

#project-heading{
    display:flex;
    justify-content: center;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    color:blue;
}

#project-para{
    display:flex;
    justify-content: center;
    font-family:Georgia, 'Times New Roman', Times, serif;
    color:gray;
    font-size:12px;
    margin-bottom: 150px;
}

/*sliders starts here*/

/* Container */
.carousel3d {
  width: 400px;
  height: 200px;
  margin:auto;
  perspective: 3000px;
  position: relative;
}

/* Stage that will rotate */
.carousel3d__stage {
  width: 100%;
  height: 100%;
  position: absolute;
  transform-style: preserve-3d;
  animation: spin 20s linear infinite;
  transition: transform 0.8s ease;
  
}

/* Items */
.carousel3d__item {
  position: absolute;
  width: 300px;
  height: 200px;
  left: calc(50% - 150px);
  top: calc(50% - 150px);
  transform: 
    rotateY(calc(var(--i) * 360deg / var(--items)))
    translateZ(500px);
  transition: transform 0.5s ease;
}

.carousel3d__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.3);
}

/* Animation of rotation */
@keyframes spin {
  from { transform: rotateY(0deg); }
  to   { transform: rotateY(360deg); }
}

/*hover over item and item container*/
.carousel3d__item:hover {
  position: absolute;
  width: 400px;
  height: 300px;
  transition: 0.50s ease;
}
/*sliders ends here*/

/*button styling*/
    
#button-box{
    display:flex;
    margin-top:-60px;
    margin-left: 40%;
}

#next-btn{
 background: transparent;
  border: none;
  color: #4B0082;
  font-size: 30px;
  cursor: pointer;
  margin-right:15%;
}

#prev-btn{
 background: transparent;
  border: none;
  color: #4B0082;
  font-size: 30px;
  cursor: pointer;
  margin-left:15%;
}

.nav {
  opacity: 0.5;
  transition: opacity 0.3s ease;
}

.nav:hover {
  opacity: 1;
}

#next-btn:active{
    color:orangered;
}

#prev-btn:active{
    color:orangered;
}
          
#next-text{
    margin-top: 45px;
    margin-left: -147px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: bolder;
    color:#068fff;
}

#prev-text{
    margin-top: 42px;
    margin-left:-25px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: bolder;
    color:#068fff;
}
/*animation on-off button*/
        
#toggle-btn-container{
    margin-top: 70px;
margin-left: 90%;
display:flex;
}

.onoff-btn{
background-color: gray;
width:50px;
height:25px;
border-radius: 200px;
cursor: pointer;
position: relative;
}

.onoff-btn::before{
    position:absolute;
    content: '';
    background-color: white;
    width:25px;
    height:25px;
    border-radius: 200px;
    margin:0;
    transition: 0.2s;
}

input:checked + .onoff-btn{
    background-color: black;
}

input:checked + .onoff-btn::before{
    transform:translateX(25px)
}

#check-btn{
    display: none;
}

#animation-status{
margin-top:10px;
margin-left:1210px;
font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
font-weight: bolder;
color:aqua;
}

.link-btn img{
    height: 17px;
    width:17px;
}

.link-btn:hover{
    background-color: greenyellow;
}
/*project, heading, cards and para end*/

/*contact section starts here*/

#contact{
    margin-left:200px;
    margin-right:-200px;
    margin-top: 10%;
    color:blue;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}


#contact-catchphase{
    margin-top:3%;
    margin-left: 40px;
    color:rgba(196, 10, 10, 0.815);
    font-weight: bold;
    font-size:1.3em;
}

/*email section*/
#email-box{
margin-top:50px;
margin-left:350px;
display:flex;
}

#email-icon{
width:5%;
}

#input-group{
    position: relative;
    width:150px;
    margin-left:8px;
    margin-top:20px;
    margin-bottom: 20px;
}

#input-group input{
    width:100%;
    padding:5px 3px;
    font-size:16px;
    outline:none;
    border:1px solid #068fff;
    background-color: bisque;
    border-top: hidden;
    border-right: hidden;
}

#input-group label{
    position: absolute;
    top:20%;
    left:10px;
    transform: translateY(-50);
    color:#777;
    font-size:16px;
    pointer-events: none;
    transition: 0.3s ease;
    padding:0 5px;
}

#input-group input:focus+label{
    top:-12px;
    left:-3px;
    font-size: 14px;
}
/*contact section ends here*/

/*footer design starts here*/

footer{
    margin-top:50px;
    margin-bottom: 0;
    background-color: #000053;
    color:aqua;
    display: flex;
    height:100%;
}

.footer-details{
    color:aqua;
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-weight: bold;
}

#footer-heading{
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin-left: 40px;
    margin-top: 10px;
}

#footer-para{
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    margin-top: 40px;
    margin-left:-40px;
}

#address-bar{
    margin-left:600px;
    margin-top: 15px;
}
















/* for smaller screens*/

@media (max-width: 768px){

*{
    margin:0;
    padding:0;
}

html{
    overflow:hidden;
    overflow-y:scroll;
    scroll-behavior:smooth;
}


/*nav-section and name here*/

body{
    background-color:bisque;
    margin:0;
    padding:0;
    width:100vw;
}

#navbar{
margin-right:5px;
padding:18px;
display:flex;
 gap:10px;
 justify-content: flex-end;
 font-size: 13px;
}

ul{
    list-style-type: none;;
}

#my-name{
    font-family:Courier,sans-serif;
    color:white;
    padding-top:2px;
    font-size:20px;
}

nav{
background-color: 	#000053;
height:3em;
width:100vw;
z-index:-1;
}

li{
    color:white;
    font-weight:bolder;
}

li:active{

color:#f7c923;
text-shadow:0 0 11px #f7f70b;
transition: 0.2s;
}
a{
 text-decoration:none;
}


/*nav-section and name end here (it has a,li,body,ul,nav selectors)*/

#name-para-pic-ss{
margin-top: 6em;
margin-right:25%;
margin-left: 6%;
margin-bottom:6%;
display:flex;
}

/* heading*/


h1{
font-family:Arial, Helvetica, sans-serif;
font-size:2.0em;
font-weight: bolder;
background: linear-gradient(90deg,blue,magenta,skyblue);
color:transparent;
-webkit-background-clip:text;
text-shadow:0 0 100px rgb(12, 12, 209);
animation:2s heading infinite alternate;
margin-bottom:15%;
}

@keyframes heading{
100%{
    text-shadow:0 0 100px rgb(214, 10, 214);
}  
}
/*heading ending here*/

/*my picture*/

#my-picture{
margin-left:-20px;
margin-top: -35px;
width:250%;
border-radius:30% 70% 70% 30% / 30% 30% 70% 70%;
	box-shadow:15px 15px 50px rgba(0,0,0,0.2);
	animation: morph 10s infinite;
	overflow:hidden;
}
@keyframes morph {
		0% {
			border-radius:30% 70% 70% 30% / 30% 30% 70% 70%;	
		}
		25% { 
			border-radius:58% 42% 75% 25% / 76% 46% 54% 24%;
		}
		50% {
			border-radius:50% 50% 33% 67% / 55% 27% 73% 45%;
		}
		75% {
			border-radius:33% 67% 58% 42% / 63% 68% 32% 37%;	
		}
	}

/*my picture ends here*/

/*about and Linkdin Icon*/

/* para animation*/
#greetings{
 font-style: italic;
 color:grey;
 font-size:70%;
 margin-bottom:2%;
  overflow: hidden;
  white-space: nowrap;
  border-right: 3px solid black;   /* blinking cursor */
  width: 0;
  animation:
    typing 4s steps(60, end) forwards,
    blink 0.8s infinite;
}

@keyframes typing {
  from { width: 0 }
  to { width:95% } /* <- have to increase the % when changing the screen*/
}

/* cursor blink */
@keyframes blink {
  50% { border-color: transparent }
}

#linkdin-icon{
    width:10%;
}

#github-icon{
    margin-left:-10px;
    width:22%;
}
/*about and Linkdin Icon ends here*/

/*stacks*/

#toolset-container{
display:flex;
justify-content:space-evenly;
width:100%;
align-items:center;
margin-bottom:15%;
margin-left:-40px;
}

#html-icon{
    width:6%;
    height:6%;
}

#css-icon{
    width:6%;
    height:6%;
}
#js-icon{
    width:6%;
    height:6%;
}
#react-icon{
    width:6%;
    height:6%;
}

/*stacks ends here*/


/*about me starts here*/

#about{
  margin-top: 100px;
  width:100vw;
}

#about-img{
    width:80%;
    border-radius:5%;
    transform:rotate(-2deg);
    position: absolute;
    left:-10%;
}

#about-text{
margin-top: 200px;
margin-left:15px;
}

#about-heading{
    font-size:16px;
}

#about-para{
    font-size:11px;
}
/*about me ends here*/

/*project, heading, cards and para*/

#project-box{
margin-top:25%;
}

#project-heading{
    display:flex;
    justify-content: center;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    color:blue;
    font-size:17px;
}

#project-para{
    display:flex;
    justify-content: center;
    font-family:Georgia, 'Times New Roman', Times, serif;
    color:gray;
    font-size:11px;
}

/*sliders starts here*/


/* Container */
#carousel-box{
    margin-top:-110px;
}

.carousel3d {
 width: 400px;
  height: 200px;
  margin:auto;
  perspective: 3000px;
  position: relative;
}

/* rotation Stage */
.carousel3d__stage {
  position: absolute;
  width: 100%;
  height: 100%;

  transform-style: preserve-3d;

  animation: spin 40s linear infinite;
  
}

/* Items */
.carousel3d__item {
  position: absolute;
  width: 100px;
  height: 80px;
  left: calc(50% - 50px);
  right: calc(50% - 50px);
  top: calc(50% - 100px);
  transform: 
    rotateY(calc(var(--i) * 360deg / var(--items)))
    translateZ(170px);
  transition: transform 0.5s ease;
}

.carousel3d__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.3);

}

/* Animation of rotation */
@keyframes spin {
  from {
    transform:rotateY(0deg);
  }
  to {
    transform:rotateY(360deg);
  }
}

/*hover over item and item container*/
.carousel3d__item:hover {
  position: absolute;
  width: 200px;
  height: 150px;
  transition: 0.5s ease;
}
/*sliders ends here*/

/*button styling*/

#button-box{
    display:flex;
    margin-top:-60px;
    margin-left: 40%;
    display:none;
}

#next-btn{
 background: transparent;
  border: none;
  color: #4B0082;
  font-size: 30px;
  cursor: pointer;
  margin-right:15%;
}

#prev-btn{
 background: transparent;
  border: none;
  color: #4B0082;
  font-size: 30px;
  cursor: pointer;
  margin-left:15%;
}

.nav {
  opacity: 0.5;
  transition: opacity 0.3s ease;
}

.nav:hover {
  opacity: 1;
}

#next-btn:active{
    color:orangered;
}

#prev-btn:active{
    color:orangered;
}

#next-text{
    margin-top: 45px;
    margin-left: -147px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: bolder;
    color:#068fff;
    display:none;
}

#prev-text{
    margin-top: 42px;
    margin-left:-25px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: bolder;
    color:#068fff;
    display:none;
}
/*animation on-off button*/
#toggle-btn-container{
    margin-top: 70px;
margin-left: 90%;
display:flex;
display:none;
}

.onoff-btn{
background-color: gray;
width:50px;
height:25px;
border-radius: 200px;
cursor: pointer;
position: relative;
}

.onoff-btn::before{
    position:absolute;
    content: '';
    background-color: white;
    width:25px;
    height:25px;
    border-radius: 200px;
    margin:0;
    transition: 0.2s;
}

input:checked + .onoff-btn{
    background-color: black;
}

input:checked + .onoff-btn::before{
    transform:translateX(25px)
}

#check-btn{
    display: none;
}

#animation-status{
margin-top:10px;
margin-left:1210px;
font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
font-weight: bolder;
color:aqua;
display:none;
}

/*Link Button*/

.link-btn img{
    height: 16px;
    width:16px;
}

.link-btn:hover{
    background-color: greenyellow;
}
/*project, heading, cards and para end*/

/*contact section starts here*/

#contact{
    margin-left:10px;
    margin-top: -10%;
    display:flex;
    gap:20px;
    justify-content: center;
    color:blue;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

#contact-heading{
    font-size:17px;
    margin-left:5px;
}

#contact-catchphase{
    margin-left:-40px;
    margin-top:4%;
    color:rgba(196, 10, 10, 0.815);
    font-weight: bold;
    font-size: 11px;
}

/*email section*/
#email-box{
margin-top:50px;
margin-left:-104px;
display:flex;
}

#email-icon{
width:8%;
}

#input-group{
    position: relative;
    width:150px;
    margin-left:8px;
    margin-top:20px;
    margin-bottom: 20px;
}

#input-group input{
    width:100%;
    padding:5px 3px;
    font-size:16px;
    outline:none;
    border:1px solid #068fff;
    background-color: bisque;
    border-top: hidden;
    border-right: hidden;
}

#input-group label{
    position: absolute;
    top:20%;
    left:10px;
    transform: translateY(-50);
    color:#777;
    font-size:16px;
    pointer-events: none;
    transition: 0.3s ease;
    padding:0 5px;
}

#input-group input:focus+label{
    top:-12px;
    left:-3px;
    font-size: 14px;
}
/*contact section ends here*/

/*footer design starts here*/

footer{
    margin-top: 20px;
    background-color: #000053;
    color:aqua;
    display: flex;
    height:100%;
}

.footer-details{
    color:aqua;
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-weight: bold;
}

#footer-heading{
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin-left: 10px;
    margin-top: 2px;
    font-size: 17px;
}

#footer-para{
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    margin-top: 30px;
    margin-left:-60px;
    font-size: 11px;
    margin-bottom:10px;
}

#address-bar{
    margin-left:60px;
    margin-top: 0;
    font-size: 11px;
}
}