*{
  margin:0;
  padding:0;
  box-sizing: border-box;
}

body{
  background-color:#0c0c0c;
  overflow-x: hidden;
}
.navbar{
  display:flex;
  justify-content:center ;
  align-items: center;
  background-color: #000;
  position:sticky;
  top:0;
}
.navbar ul{
  display:flex;
  list-style:none;
  margin: 2rem 0;

}
.navbar ul li{
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-seri;
  font-size: 1em;
  border:0.03em;
  font-weight:lighter;
  color:white;
}
.navbar ul li a{
  text-decoration:double;
  color:white;
  padding: 0.6em 3em;
  transition:all .5s ease-in;
}


.navbar ul li a:hover{
  background-color:#66FcF1;
  color:rgb(19, 19, 19);
  letter-spacing: 0.3em;
  box-shadow:0 0 1em #4ca09b;
  
}
#Image_1{
  width:30%;
  height:10%;
  margin-left:45%;
  display:flex;
  
}
.tree{
  
  fill-opacity:0;
  stroke:rgb(18, 222, 198);
  stroke-width:60px;
  stroke-dashoffset:0;
  stroke-dasharray:10000;
  animation:tree 12s ease-in-out}

  @keyframes tree{
    0%
    {
      stroke-dashoffset:10000;
    }

    100%
    {
      stroke-dashoffset:0;
    }

  }

  
  #home{
    display:flex;
    flex-direction:column;
    background-color:#000000;
    height:20%;
    justify-content:center;
    align-items: center;
    color:white;
  }
  #home::before{
    content:" ";
    position: absolute;
    top:0;
    right:0;
    height:20%;
    width:100%;
    background-image: url(/images/sucheta_background.jpg);
    z-index: -1;
    opacity:0.4;

  }
  .main{
    display:flex;
    flex-direction: column column-reverse;
    border:1%;
    align-items:center;
    position:absolute;
    top:20%;
    right:65%;
  }
  .headings{
    font-size:5rem;
    line-height:6rem;
    font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    color:transparent;
    -webkit-text-stroke: 0.01em rgb(244, 237, 237);
    color:transparent;
    background-image:linear-gradient(rgb(242, 246, 247),#eff4f4);
    background-repeat:no-repeat;
    -webkit-background-clip: text;
    background-position: -850px 0;
    animation:backcolor 5s linear ;
    font-weight: 600;
    margin-left:23%;
    align-items: right;

  }

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

  #about{
    display:flex;
    flex-direction: column;
    box-sizing:border-box;
    padding:2em;
    margin: bottom 2em;;

  }
  .introheadings{
    font-size:5rem;
    line-height:1em;
    font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    color:transparent;
    -webkit-text-stroke: 0.05em rgb(250, 247, 247);
    color:transparent;
    text-align: center;
    margin:75px 0px;
    text-decoration:underline;
    text-decoration-color:#fff2cf;
    text-decoration-style:dotted;
  }

  #pic{
    display:flex;
  }
  #pic img{
    display:flex;
    width:18%;
    height:28%;
    border-width:0.1em;
    margin-left: 0.1em;
  }
  #pic p{
    color:#eae4e4;
  }
  #intro{
    display:flex;
    flex-direction:column;
    text-align:justify;
    padding:1em;
  }

  #intro h2{
    font-size:2rem;
    color:#edf1f0;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    margin-bottom: 0.1em;
    letter-spacing: 2px;
    text-decoration-color: #66FcF1;
    text-decoration-line: underline;
  }
  #intro p{
    font-size:1.3rem;
    color:#edf1f0;
    font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  }
  #education{
    display: flex;
    flex-direction:column;
    padding:1em;
  }
  .row{
    display:flex;
  }

  .box{
    display:flex;
    flex-direction: column;
    width:100%;
    color:#f0d0a2;
    height: 350px;
    border:1px solid rgb(186, 50, 116);
    border-width:0.81em;
    margin:1em;
    align-items:center;
    text-align:justify;
    padding:0.1em;
    border-radius:1em;
    background:linear-gradient(to top,rgb(rgb(57, 156, 100) 50%,white 40%));
    background-size:100% 200%;
    transition:all .8s;

  }
  .box:hover{
    background-position:left bottom;
    color:rgb(29, 206, 212);
    border:none;
    box-shadow: 0 0 20px;
  }
