div {
  background-color: black;
  color: azure;
}
.myname{
  display: flex;
  
}
#myname{
  padding-top: 7%;
  padding-left: 5%;
}
.all{
  padding-left: 50px;
}
.parentFrontPage{
  display: flex;
}
.container{
  padding-left: 30px;
  height: auto;
  padding-top: 20px;
  position: fixed;
  z-index: 1000;
}
.content1{
    display: flex;
    padding-top: 110px;
}
.content1child{
  margin: 100px;
}

#myImage{
  border-radius:10% ;
}


.flip-inner {
          width: 100%;
        height: 100%;
        position: relative;
        transform-style: preserve-3d;
        transition: transform 0.8s ease;
      }
      .flip-inner.flip {
        transform: rotateY(180deg);
      }
      .flip-inner img {
        width: 100%;
        height: 100%;
        position: absolute;
        backface-visibility: hidden;
        object-fit: cover;
        border-radius: 6px;
      }
      .front {
        transform: rotateY(0deg);
      }
      .back {
        transform: rotateY(180deg);
      }


.sidebar{
  top:100px;
  z-index: 1000;
  height: 100svh;
  width: 250px;
  border-Right: 1px solid rgba(109, 112, 112, 1);
  z-index:4000 ;
  position: fixed;
  transform: translateX(0);
  transition: transform 0.6s ease;
}
#arrow{
  margin-left: 230px;
  margin-bottom: 400px;
  padding: 10px 10px 10px 1px;
  background-color: rgb(79, 92, 92);
  border: 1px solid black;
}
 

.arrow.move {
  transform: translateX(-230px);
}


#aboutMe,#home,
#skills,
#projects,
#internship,#certification {
  scroll-margin-top: 100px;
  scroll-behavior: smooth;
}
.projectName {
  display: inline;
  font-size: 24px;
}
li span{
  padding-left: 20px;
  color: rgb(47, 170, 252);
}
li span:hover{
  color: rgb(34, 34, 246);
  cursor:pointer ;
  text-decoration: underline;
}
.display{
    display: block;
    font-size:18px ;
}
.notDisplay{
  display: none;
}
.intern{
  font-size: 18px;
}
.display {
  display: block;
}

.notDisplay {
  display: none;
}

.projectName {
  font-weight: bold;
  font-size: 18px;
}

.toggle {
  cursor: pointer;
  color: #0d6efd;
}
.notDisplay {
        display: none;
      }
      .toggle {
        cursor: pointer;
        color: #0d6efd;
        text-decoration: underline;
      }