@media screen and (max-width: 1290px) {
    .title {
        transform: translateX(calc(100% * 2)) translateY(calc(100% * 2) );
    }
    .cctext {
        font-size: 1vw;
    }
}
@media screen and (max-width: 1290px)  and (max-height:400px){
    .title {
        transform: translateX(calc(100% * 2)) translateY(0);
    }
    .boy { 
        height: calc(calc(100vh * 30) / 100);
        width: calc(calc(100vw * 10) / 100);

    }
    .s4 {
        transform: scale(.2) translateY(calc(10% * -10)) translateX(calc(20% * -5)) rotate(120deg);
    }
    .c1 {
        align-self: start;
        inset: -20px 10px ;
        z-index: 15;
        transform: scale(.2) ;
    }

    .skill-card-caption{
        
        transform: scale(.7);
    }
}

@media screen  and (max-width: 1018px){
     .title {
        transform: translateX(calc(100% * 1.6)) translateY(calc(100% * 1.4));
     }
}
@media screen  and (max-width: 1018px) and (max-height:400px){
     .title {
        transform: translateX(calc(100% * 1.6)) translateY(0) scale(.6);
     }
}



@media screen and (max-width: 988px) {
    .skill-card-title {
        transform: scale(.9);
    }    

    .skill-card-caption {
        transform: scale(.8) translateX(20px);
    }    
    .title {
        transform: translateX(calc(100% * 1.6)) translateY(calc(100% * 2));
    }    
    
}    

@media screen and (max-width: 988px) and (max-height:400px){
    .boy { 
        height: calc(calc(100vh * 30) / 100);
        width: calc(calc(100vw * 10) / 100);

    }
    .title {
        transform: translateX(calc(100% * 1.6)) translateY(10px) scale(.7);
    }    
    
}    



@media screen and (max-width: 950px) {

    .container5{
        margin: 0;
        padding: 0;
        width: 100vw;
        position: relative;
    }
    
    #skill {
        border-width: 0;
    }
    .container {
        display: none;
    }

    .title {
        transform: translateX(calc(100% / 2.5)) translateY(calc(100% * 5));
    }

    .myCap { 
        transform: scale(.8);
    }
    .progBox {
        transform: scale(.9);
        row-gap: 10px;
    }
    #progBoxRow {
        row-gap: 20px;
    }

    .child1,.tags-in,#cc-column {
        height: calc(calc( 100vh * 93) / 100);
        }
    .child0, .child1, .child2, .child3, .child4, .footer, .contact-container {
        width: 100%;
    }
    .contact-container{
        flex-direction: column-reverse;
        height: fit-content;
        overflow: unset;
    }
    .input {
        width: 55%;
    }
    .cctext {
        font-size: 90%;
    }

    #cc-column {
        width: 100%;
        height: calc(calc( 100vh * 93) / 100);

    }
    #stars {
        transform: scaleX(1.6) rotate(18deg);
    }
   
    .skill-card {
        height: 100%;
        
    }
    #skill-card {
        width: 85%;
        flex-wrap: wrap;
        padding: 0;

    }

    #skill-row {
        width: 100%;
        height: 100%;
        flex-wrap: wrap;
    }
    #skill {
        width: 100%;
        height: 150px;
    }

}




@media screen and (max-width: 650px) {
    @keyframes widthInc {
        to {
           width: 80%;
           background-color: rgb(37, 37, 37);
           
        }
   }

   .cardCaption {
      width: 80%;
      row-gap: 0;
   }

   .p-caption {
    height: fit-content;

   }

   .title {
        transform: translateX(calc(100% * 1.1 )) translateY(50px) scale(.7);
   }
    
}



@media screen and (max-width: 450px ) {
    #progBoxRow {
        width: 90% ;
    }
    .title  {
        transform: translateX(20px) translateY(calc(100% * 5)) scale(.9);
    }
    .cctext {
        font-size: 3.5vw;
    }
}


@media screen and (max-width: 350px ) and (max-height:400px) {

    .title  {
        transform: translateX(20px) translateY(50px) scale(.9);
    }
}


@media screen and (max-width: 300px) {
    
    @keyframes widthInc {
        to {
           width: 95%;
           background-color: rgb(37, 37, 37);
           
        }
   }

   #card {
    width: 90%;
   }
}


@media screen and (max-width: 250px) {
    .title {
        transform: scale(.6) translateY(calc(100% * 6));
    }
}


@media screen  and (max-height:400px) {
    .title {
        transform: scale(.7) translateX(calc(100% * 1.5)) translateY(50px);
    }
}
@media screen and (max-height: 250px) {

    .tags-in {
        transform: scale(.3);
        row-gap: 20px;
    }
    .cc-column1 {
        height: 100vh;
        overflow-y: scroll;
    }
    .cctext{
        font-size: 2vw;
    }
    .cc-title {
        padding-bottom: 0;
    }

    .cc-row1 {
        padding-bottom: 5%;
    }

    .send-c {
        padding-top: 3%;
    }
    


}

@media screen and (max-height:200px) {

    .title {
        transform: scale(.2) translateX(calc(100% * 2));
    }
    .cc-title{
        font-size: 150%;
    }
    
}
@media screen and (max-width: 250px) and (max-height: 400px){
    .title {
        transform: scale(.6) translateY(50px) translateX(30px);
    }
}

@media screen and (min-width:2000px) and (min-height: 600px) {

    .myCap {
        padding-top: 40px;
    }    
    .capTitle {
        font-size: 50px;
    }
    .p-caption {
        transform: scale(1.3);
    }
    .skill-card-caption {
        font-size: 150%;
    }
    .skill-card-title{
        font-size: 200%;
    }
    .boy {
        width: calc(calc(100vw * 10) / 100);
        height: calc(calc(100vh * 30) / 100);
    }
    .title {
        transform: translateX(calc(calc(100% * 6)) * -1 ) ;
    }
    #progBoxRow {
        width: calc(calc(100vw * 20) / 100);
        row-gap: 50px;
        padding-top: 1%;
        
    }

    .jvProgress, .cppProgress{
        padding-left: 50px;
    }
    #pctg {
        font-size: 100%;
        padding-right: 40px;
    }

    
    #langTag {
        font-size: 150%;
        padding-bottom: 20px;
    }
    #card {
        width: calc(calc(100vh * 30) / 100);
        height: calc(calc(100vh * 30) / 100);
    }
    .icon {
        transform: scale(150%);
    }

    .cardCaption {
        height: calc(
            150px  +  calc(
                calc(calc(100vh * 30) / 100) - 250px
            )
        );
    }
    .p-caption{
        
        transform: scale(130%);
    }
    #ck-row {
        transform-origin: left;
        transform: scale(120%);
    }

    .close {
        transform-origin: right;
        transform: scale(2) ;
    }
    #tags {
        font-size: 150%;
    }
    .hText {
        font-size: 500px;
    }

    #caps {
        font-size: 20px;
    }
    .line {
        height: calc(calc(20px * 25) / 100);
    }
    @keyframes iconUp {
        from {
            
            transform: scale(1);
        }
        to {
            transform: translateY(calc(100% * -1.6)) scale(180%) ;
            height: 17%;
            box-shadow: 2px 2px 15px  rgb(23, 23, 23);
        }
}
}