@font-face {
    font-family: Montserrat ;
    src: url(resources/Montserrat/Montserrat-VariableFont_wght.ttf);
}

@font-face {
    font-family: Montserrat_medium  ;
    src: url(resources/Montserrat/static/Montserrat-Medium.ttf);
}

@font-face {
    font-family: Trirong  ;
    src: url(resources/Trirong/OFL.txt);
}


.bg{
    position: relative;
    width: 1400px;
    height: 900px;

    background: #1A1B1E;
    /* box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); */
}

html{
    width: 1500px;
    height: 700px;
}
    
.bgimg{
    /* position: relative; */
    width: 2000px;
    height: 700px;
    left: -40px;
    top: 10px;

    background: "bg_image";
    filter: blur(75px);
}

.circle1{
    /* position: absolute; */
    width: 955px;
    height: 861px;
    left: 1167.5px;
    top: 508px;

    background: #000000;
    filter: blur(200px);
}

.circle2{
    /* position: absolute; */
    width: 955px;
    height: 861px;
    left: -494px;
    top: -142px;

    background: #000000;
    filter: blur(200px);
}

.home{
    position: absolute;
    left: 30%;
    /* right: 600px;    */
    top: 4%;
    bottom: 0%;
    cursor: pointer;

    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400;
    font-size: 28px;
    line-height: 29px;
    text-align: center;

    color: #FFFFFF;
}

.about{
    position: absolute;
    cursor: pointer;
    left: 50%;
    top: 4%;
    bottom: 0%;

    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400;
    font-size: 28px;
    line-height: 29px;
    text-align: center;

    color: #FFFFFF;
}

.skillset{
    position: absolute;
    left: 70%;
    top: 4.0%;
    bottom: 0%;
    cursor: pointer;
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400;
    font-size: 28px;
    line-height: 29px;
    text-align: center;

    color: #FFFFFF;
}

.blog{
    position: absolute;
    left: 90%;
    top: 4%;
    bottom: 0%;
    cursor: pointer;
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400;
    font-size: 28px;
    line-height: 29px;
    text-align: center;

    color: #FFFFFF;
}

.hello{
    position: absolute;
    width: 926px;
    height: 302px;
    left: 250px;
    top: 280px;

    font-family: 'Montserrat_medium';
    font-style: normal;
    font-weight: 850;
    font-size: 75px;
    line-height: 85px;

    color: #FFFFFF;
}

.name{
    position: absolute;
    width: 850px;
    height: 118px;
    left: 250px;
    top: 370px;

    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400;
    font-size: 75px;
    line-height: 85px;

    color: #FFFFFF;
}

.sdd{
    position: absolute;
    width: 730px;
    height: 88px;
    left: 250px;
    top: 500px;

    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400;
    font-size: 36px;
    line-height: 44px;

    color: #FFFFFF;

}

.vector{
    position: absolute;
    width: 720px;
    height: 599px;
    left: 980px;
    top: 180px;

}

.bg_about{
    position: absolute;
    width: 500px;
    height: 329px;
    left: 1000px;
    top: 1025px;

    /* background: url(resources/bg_image.png); */
    filter: blur(75px);
}

.pic{
    position: absolute;
    width: 585px;
    height: 555px;
    left: 230px;
    top: 942px;
}

.me{
    position: absolute;
    width: 530px;
    height: 89px;
    left: 960px;
    top: 1030px;

    font-family: 'Montserrat_medium';
    font-style: normal;
    font-weight: 170;
    font-size: 42px;
    line-height: 44px;

    color: #FFFFFF;
}

.abt{
    position: absolute;
    width: 650px;
    height: 250px;
    left: 920px;
    top: 1130px;

    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400;
    font-size: 28px;
    line-height: 40px;

    color: #FFFFFF;
}

.skill_bg{
    position: absolute;
    width: 965.44px;
    height: 529.05px;
    right: 550px;
    top: 2000px;
    
    background: url(image.png);
    filter: blur(150px);
    border-radius: 264.524px;
    transform: matrix(-0.79, -0.61, -0.61, 0.79, 0, 0);
}

.skill{
    position: absolute;
    width: 695px;
    height: 206px;
    left: 600px;
    top: 1560px;

    font-family: 'Trirong';
    font-style: normal;
    font-weight: 500;
    font-size: 110px;
    line-height: 166px;
    text-align: center;

    color: #FFFFFF;
}


.caption{
    position: absolute;
    width: 695px;
    height: 206px;
    left: 600px;
    top: 1740px;

    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 100;
    font-size: 37px;
    line-height: 166px;
    text-align: center;

    color: #FFFFFF;
}

.rect_prg{
    position: absolute;
    width: 300px;
    height: 300px;
    left: 220px;
    top: 2000px;

    background: rgba(217, 217, 217, 0.25);
    border-radius: 20px;
}

.text_prg{
    position: absolute;
    width: 245px;
    height: 82px;
    left: 245px;
    top: 2070px;

    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 600;
    font-size: 32px;
    line-height: 39px;
    display: flex;
    align-items: center;
    text-align: center;

    color: #FFFFFF;
}

.rect_dev{
    position: absolute;
    width: 300px;
    height: 300px;
    left: 570px;
    top: 2000px;

    background: rgba(217, 217, 217, 0.25);
    border-radius: 20px;
}

.text_dev{
    position: absolute;
    width: 245px;
    height: 82px;
    left: 650px;
    top: 2070px;

    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 600;
    font-size: 32px;
    line-height: 39px;
    display: flex;
    align-items: center;
    text-align: center;

    color: #FFFFFF;
}

