@media (min-width:768px) /*In this CSS code,
    we are targeting screens with a minimum width of 768px.
    If the screen is more than or equal to 768px wide,
    the body code will run.*/
{


    /* code for header blue color bar(color shade feasture START)*/
    #header {
        height: 75px;
        background-image: linear-gradient(to left, #0082C0, rgb(4, 68, 113));
        width: 100%;
    }


    #center {
        text-align: left;
        position: absolute;
        margin-left: calc(12% + 100px);
       
    }
    /* code for header blue color bar(color shade feasture END)*/


    #pagebody {
      
        margin-left: 12%;
        margin-right: 12%;
        
    }
}

@media (max-width: 768px) /*In this CSS code,
    we are targeting screens with a maximum width of 768px.
    If the screen is less than or equal to 768px wide,
    the body code will run.*/
{
    #header {
        height: 120px;
        background-image: linear-gradient(to left, #0082C0, rgb(4, 68, 113));
        width: 100%;
    }

    #center {
        text-align: left;
        position: absolute;
        margin-left: calc(8% + 100px);
      
    }

    #pagebody {
       
        margin-left: 8%;
        margin-right: 8%;
    }
}

    /* code for header blue color bar on mobile devices (color shade feasture) END*/