html, body {
    margin: 0;
    width : 100%;
    height: 100%;
}

@media (min-width: 320px){
    html {
        font-size: 50%;
    }
}
@media (min-width: 340px){
    html {
        font-size: 52%;
    }
}
@media (min-width: 360px){
    html {
        font-size: 54%;
    }
}
@media (min-width: 380px){
    html {
        font-size: 56%;
    }
}
@media (min-width: 400px){
    html {
        font-size: 58%;
    }
}
@media (min-width: 420px){
    html {
        font-size: 60%;
    }
}
@media (min-width: 440px){
    html {
        font-size: 62%;
    }
}
@media (min-width: 460px){
    html {
        font-size: 64%;
    }
}
@media (min-width: 480px){
    html {
        font-size: 66%;
    }
}
@media (min-width: 500px){
    html {
        font-size: 68%;
    }
}
@media (min-width: 520px){
    html {
        font-size: 70%;
    }
}
@media (min-width: 540px){
    html {
        font-size: 72%;
    }
}
@media (min-width: 560px){
    html {
        font-size: 74%;
    }
}
@media (min-width: 580px){
    html {
        font-size: 76%;
    }
}
@media (min-width: 600px){
    html {
        font-size: 78%;
    }
}
@media  (min-width: 620px){
    html {
        font-size: 80%;
    }
}
@media (min-width: 640px){
    html {
        font-size: 82%;
    }
}
@media (min-width: 660px){
    html {
        font-size: 84%;
    }
}
@media (min-width: 680px){
    html {
        font-size: 86%;
    }
}
@media (min-width: 700px){
    html {
        font-size: 88%;
    }
}
@media (min-width: 720px){
    .hide{
        display:block;
    }
    html {
        font-size: 90%;
    }
}
@media (min-width: 740px){
    html {
        font-size: 92%;
    }
}
@media (min-width: 760px){
    html {
        font-size: 94%;
    }
}
@media (min-width: 780px){
    html {
        font-size: 96%;
    }
}
@media (min-width: 800px){
    html {
        font-size: 98%;
    }
}
@media (min-width: 820px){
    html {
        font-size: 100%;
    }
}
@media (min-width: 840px){
    html {
        font-size: 102%;
    }
}
@media  (min-width: 860px){
    html {
        font-size: 104%;
    }
}
@media  (min-width: 880px){
    html {
        font-size: 106%;
    }
}
@media  (min-width: 900px){
    html {
        font-size: 108%;
    }
}
@media  (min-width: 920px){
    html {
        font-size: 110%;
    }
}
@media  (min-width: 940px){
    html {
        font-size: 112%;
    }
}
@media  (min-width: 960px){
    html {
        font-size: 114%;
    }
}
@media  (min-width: 980px){
    html {
        font-size: 116%;
    }
}
@media  (min-width: 1000px){
    html {
        font-size: 118%;
    }
}
@media  (min-width: 1020px){
    html {
        font-size: 120%;
    }
}
@media  (min-width: 1040px){
    html {
        font-size: 122%;
    }
}
@media  (min-width: 1060px){
    html {
        font-size: 124%;
    }
}
@media  (min-width: 1080px){
    html {
        font-size: 126%;
    }
}
@media  (min-width: 1100px){
    html {
        font-size: 128%;
    }
}
@media  (min-width: 1120px){

    html {
        font-size: 130%;
    }
}
@media  (min-width: 1140px){
    html {
        font-size: 132%;
    }
}
@media  (min-width: 1160px){
    html {
        font-size: 134%;
    }
}
@media  (min-width: 1180px){
    html {
        font-size: 136%;
    }
}
@media  (min-width: 1200px){
    html {
        font-size: 138%;
    }
}
@media  (min-width: 1220px){
    html {
        font-size: 140%;
    }
}
@media  (min-width: 1240px){
    html {
        font-size: 142%;
    }
}
@media  (min-width: 1260px){
html {
    font-size: 144%;
    }
}
@media  (min-width: 1280px){
    html {
        font-size: 146%;
        }
}
@media  (min-width: 1300px){
    html {
        font-size: 148%;
    }
}
@media  (min-width: 1320px){
    html {
        font-size: 150%;
    }
}
@media  (min-width: 1340px){
    html {
        font-size: 152%;
    }
}
@media  (min-width: 1360px){
    html {
        font-size: 154%;
    }
}
@media  (min-width: 1380px){
    html {
        font-size: 156%;
    }
}
@media  (min-width: 1400px){
    html {
        font-size: 158%;
    }
}
@media  (min-width: 1420px){
    html {
        font-size: 160%;
    }
}
@media  (min-width: 1440px){
    html {
        font-size: 162%;
    }
}
@media  (min-width: 1460px){
    html {
        font-size: 164%;
    }
}
@media  (min-width: 1480px){
    html {
        font-size: 166%;
    }
}
@media (min-width: 1500px){
    html {
        font-size: 168%;
    }
}
@media (min-width: 1520px){
    html {
        font-size: 170%;
    }
}
@media (min-width: 1540px){
    html {
        font-size: 172%;
    }
}
@media (min-width: 1560px){
    html {
        font-size: 174%;
    }
}
@media (min-width: 1580px){
    html {
        font-size: 176%;
    }
}
@media (min-width: 1600px){
    html {
        font-size: 178%;
    }
}
@media (min-width: 1620px){
    html {
        font-size: 180%;
    }
}
@media (min-width: 1640px){
    html {
        font-size: 182%;
    }
}
@media (min-width: 1660px){
    html {
        font-size: 184%;
    }
}
@media (min-width: 1680px){
    html {
        font-size: 186%;
    }
}
@media (min-width: 1700px){
    html {
        font-size: 188%;
    }
}