*{
  margin: 0px;
  padding: 0px;
}
body{
  background-color: #050505;
  color : white;
}
.navbar{
  display :flex;
  justify-content: space-evenly;
  align-items: center;
  height :100px;
  
  font-size: 1.3rem;
  font-weight: 500;
  margin-left:50px;
  margin-right: 50px;
}
.box a{
  text-decoration: none;
  color: white;
}
.about:active{
  border-bottom:5px solid darkorange;
  border-radius: 5%;
  
}
.pro:active{
  border-bottom:5px solid darkorange;
  border-radius: 5%;
  
}
.res:active {
  border-bottom: 5px solid darkorange;
  border-radius: 5%;
  
}
.home:active {
  border-bottom: 5px solid darkorange;
  border-radius: 5%;
  
}

.name{
  color:#DC40D0;
  font-size: 2.3rem;
  font-weight: 900;
}
.box{
  height :80px;
  width :100px;
  display :flex;
  justify-content: center;
  align-items: center;
  
}
.box i{
  position : absolute;
  top: 15px;
  margin-left: 15px;
}

.panel1{
  height:350px;
  display: flex;
  
  justify-content: space-evenly;
  margin-top: 50px;
}

.info p{
 font-weight: 700;
  font-size: 3rem;
  
}
.info{
  
  font-size: 2rem;
}
.info h1{
  
  font-size: 4rem;
  color: #DC40D0;
  font-family: monospace;
  white-space: nowrap;
  border-right: 3px solid #DC40D0; /* Blinking cursor */
  overflow: hidden;
  width: 0;
  animation: typing 3s steps(30, end) forwards, blink 0.7s step-end infinite;
}

@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

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

  
  