.innerheadings{
  font-size:3rem;
  font-weight:2rem;
  text-align: center;
  margin:40px 0px;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

#hobbies{
  display: flex;
  flex-direction:column;
  padding:1rem;
}

.container{
  color:#eae4e4;
  text-align: left;
  font-size:30px;
  position:relative;
  width:100%;
  height:100vh;
  overflow:hidden;
}
.bubbles{
  position:relative;
  display:flex;
  z-index: -100;
}

.bubbles span{
  position:relative;
  width:1rem;
  height:1rem;
  background:rgb(157, 237, 194);
  opacity:0.7;
  margin:1rem;
  border-radius:50%;
  box-shadow:0 0 0 10px #74cbe3, 
  0 0 50px #edf1f0,
  0 0 100px rgb(102, 224, 233);
  animation:animate 15s linear infinite;
  animation-duration:calc(200s/var(--i));
}
.bubbles span:nth-child(even){
  background:rgb(158, 135, 215);
  box-shadow:0 0 0 10px #339dcb,
   0 0 0.5rem #67e6bb,
   0 0 0.7rem rgb(102, 224, 233);
}
@keyframes animate{
  0%{
    transform: translateY(100vh) scale(0);
  }

  100%{
    transform: translateY(-10vh) scale(1);
  }
}

#skills{
  display:flex;
  flex-direction: column;
  padding:1em;}

.skillborder{
  display:flex;
  flex-direction: column;
  gap:20px;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}
.skillborder a{
  width:48%;
  position:relative;
  background:transparent;
  -webkit-text-stroke:black;
  color:black;
  text-decoration: none;
  text-align: center;
  text-transform:uppercase;
  font-size:1rem;
  letter-spacing: 0.1rem;
  padding: 10px 30px;
  transition:0.5s;
}

.skillborder a:hover{
  letter-spacing: 0.25em;
  width:58%;
}
.skillborder a::before{
  content:'';
  position:absolute;
  inset:2px;
  background-color: rgb(67, 143, 118);
  border-color:rgb(17, 64, 48);
}

.skillborder a span{
  position:relative;
  z-index:1;
}

.skillborder a i{
  position:absolute;
  inset:0;
  display: block;
}

.skillborder a i::before{
  content:' ';
  position: absolute;
  top:-3.5px;
  left:80%;
  width: 2em;
  height:0.8em;
  border: 0.3em solid rgb(240, 239, 245);
  transition:0.5s;
}

.skillborder a:hover i::before{
  
  width: 0.3em;
  height:0.09em;
  left:20%;
 
}

.skillborder a i::after{
  content:' ';
  position: absolute;
  bottom:-0.3rem;
  left:80%;
  width: 2em;
  height:.8em;
  border: 0.3em solid rgb(100, 34, 75);
  transition:0.5s;
}

.skillborder a:hover i::after{
  
  width: 0.4em;
  height:0.11em;
  left:80%;
 
}


#achievements{
  display: flex;
  flex-direction:column;
  align-items:center;
  padding:1rem;
  color:#eae4e4;
  font-size:2.2rem;
}
.rectangle svg{
  margin-left: 0%;
width:1.2rem;
height:1.2rem;
}
.rectangle svg rect{
  width:1.2rem;
  height:1.2rem;
  fill:none;
  stroke-width:0.5rem;
  stroke:rgb(222, 60, 89);
  stroke-dasharray: 100;
  stroke-dashoffset: 50%;
  animation:rec 4s linear infinite;
}
.rectangle p{
  font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  font-size:1.2rem;
 }
@keyframes rec{
  to{
    stroke-dashoffset: 510%;
  }
}

#contact{
  display:flex;
  flex-direction: column;
  box-sizing: border-box;
  background-color: #050505;
  color:rgb(118, 204, 219);
  padding: 1rem;
  font-size:1em;
}

.form{
  display:flex;
  flex-direction: column;
  box-sizing:border-box;
  align-items: right;
  margin:1% 0;
}

