@import url('https://fonts.googleapis.com/css2?family=Roboto');

a:link{color:#3d3d3d; text-decoration: none;}
a:visited{color: #3d3d3d;; text-decoration: none;}
a:hover{color: #009bdd;; text-decoration: none;}
a:active{color: #3d3d3d;; text-decoration: none;}

a.navlink:link{color:#3d3d3d; text-decoration: none; font-size: 14px; margin: 0px 10px; padding: 10px 20px; display: inline-block;}
a.navlink:visited{color: #3d3d3d;; text-decoration: none;}
a.navlink:hover{color: #fff;; text-decoration: none; background-color: #009bdd; border-radius: 10px;}
a.navlink:active{color: #3d3d3d;; text-decoration: none;}


*{
box-sizing: border-box;
font-family: 'Roboto', sans-serif;
}

body
{
background: #fff;
margin: 0px 0px 50px 0px;
padding: 0px;
color: #000;
font-size: 14px;
text-align: center;
}


#setpass { background: #008000;}
#main { background: #fff;}
#profile { background: #c0c0c0;}
#redeem { background: #fac556;}
#attendance{background:#60204c;}
#error{background:#be1212;}
#loaded { background: #008000;}
#type { background: #e08925;}

header
{
position: sticky;
top: 0px;
width: 100%;
display: block;
text-align: center;
font-size: 12px;
padding: 10px;
margin: 0px;
box-shadow: 0px 5px 5px 1px rgba(0, 0, 0, 0.2);
z-index: 100;
background-color: #0072bb;
color: #fff;
height: 100px;
}
header img
{
height: 100%;
}
.main
{
    width: 100%;
    min-height: 100vh;
    max-height: 100%;
    display: flex;
    text-align: center;
    font-size: 12px;
    padding: 10px;
    margin: 0px;
    box-shadow: 0px 5px 5px 1px rgba(0, 0, 0, 0.2);
    z-index: 10;
    background-color: #0072bb;
    align-items: center;
}
.main img
{
    margin: 0px auto;
}
footer
{
padding: 10px;
text-align: center;
color: #c0c0c0;
position: fixed;
bottom: 0px;
display: block;
width: 100%;
background: #fff;
border-top: 1px solid #eee;
}
.banner
{
    width: 100%;
    display: block;
    margin: 0px;
}
.contentbox
{
    margin: 20px auto;
    display: block;
    padding: 0px;
    background-color: #eee;
    font-size: 0px;
}
.contentbox img
{
    height: 100%;
    display: inline-block;
    margin: 0px;
    max-height: 360px;
}
.textbox
{
    padding: 20px;
    text-align: justify;
    max-width: 30%;
    margin: 0px;
    border-radius: 0px;
    display: inline-block;
    vertical-align: top;
    font-size: 14px;
}
.textboxtitle
{
    font-size: 20px;;
    font-weight: bolder;
    border-bottom: 2px solid #000;
}


@media only screen and (max-width: 860px)
{
    header
    {
        height: 80px;
    }
    .contentbox
    {
        margin: 0px auto;
        display:block;
        padding: 0px;
        background-color: #eee;
        font-size: 0px;
    }
    .contentbox img
    {
        display: block;
        margin: 0px;
        width: 100%;
        min-height: 100%;
    }
    .textbox
    {
        padding: 20px;
        text-align: justify;
        max-width: 100%;
        margin: 0px;
        border-radius: 0px;
        font-size: 14px;
    }
    .textboxtitle
    {
        font-size: 20px;
        font-weight: bolder;
        border-bottom: 2px solid #000;
    }
    


}