HTMLify

*{
    margin:10px;
    /* background-color: grey; */
}

body{
    display: flex;
    position: absolute;
    /*justify-align: center;
    align-items: center;*/
    min-height: 98vh;
    margin: 10px;
    background-color: grey;
}

.main{
    width:297mm;
    height: 210mm;
    padding:10px;
    background-color: white;
    background-image: url("php.png");
    background-size: 850px 880px;
    background-repeat: no-repeat;
    background-position: center;
}

.main .logo{
    width:170px;
}

.main .box1{
    width:600px;
    height:40px;
    margin-top:-236px;
    margin-left: 500px;;
    background-color:#003565;
    position: absolute;
}

.main .box2{
    width:50px;
    height:400px;
    margin-top:-236px;
    margin-left: 1072px;;
    background-color:#003565;
    position: absolute;
}

.main .box3{
    width:600px;
    height:45px;
    margin-top:185px;
    margin-left: 20px;
    background-color:#003565;
    position: absolute;
}

.main .box4{
    width:45px;
    height:400px;
    margin-top:-170px;
    margin-left:2px;
    background-color:#003565;
    position: absolute;
}

.main .box1_1{
    width:350px;
    height:015px;
    margin-top:-188px;
    margin-left: 710px;
    background: linear-gradient(45deg, #51ccdf, #0450af);
    position: absolute;
}

.main .box1_2{
    width:15px;
    height:210px;
    margin-top:-188px;
    margin-left: 1049px;
    background: linear-gradient(45deg, #51ccdf, #0450af);
    position: absolute;
}

.main .box1_3{
    width:350px;
    height:15px;
    margin-top:160px;
    margin-left: 55px;
    background: linear-gradient(45deg, #0450af, #51ccdf);
    position: absolute;
}

.main .box1_4{
    width:15px;
    height:210px;
    margin-top:-35px;
    margin-left: 55px;
    background: linear-gradient(45deg, #0450af, #51ccdf);
    position: absolute;
}

.heading{
    font-size: 62px;
    /* margin-left: 265.669687px; */
    margin-top: -100px;
}

.subheading{
    font-size: 33px;
    /* margin-left: 335.669687px; */
    padding-top:-10px;
}

.line{
    padding-top:10px;
    font-size: 23px;
}

.line1{
    padding-top:10px;
    font-size: 23px;
}

.line2{
    //padding-top:10px;
    font-size: 23px;
}

.name{
    margin-top:21px;
    font-size:50px;
    color:#003565;
    font-style: italic;
    font-weight: bold;
}

.course{
    font-size: 24px;
    font-weight: bold;
}

.sign{
    margin-left:90px;
    margin-top:60px;
    position: absolute;
}

.manager{
    margin-left:105px;
    font-size:22px;
    margin-top:105px;
    font-weight: bold;
    color:#003565;
    position: absolute;
}

.main .box5{
    width:155px;
    height:4px;
    margin-top:-45px;
    margin-left: 655px;
    background: linear-gradient(45deg, #51ccdf, #0450af);
    position: absolute;
}

.datee{
    width:100%;
    font-size:25px;
    margin-top:-72px;
    margin-left:675px;
    position: absolute;
}

.dateline{
    width:100px;
    margin-top: 200px;
    margin-left:-50px;
    position: absolute;
}

.date{
    font-weight:bold;
    font-size:22px;
    margin-top:-38px;
    margin-left:705px;
    width:100%;
    position: absolute;
}

.qr{
    width:50px;
    margin-left:960px;
    margin-top: -50px;
    position: absolute;
}

.main .box6{
    width:274px;
    height:38px;
    margin-top:130px;
    margin-left: 859px;
    background: linear-gradient(45deg, #51ccdf, #0450af);
    display: flex;
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
}


.box6 img{
    width: 28px;
    height:28px;
    margin-top:5px;
    //margin-left:34x;
}

.box6 p{
    margin-top: 8px;
    color:white;
    font-weight: bold;
    margin-left:5px;
    font-size: 23px;
}

.certificateid{
    margin-left:875px;
    font-size:23px;
    font-weight: bold;
    margin-top:-5px;
}


.link{
    /* color:#003565; */
    margin-left:875px;
    margin-top:-8px;
    font-size:26px;
    color: black;
    text-decoration: none;;
}






@media (max-width: 1000px) {
    .certificateid{
        font-size:20px;
    }
    
    .box6 p{
         font-size:21px;   
    }
}

@media (max-width: 768px) {
    .certificateid{
        font-size:20px;
    }

   .box6 p{
         font-size:21px;   
    }
}

@media print{

    @media (max-width: 1280px){
        .main .box3{
             padding-top:1px;
             width:615px;
             margin-left: 02px;
         }  
    }

    @page {
        size:landscape;
    }
    .main{
        -webkit-print-color-adjust: exact; /* For WebKit browsers like Chrome and Safari */
        print-color-adjust: exact;
        padding:10px;
        background-color: white;
        background-image: url("php.png");
        background-repeat: no-repeat;
        background-position: center;
    }
}