.info button{
 background-color: #050505;
  color: white;
  height: 30px;
  width :100px;
  border:none;
  border-radius: 5%;
  margin-right: 20px;
  border:1px solid white;
}
.info button a{
  color: #fff;
  text-decoration: none;
}
.info button:hover{
  background-color: #DC4040;
  border:none;
  width: 110px;
  height: 35px;
}
.panel2{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.posion{
  width: 48vw;
  align-items: center;
}

.posion div{
  height: 40px;
  border-left:5px solid darkorange;
  width: 250px;
  text-align: left;
  padding-top: 17px;
  margin-bottom: 8px;
  display: flex;

 margin-left:70px ;
}
.posion div i{
  margin-left:20px ;
  margin-right:20px;
  margin-bottom:10px;
  font-weight: 250;
  font-size: 1.5rem;
}
.about-se{
  width: 48vw;
  
  
}
.about-se h2{
  font-size: 2.5rem;
  color:#AF40DC;
  margin-bottom:10px ;
}

.detail{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.detail div{
  width: 100px;
  font-size: 2rem;
  margin-top: 30px;
  margin-bottom: 5px;
}
.detail div p{
  font-size: 0.9rem;
}
.panel3{
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}
.panel3 div{
  width: 60vw;
  margin-top:100px ;
  display : block;
  justify-content: center;
  align-items: center;
  text-align: center;
  
}
.panel3 div h1{
  color:#DC40D0;
  font-size: 5rem;
margin-left: 100px;
  /*border: 5px solid darkorange;
  border-bottom-right-radius: 20%;
  border-top-left-radius: 20%;*/
}
.panel3 div div h2{
  font-size:2.5rem ;
  margin-bottom:5px ;
  text-align: left;
  margin-left:50px;
}
.panel3 div div button{
  width :160px;
  border:none;
  height: 50px;
  margin-top: 30px;
  margin-left: 50px;
  background-color: #AF40DC;
  border-radius: 5% ;
}
.panel3 div div button a{
  text-decoration: none;
  color:#fff;
  
  
  font-size: 2rem;
  background-color: #AF40DC;
}
.panel3 div div button:hover{
  width: 170px;
  height: 55px;
}
.panel4{
  height: 70px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color:#0E0F1E ;
  margin-top:50px;
  font-size: 1.2rem;
  
}
.panel4 a{
  text-decoration: none;
  color: #fff;
}
.project-img img{
  height: 350px;
  width: 350px;
  background-size: cover;
  
}
.skills{
  display: flex;
  justify-content: space-evenly;
}
.skills div img{
  height: 170px;
  width: 170px;
  background-color:#050505 ;
  border-radius: 50%;
  border:1px solid #AF40DC;
  box-shadow: 1rem 1rem 1rem #AF40DC;
  margin-top:100px ;
  margin-bottom: 50px;
  
}
.skills div img:hover{
  border-radius:30%;
}

.panel5{
 
  
  display :flex;
  justify-content: space-evenly;
  align-items: center;
  height: 160px;
}
.panel5 h2{
  margin-bottom: 10px;
}
.panel5 p{
  margin-left: 20px;
}
.socialM i{
  height: 80px;
  width: 80px;
  font-size: 3.3rem;
  text-decoration: none;
}
.socialM a{
  text-decoration: none;
 
}
.copy{
  height :50px;
  justify-content: center;
  text-align: center;
}
.box1 {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 1s ease-out, transform 1s ease-out;
}

.box1.show {
  opacity: 1;
  transform: translateY(0);
}
/* resume class */
.Resume img{
  width :900px;
  border-radius: 5%;
  margin-left: 35px;
}
.Resume {
  width: 100vw;
  border:5px solid #DC40D0;
  margin-top:50px ;
  height: 80vh;
  display: block;
  justify-content: center;
  align-items: center;
  border-radius: 2%;
}
.Resume h1{
  height: 100px;
  text-align: center;
  font-size: 4rem;
}
/* project file*/
  

.projectadd h1{
  color: #DC40D0;
  font-size: 5rem;
}
.projectadd{
  text-align: center;
  border:2px solid orange;
  height: 80vh;
  
}
.pro1{
  
  margin-top:50px;
}
.pro1 h2{
  font-size: 2rem;
  text-align: left;
  margin-left: 23vw;
  
}
.detailadd{
  width: 50vw;
  text-align: left;
  margin-left:50px;
  margin-top: 10px;
  margin-left: 24vw;
}
.btn{
  height: 30px;
  width: 100px;
  font-size: 1rem;
  background-color:#DC40D0 ;
  margin-top: 10px;
  border:none;
  border-radius: 5%;
  margin-left:100px;
}
.btn a{
  text-decoration: none;
  color:#fff;
}

/* meadia query */
@media(max-width:550px){
  .navbar{
    display: flex;
    flex-wrap: wrap;
    height: 50px;
    width: 370px;
    margin-left:2px ;
    margin-right:1vw ;
    font-size: 1rem;
  }
  .name{
    
    font-size: 1.5rem;
    margin-bottom:15px ;
  }
  .navbar div{
    width: 70px;
  }
  
 .panel1{ 
  height:350px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  margin-top: 50px;
  margin-left:10px ;
  
}
.panel1 .img{
  margin-top: 20px;
}
.info{
  font-size: 1rem;
}
.info h1{
  font-size: 2rem;
}
.info p{
  font-size: 1.5rem;
}
.info button{
  margin-left: 20px;
  height :25px;
  width: 100px;
  margin-top:5px ;
}

.panel2{
  display: block;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 50px;
  height: 400px;
}
.about-se{
  position: relative;
  bottom:0px;
  width: 90vw;
  margin-left: 10px;
}
.skills{
  margin-top: 100px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
}
.skills div img{
  height: 90px;
  width: 90px;
}
.skills div img{
  

  border-radius: 50%;
  border:1px solid #AF40DC;
  box-shadow: 0.5rem 0.5rem 0.5rem #AF40DC;
  margin-top:10px ;
  margin-bottom: 50px;
  
}
.panel3 div h1{
  color:#DC40D0;
  font-size: 4rem;
margin-left: 50px;
}
.panel3 div div h2{
  font-size:1.9rem ;
  margin-bottom:5px ;
  text-align: left;
  margin-left:10px;
}
.panel3 div div button{
  width :90px;
  border:none;
  height: 40px;
  margin-top: 30px;
  margin-left: 10px;
  background-color: #AF40DC;
  border-radius: 5% ;
  
}
.panel3 div div button a{
  text-decoration: none;
  color:#fff;
  
  
  font-size: 1rem;
  background-color: #AF40DC;
}
.panel3 div div button:hover{
  width: 100px;
  height: 45px;
}
.panel3{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  align-items: center;
}
.panel3 div{
  width: 90vw;
  margin-top:50px ;
  display : block;
  justify-content: center;
  align-items: center;
  text-align: center;
  
}
.panel4{
  height: 60px;
  font-size: 1rem;
}
.panel5 {
  display: flex;
  flex-wrap: wrap;
}
.socialM a{
  height: 2rem;
  width: 2rem;
  margin-right: 15px;
 
}
.socialM{
  display: flex;
  height: 30px;
}
.socialM a i{
  font-size: 2rem;
}
.Resume img{
  width :94vw;
  border-radius: 5%;
  margin-left: 2vw;
  
}
.Resume h1{
  height: 45px;
  text-align: center;
  font-size: 2rem;
}
.Resume{
  border:2px solid #DC40D0;
}
.projectadd h1{
  color: #DC40D0;
  font-size: 4rem;
}
.projectadd{
  text-align: center;
  border:none;
  height: 90%;
  margin-top: 50px;
  margin-bottom:50px;
}
.pro1{
  
  margin-top:50px;
}
.pro1 h2{
  font-size: 2rem;
  text-align: left;
  margin-left: 5vw;
  
}
.detailadd{
  width: 70vw;
  text-align: left;
  margin-left:50px;
  margin-top: 20px;
  margin-left: 24vw;
}
.btn{
  height: 30px;
  width: 100px;
  font-size: 1rem;
  background-color:#DC40D0 ;
  margin-top: 10px;
  border:none;
  border-radius: 5%;
  margin-left:100px;
}
.btn a{
  text-decoration: none;
  color:#fff;
}
.content h2{
  font-size: 1.5rem;
}

}