:root {

    --head_color: linear-gradient(to right, rgb(0, 221, 255), rgb(255, 255, 255),rgb(255, 255, 255));

    --profile_opacityAfter : 0;
    --profile_tranformTranslateAfter : translate3d(100%, 0, 0);
    --profile_tranformScaleAfter : scale(0);
    --progile_tranformColorline : rgb(0, 221, 255);

    --button_color : linear-gradient(to right, #00eaff, #cdf5f5);
    
}

html {
    margin: 0;
    padding: 0;
    background-image: url("source_img/body_bg.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    border: 0;

    font-family: "Audiowide", sans-serif;
}

/* ---------------------------maindiv-------------------------- */


.maindiv{
    padding: 50% auto;
    margin: 0 0;

    display: grid;
    grid-template-columns: auto auto;

    /* background-color: #ff0000; */

}

@media screen and (max-width: 1120px) {
    .maindiv {
      /* background-color: lightgreen; */

      grid-template-columns: auto;
    }
}


/* ---------------------------Container-------------------------- */
.progress-bar{
    text-align: center;
    color: rgb(0, 0, 0);
    background-color: #dddedc;
    font-style: oblique;
    height: 20px;
    font-size: 20px;

   
}


.container1 {

    width: 1000px;
    height: 1200px;
    margin: 0 auto;
    background-color: white;

    transform: scale(0.9);
    transition-duration: 1s;

    display: grid;
    grid-template-columns: 300px auto;

    /* border: 1px solid red; */
    color: #cdf5f5;

}

.container1:hover,.container:focus {
    --underline_color: #ff6f00;
    --head_color: linear-gradient(to right, rgb(255, 0, 0), rgb(255, 208, 0), rgb(255, 255, 255));
    
    --profile_opacityAfter : 1;
    --profile_tranformTranslateAfter : translate3d(0, 0, 0);
    --profile_tranformScaleAfter : scale(1);
    --progile_tranformColorline : rgb(255, 13, 0);

    --button_color : linear-gradient(to right, #ff5500, #fff700);

    transform: scale(0.8);
    box-shadow: 10px 10px rgba(255, 0, 0, 0.8);


}

.container1 .leftLayout1,.container1 .rightLayout1{
    /* border: 1px solid red; */
}


.leftLayout1{
    /* border: 1px solid red; */
    background-image: url("source_img/bg.jpg");
    background-repeat: no-repeat;
    background-size: cover;
}



.leftLayout1 div{
    width: 400px;
    height: 400px;
    margin: 100px 0;
    border-radius: 100%;
    background-color: black;

    background-image: url("source_img/98.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    z-index: 1;

    overflow: visible;
}


.rightLayout1{
    /* border: 1px solid red; */
    background-image: url("source_img/right_bg.jpg");
    background-repeat: no-repeat;
    background-size: cover;

    display: block;
    z-index: -1;
}

.rightLayout1 .profile-text,.rightLayout1 .skill-text,.rightLayout1 .buttonlist{
     /* border: 1px solid orangered; */
     margin: 20px 50px;
}


    /* -------------- profile ----------- */
.rightLayout1 .profile-text h1{
    
    
    width: 50%;
    margin: 10px auto;
    display: block;
    position: relative;
    padding: 0.5em 0;
    font-size: 60px;

    text-align: center;
    text-transform: uppercase;
    background: var(--head_color);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    transition: 2s;
}


.rightLayout1 .profile-text h1::after{
    content: '';
    background-color: #ff5500;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 20px;
    background-color: var(--progile_tranformColorline);
    /* opacity: var(--profile_opacityAfter); */
    opacity: 1;
    transition: 3s;
    position: absolute;

    transform: var(--profile_tranformScaleAfter);
    
}

.rightLayout1 .profile-text ul{
    
    padding-left: 120px;
    font-size: 35px;
}


    /* -------------- programing language skill ----------- */
.rightLayout1 .skill-text h1{
    
    text-align: center;
    font-size: 60px;
    text-decoration: underline;
    text-decoration-color: var(--progile_tranformColorline);
    transition: 2s;
}

.rightLayout1 .skill-text ul{
    text-align: left;
    font-size: 35px;
}




/* ----------------------- container2 ----------------------- */

:root{
    --con2_color : rgb(0, 221, 255);
    --cn_color : linear-gradient(to right, #00eaff, #cdf5f5);
    --underlineh1 :  rgb(0, 221, 255);
}


.container2{
    width: 800px;
    height: 1200px;
    margin: 0 auto;
    background-color: white;

    /* border-right: 20px solid rgb(255, 255, 255); */

    transform: scale(0.9);
    transition-duration: 1s;

    position: relative;
    display: grid;
    grid-template-columns: 100px auto;
}


.container2:hover{
    --con2_color : rgb(255, 0, 0);
    --cn_color : linear-gradient(to right, #ff0000, #fff700, white);

    transform: scale(0.8);

    
}

.leftLayout2{
    width: 100%;
    height: 100%;
    background-color: var(--con2_color);
    display: block;

    transition: 2s;
}

.rightLayout2{
    width: 100%;
    height: 100%;
    background-image: url("source_img/right_bg.jpg");
    background-repeat: no-repeat;
    background-position: center;
    display: block;

}


.education-text,.fos-text,.favoriteSubject-text{
    width: 100%;
    height: auto;
    color:#cdf5f5;
    /* border: 1px solid red; */
    display: block;
    
}


.education-text div,.fos-text div,.favoriteSubject-text div{
    width: 80%;
    height: auto;
    /* background-color: #000000; */

    /* border: 1px solid yellow; */

    margin: 20px auto;

    
}


.fos-text p{
    text-transform: uppercase;
    font-weight: bolder;
    font-size: 25px;

    background: var(--cn_color);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    
}

.education-text div ul{
    /* border: 1px solid skyblue; */
}

.favoriteSubject-text div ul li{
    /* border: 1px solid pink; */
    font-size: 30px;

}

.rightLayout2 h1{
    font-size: 50px;

    text-decoration: underline;
    text-decoration-color: var(--con2_color);

    transition: 2s;
}





/* ----------------------- container2 ----------------------- */

.container3{
    width: 1000px;
    height: 1200px;
    margin: 0 auto;
    background-color: white;

    /* border-right: 20px solid rgb(255, 255, 255); */

    transform: scale(0.9);
    transition-duration: 1s;

    position: relative;
    display: grid;
    grid-template-columns: 100px auto;
}


.container3:hover{
    --con2_color : rgb(255, 0, 0);
    --cn_color : linear-gradient(to right, #ff0000, #fff700, white);

    transform: scale(0.8);


    --underline_color: #ff6f00;
    --head_color: linear-gradient(to right, rgb(255, 0, 0), rgb(255, 208, 0), rgb(255, 255, 255));
    
    --profile_opacityAfter : 1;
    --profile_tranformTranslateAfter : translate3d(0, 0, 0);
    --profile_tranformScaleAfter : scale(1);
    --progile_tranformColorline : rgb(255, 13, 0);

    --button_color : linear-gradient(to right, #ff5500, #fff700);
    box-shadow: 10px 10px rgba(255, 0, 0, 0.8);

    
}

.leftLayout3{
    width: 100%;
    height: 100%;
    background-color: var(--con2_color);
    display: block;

    transition: 2s;
}

.rightLayout3{
    color: #cdf5f5;
    width: 100%;
    height: 100%;
    background-image: url("source_img/right_bg.jpg");
    background-repeat: no-repeat;
    background-position: center;
    display: block;

}



.rightLayout3 h1{
    font-size: 50px;
    color: #cdf5f5;
    text-align: center;
    text-decoration: underline;
    text-decoration-color: var(--con2_color);

    transition: 2s;
}

.rightLayout3 ul{
    font-size: 50px;
    padding-left: 120px;
    font-size: 35px;
}