.cardCaption {
    display: none;

}

.cardKeywords {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    font-family: 'Questrial', sans-serif;
    width: fit-content;
    height: inherit;
    text-transform: uppercase;
    font-size: 15px;
    justify-content: end;
    align-items: end;
}



#ck-row {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    transform: scale(.9) ;
    padding-bottom: 10px;
}

#ck {
    display: flex;
    justify-content: center;
    align-items: center;
    color: rgb(187, 186, 186);
    background-color: rgb(88, 87, 87);
    border-radius: 2px;
    width: 80px;
    height: 30px;
    transform: scale(.9);
}



.internet {
    width: 100%;
    height: 100%;
    border-radius: 100%;
    background-color: rgba(255, 25, 0, 0.63);
}


#internet-draw{
    stroke: rgb(245, 189, 189);
    stroke-width: 2px;
} 


.pen {
    width: 100%;
    border-radius: 100%;
    height: 100%;
    background-color: rgba(92, 73, 199, 0.849);
}


.penLogo {
    stroke: rgb(185, 174, 174);
    stroke-width: 1.2px;
}

#penBox {
    filter: none;
    fill: rgb(185, 174, 174)
}


#cardTitle {
    font-family: 'Yanone Kaffeesatz', sans-serif;
    text-transform: uppercase;
    display: flex;
    font-weight: 200;
    transform: scale(1.3) ;
}

.card-in {
    animation: widthInc 500ms  linear forwards;
}
.card-out {
        position: absolute;
        opacity: 0;
}

#proj {
    display: flex;
    z-index: 5;
    height: fit-content;
    width: fit-content;
}

.back-button {
    display: flex;
    height: fit-content;
    width: fit-content;
    position: relative;
    right: 5px;
    top: 5px;
    display: none;
    
}

.close {
    width: 10px;
    height: 10px;
    padding: 10px;
    border-radius: 15px;
    opacity: .2;
    transform: scale(.9);
}
.close:hover{
    cursor: pointer;
    opacity: 1;
}

#closeL1, #closeL2 {
    stroke: rgb(167, 167, 167);
}

#closeL1, #closeL2 {
    transform-box: fill-box;
    transform-origin: center;
}
#closeL1 {
    transform: rotate(315deg);

}
#closeL2 {
    transform: rotate(226deg);
  

}

.serviceTitle {
    background-color:rgb(17, 16, 16)
}


#serviceLine {
        background: linear-gradient(to left, rgba(41, 39, 39, 0.107)  0%,rgba(48, 46, 46, 0.9)  70%);
        
    }

.skillTitle {
    background-color: var(--child2-bg);
}
#skillLine {
    background: linear-gradient(to left, rgba(18, 18, 18, 0.107)  0%,rgb(63, 61, 61)  70%);
}

.child4 {
        padding: 0;
        height: fit-content;
        row-gap: 0;
    }



    
.skill-card {
    width: 100%;
    height: calc(calc( 100vh * 50) / 100);
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgb(17, 16, 16);
    padding-top: 20px;
    position: relative;
    padding-bottom: 100px;

}


#skill-card {
    display: flex;
    flex-direction: column;
    width: 70%;
    height: 100%;
    padding-left: 45px;
}

#skill-row {

     width: 100%;
     height: 90%;
     display: flex;
     flex-direction: row;
}



#skill {
    width: 50%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background-color: rgb(23, 22, 22);
    row-gap: 0;
}



.skill1 {
    border-top-left-radius: var(--style-card-border-radius);
}
.skill4 {
    border-bottom-right-radius: var(--style-card-border-radius);
}

.skill2 {
    border-top-right-radius: var(--style-card-border-radius);

}
.skill3{ 
    border-bottom-left-radius: var(--style-card-border-radius);
}

.skill-card-title {
    font-family: "BenchNine", sans-serif;
    text-transform: uppercase;
    font-size: 140%;
    padding-top: 20px;
    transform-origin: left;
    display: flex;
    flex-direction: column;
    color: rgb(150, 114, 207);
}

.skill-card-caption {
    font-family: 'Manjari', sans-serif;
    font-weight: 400;
    color: rgb(157, 148, 148);
    font-size: 105%;
    white-space: pre-wrap;
    transform-origin: left;
    transform: scale(.9) ;
    padding-left: 8%;
}


.skilltext {
    padding-left: 5%;
    padding-bottom: 2%;
}

.footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: rgb(20, 19, 19);
}


.attribs {
    display: flex;
    padding-bottom: 10px;
    padding-top: 10px;
    column-gap: 10px;
    font-size: x-small;
    font-family: 'Manjari', sans-serif;
    color: rgb(66, 65, 65);
    text-transform: uppercase;
    opacity: .6;

}

.contribs:hover {
    color: rgb(108, 105, 105);
}
.contribs, .credit{
    text-decoration: none;
    color:inherit;
    outline: 0;
    
}

.credit {
    padding-top: 10px;
    width: 100%;
    height: fit-content;
    display: flex;
    justify-content: end;
}
.credit-text{
    position: relative;
    right: 15px;
    font-size: 90%;
    padding-bottom: 5px;
    font-family: 'Reenie Beanie', cursive;
    font-weight: 400;
    color: rgb(96, 93, 93);
    opacity: .6;
}

#heart {
    position: relative;
    transform: scale(.7);
    transform-origin: top;
    padding-left: 2px;
    padding-right: 2px;
    animation: heartAnimation 900ms  linear infinite;

}