.child2 {
    height: fit-content;
    padding-bottom: 100px;
    align-self: center;
    background-color: var(--child2-bg);
    display: flex;
    flex-direction: column;
    row-gap: 80px;
    

}



.caption {
    display: flex;
    flex-direction: column;
    height: fit-content;
    row-gap: 40px;
}



#header {
    display: flex;
    flex-direction: column;
    row-gap: 20px;
    font-family: 'Acme', sans-serif;

}

.sepLine{
    width: 100%;
    height: 1px;
    
}
#meLine {
    background: linear-gradient(to left, rgba(41, 39, 39, 0.118)  0%,rgba(68, 68, 68, 0.562)  70%);
}
.sepLines {
    display: flex;
}

.capTitle {
    padding-top: 30px;
    position: relative;
    width: fit-content;
    font-size: 30px;
    transform: translateX(30px);
}

.myCap {
    font-family: 'Manjari', sans-serif;
    font-size: 90%;
    font-weight: 400;
    display: flex;
    width: fit-content;
    height: fit-content;
    flex-direction: column;
    transform: scale(.9);
    align-self: center;
    color: rgb(232, 232, 232);
}

.child3, .child4 {
    display: flex;
    position: relative;
    padding-bottom: 50px;
    display: flex;
    flex-direction: column;
    row-gap: 80px;
    background-color: rgb(20, 19, 19);
    
}


.card {
    display: flex;
    flex-direction: row;
    column-gap: 15px;
    row-gap: 15px;
    align-items: center ;
    justify-content: center;
    flex-wrap: wrap;
    z-index: 10;
}



#card {
    border-radius: 10px;
    width: 250px;
    height: 250px;
    background-color: rgb(33, 33, 35);
    display: flex; 
    flex-direction: column;
    justify-content: center;
    flex-wrap: wrap;
    row-gap: 9px;
    align-items: center;
    box-shadow: 0px 1px 9px -2px rgb(26, 25, 25);;
}



#cardDmbg, .card-bg{
    width: 100%;
    height: 100%;
    z-index: 4;
    opacity: 1;
}

#cardDmbg {
    display: flex;
    justify-content: end;
}

#cardDmbg:hover {
    cursor: pointer;
}

#icon {
    display: flex;
    align-items: center;
    border-radius: 100%;
    background-color: rgba(60, 60, 156, 0.729);
    flex-direction: column;
    width: 80px;
    height: 80px;
    aspect-ratio: 1 / 1.2;
    overflow: hidden;
}

.icon {
    display: flex;
    width: 110px;
    justify-content: center;
    align-items: center;
    justify-items: center;
    background-color: rgb(33, 33, 35);
    position: absolute;
    z-index: 2  ;
    flex-direction: column;
    row-gap: 20px;
}


.icon-animate-in {
    animation: iconUp 400ms  linear forwards;
    border-radius:7px;
}


.icon-animate-out {
    height: fit-content;
    animation: iconDown 100ms linear forwards;
}


.projTitle {
    align-self: center;
    font-family: 'Pacifico', cursive;
    text-transform: uppercase;
    font-size: 20px;
    color: rgb(169, 164, 164);
    font-style: normal;
}

.cardCaption {
    display: flex;
    flex-direction: column;
    font-family: 'Dancing Script', cursive;
    width: 50%;
    row-gap: 10px; 
    height: 150px;
    border-bottom-left-radius: 10px ;
    border-bottom-right-radius: 10px;
    position: absolute;
    z-index: 2  ;
    transform: translateY(50px);
}



.caption-title {
    justify-content: center;
    display: flex;
    font-family: 'Francois One', sans-serif;
    text-transform: uppercase;
    height: fit-content;
    font-size: 20px;
    font-weight: 500;
    display: none;
}

.separator {
  display: flex;
  width: 100%;
  align-items: center;
  height: fit-content;
  flex-direction: column;
  transform: scaleY(.5) scaleX(.8) translateY(-10px);
}


.caption-separator {
    width: 100px;
    height: 1px;
    align-items: center;
}

.caption-separatorLine {
    width: 100px;
    height: 0.1px;
    border-radius: 20px;
    border: 1px solid var(--card-separator);;
}


.p-caption {
  display: flex;
  width: fit-content;
  height: fit-content;
  align-self: center;
  padding-top: 30px;
  z-index: 2    ;
  font-family: 'Manjari', sans-serif;
  font-weight: 100;
  font-size: 15px;
  transform: scale(.9);

}

.caption-top {
    width: 200px;
    height:10px;
    position: relative;
    top: 9px;

}
.top {
    fill:     rgb(27, 27, 28);
}


.path-separator {
    fill: var(--card-separator);;
}


.dot {
    width: 200px ; 
    height: 80px;
    position: relative;
    align-self: flex-start;
    align-items: start;

}
.lapBox{
    width: 50px;
    height: 50px;
    /* rgba(255, 0, 0, 0.736) */
    border: 8px solid rgb(148, 141, 148);
    border-radius: 10px ;
    align-self: center;
    transform: scale(.9) translateY(5px);

}


.lapline {
    width: 70px;
    height: 0;
    align-self: center;
    border: 4px solid  rgb(148, 141, 148);
    border-radius: 7px;
    transform: scale(.9) translateY(-3px) translateX(3px);
}



.card-caption-in {
    color: black;
    opacity: 0;
    animation: test 400ms ease forwards;
}



.pseudo-card {
    width: 100%;
    height: 100%;
}


.p-captionAnimateIn {
    opacity: 0;
    display: flex;
    animation: reveal 400ms  linear 500ms forwards;
}

.cardKeywords-animateIn{
   position: relative;
   opacity: 0;
   animation: revealWithTranslateY 400ms linear 500ms forwards;
}