.input{
  padding:12px;
  margin-left:10%;
  width:30%;
  border:none;
  outline:none;
}
span{
  font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  font-size:2em;
  margin-left:10%;
  margin-bottom: 2%;
  align-items: center;
}
#msg{
  width:40%;
  padding:1rem;
  margin-left:10%;
  outline:none;
}
#send{
  background-color: #98427e;
  padding:10px;
  width:10%;
  margin-left:10%;
  margin-bottom: 10%;
  color:#67e6bb;
  font-size:1em;
  outline:none
}

.contactbox {
  align-items: center;
  width:30%;
  font-size:1.3em;
  font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  letter-spacing: 0.2em;
  margin-left:60%;
  line-height: 3em;
  text-align:center;
  color:#66FcF1;
}

#send:hover{
  cursor:pointer;
  box-shadow: #67e6bb;
  color:#000000;
}

.contactheading{
  font-size:70px;
    line-height:80px;
    font-family:'Times New Roman', Times, serif;
    color:transparent;
    -webkit-text-stroke: 3px rgb(68, 164, 179);
    color:transparent;
    text-align: center;
    margin:40px 0px;
    text-decoration:underline;
    text-decoration-color:rgb(225, 230, 236);
    text-decoration-style:dotted;
}
  
footer{
  position:relative;
  width:100%;
  background: #6fc8d2;
  min-height: 100px;
  padding: 20px 50px;
  display:flex;
  justify-content: center;
  align-items: center;
}

footer .socials{
  position:relative;
  display:flex;
  justify-content:center;
  align-items:center;
  margin:10px;
  flex-wrap: wrap;
}
footer .socials li{
  list-style:none;
}
footer .socials li a{
  font-size: 2em;
  color:#fff;
  margin:0 10px;
  display:inline-block;
  transition:0.5s;

}

footer .socials li a:hover{
transform:translateY(-10px);

}
footer p{
  color:#080808;
  text-align:center;
  margin-top:15px;
  margin-bottom: 10px;
  font-size:1.1em;
}
footer .wave{
position:absolute;
top:-100px;
left:0;
width:100%;
height:100px;
background:rgb(0, 0, 0) url(sucheta_wave.png);
background-size:1000px 100px;
}

footer .wave#wave1{
  z-index:1000;
  opacity:0.8;
  bottom:0;
  animation:wave 4s linear infinite;
}

footer .wave#wave2{
  z-index:1000;
  opacity:0.5;
  bottom:10px;
  animation:wave2 4s linear infinite;
}

footer .wave#wave3{
  z-index:999;
  opacity:0.2;
  bottom:15px;
  animation:wave 3s linear infinite;
}

footer .wave#wave4{
  z-index:999;
  opacity:0.1;
  bottom:20px;
  animation:wave2 3s linear infinite;
}
@keyframes wave{

  0%{
    background-position-x: 1000px;
  }
  100%{
    background-position-x: 0px;
  }

}

@keyframes wave2{

  0%{
    background-position-x: 0px;
  }
  100%{
    background-position-x: 1000px;
  }

}

.circle{
  height: 24px;
  width: 24px;
  border-radius: 24px;
  background-color: #08fdd8;
  top: 0;
  right: 0;
  position: fixed;
  z-index: -1;
}
.sk{
  opacity: 0;
}
.sk1{
  opacity: 0;
}
.sk2{
  opacity: 0;
}
.slideup{
  opacity: 0;
  animation: slideup 2s forwards;
}
@keyframes slideup{
  0%{
      opacity: 0;
      translate: 0 40px;
  }
  100%{
      opacity: 1;
      translate: none;
  }
}
.slideleft{
  opacity: 0;
  animation: slideleft 2s forwards;
}
@keyframes slideleft{
  0%{
      opacity: 0;
      transform: translateX(20%);
  }
  100%{
      opacity: 1;
      translate: none;
  }
}

.slideright{
  opacity: 0;
  animation: slideright 2s forwards;
}
@keyframes slideright{
  0%{
      opacity: 0;
      transform: translateX(-20%);
  }
  100%{
      opacity: 1;
      translate: none;
  }
}