.rect_des{
    position: absolute;
    width: 300px;
    height: 300px;
    left: 920px;
    top: 2000px;

    background: rgba(217, 217, 217, 0.25);
    border-radius: 20px;
}

.text_des{
    position: absolute;
    width: 245px;
    height: 82px;
    left: 990px;
    top: 2070px;

    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 600;
    font-size: 32px;
    line-height: 39px;
    display: flex;
    align-items: center;
    text-align: center;

    color: #FFFFFF;
}

.rect_acd{
    position: absolute;
    width: 300px;
    height: 300px;
    left: 1270px;
    top: 2000px;

    background: rgba(217, 217, 217, 0.25);
    border-radius: 20px;
}

.text_acd{
    position: absolute;
    width: 245px;
    height: 82px;
    left: 1295px;
    top: 2070px;

    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 600;
    font-size: 32px;
    line-height: 39px;
    display: flex;
    align-items: center;
    text-align: center;

    color: #FFFFFF;
}

.blog_bg{
    position: relative;
    width: 1816.3px;
    height: 380.05px;
    /* right: 438.23px; */
    top: 2500px;

    background: url(image);
    filter: blur(120px);
    border-radius: 264.524px;
    transform: rotate(179.9deg);
}

.start{
    position: absolute;
    width: 503px;
    height: 725px;
    left: 747px;
    top: 2400px;

    font-family: 'Trirong';
    font-style: normal;
    font-weight: 500;
    font-size: 20px;
    line-height: 100px;

    color: #FFFFFF;
}

.blg_rect{
    position: absolute;
    width: 503px;
    height: 725px;
    left: -47px;
    top: 2551px;

    background: rgba(217, 217, 217, 0.25);
    border-radius: 50px;
}

.art{
    position: absolute;
    width: 395px;
    height: 339px;
    left: 60px;
    top: 2520px;

    font-family: 'Trirong';
    font-style: normal;
    font-weight: 500;
    font-size: 115px;
    line-height: 100px;

    color: #FFFFFF;

}

.aws_title{
    position: absolute;
    width: 439px;
    height: 78px;
    left: 620px;
    top: 2600px;

    font-family: 'Montserrat_medium';
    font-style: normal;
    font-weight: 600;
    font-size: 30px;
    line-height: 34px;

    color: #FFFFFF;
}

.aws_cnt{
    position: absolute;
    width: 470px;
    height: 165px;
    left: 600.06px;
    top: 2670px;

    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400;
    font-size: 24px;
    line-height: 27px;

    color: #FFFFFF;

}

.aws_pic{
    position: absolute;
    width: 418px;
    height: 260px;
    left: 1130px;
    top: 2610px;

    /* background: url(image.png); */
    border-radius: 35px;
}

.aws_rect{
    position: absolute;
    width: 418px;
    height: 260px;
    left: 1145px;
    top: 2625.4px;

    background: rgba(217, 217, 217, 0.25);
    border-radius: 35px;
}

.read{
    position: absolute;
    width: 138px;
    height: 34px;
    left: 756px;
    top: 2818px;

    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 500;
    font-size: 22px;
    line-height: 27px;

    color: #FFFFFF;

}

.cidr_title{
    position: absolute;
    width: 320px;
    height: 79px;
    left: 1180px;
    top: 2980px;

    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 600;
    font-size: 28px;
    line-height: 34px;
    text-align: right;

    color: #FFFFFF;

}

.cidr_cnt{
    position: absolute;
    width: 434px;
    height: 166px;
    left: 1100px;
    top: 3080px;

    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400;
    font-size: 22px;
    line-height: 27px;
    text-align: right;

    color: #FFFFFF;
}

.cidr_rct{
    position: absolute;
    width: 418px;
    height: 260px;
    left: 615px;
    top: 2985.4px;

    background: rgba(217, 217, 217, 0.25);
    border-radius: 35px;
}


 .cidr{
    
    position: absolute;
    width: 418px;
    height: 260px;
    left: 630px;
    top: 2970px;

    /* background: url(image.png); */
    border-radius: 35px;
 }   

.more{
    position: absolute;
    width: 138px;
    height: 34px;
    left: 1300px;
    top: 3225px;

    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 500;
    font-size: 22px;
    line-height: 27px;

    color: #FFFFFF;
}

.medium{
    position: absolute;
    width: 50px;
    height: 50px;
    left: 122px;
    top: 3200px;
}

.flw{
    position: absolute;
    width: 153.39px;
    height: 35.34px;
    left: 185.61px;
    top: 3180px;
    
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 500;
    font-size: 28px;
    line-height: 34px;
    
    color: #FFFFFF;
}

.line{
    position: absolute;
    width: 2000px;
    height: 0px;
    left: -1px;
    top: 3450px;

    border: 2px solid #FFFFFF;
}

.cpy{
    position: absolute;
    width: 534px;
    height: 52px;
    left: 120px;
    top: 3500px;

    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400;
    font-size: 25px;
    line-height: 30px;

    color: #FFFFFF;
}

.insta{
    position: absolute;
    width: 50px;
    height: 50px;
    left: 1400px;
    top: 3520px;
}

.github{
    position: absolute;
    width: 50px;
    height: 50px;
    left: 1520px;
    top: 3520px;
}

.linkedin{
    position: absolute;
    width: 50px;
    height: 50px;
    left: 1640px;
    top: 3520px;
}