html {

}
body {
    position: relative;
    min-height: 100vh;
}

div {
    font-size: 12px;
    -webkit-transition: font-size 0.2s ease-out;
}
.sideActive {
    color: #190b77
}



@media only screen and (max-width: 1600px) {
    div {
        font-size: 15px;
    }

    .hb-size {
        font-size: 10px;
    }

    .ft-num {
        font-size: 10px;
    }
    .hb-num {
        font-size: 10px;
    }
    .hb-info
    {
        font-size: 10px;
    }
}

@media only screen and (max-width: 1200px) {
    div {
        font-size: 15px;
    }

    .hb-size {
        font-size: 10px;
    }

    .ft-num {
        font-size: 10px;
    }
    .hb-num {
        font-size: 10px;
    }
    .hb-info
    {
        font-size: 10px;
    }
}

@media only screen and (max-width: 1100px) {
    div {
        font-size: 15px;
    }

    .hb-size {
        font-size: 10px;
    }

    .ft-num {
        font-size: 10px;
    }
    .hb-num {
        font-size: 10px;
    }
    .hb-info
    {
        font-size: 10px;
    }
}

@media only screen and (max-width: 1000px) {
    div {
        font-size: 15px;
    }

    .hb-size {
        font-size: 10px;
    }

    .ft-num {
        font-size: 10px;
    }
    .hb-num {
        font-size: 10px;
    }
    .hb-info
    {
        font-size: 10px;
    }
}

@media only screen and (max-width: 900px) {
    div {
        font-size: 15px;
    }

    .hb-size {
        font-size: 10px;
    }

    .ft-num {
        font-size: 10px;
    }
    .hb-num {
        font-size: 10px;
    }
    .hb-info
    {
        font-size: 10px;
    }
}

@media only screen and (max-width: 800px) {
    div {
        font-size: 15px;
    }

    .hb-size {
        font-size: 10px;
    }

    .ft-num {
        font-size: 10px;
    }
    .hb-num {
        font-size: 10px;
    }
    .hb-info
    {
        font-size: 10px;
    }
}

@media only screen and (max-width: 700px) {
    div {
        font-size: 15px;
    }

    .hb-size {
        font-size: 10px;
    }

    .ft-num {
        font-size: 10px;
    }
    .hb-num {
        font-size: 10px;
    }
    .hb-info
    {
        font-size: 10px;
    }
}

@media only screen and (max-width: 600px) {
    div {
        font-size: 15px;
    }

    .hb-size {
        font-size: 10px;
    }

    .ft-num {
        font-size: 10px;
    }
    .hb-num {
        font-size: 10px;
    }
    .hb-info
    {
        font-size: 10px;
    }
}

@media only screen and (max-width: 500px) {
    div {
        font-size: 15px;
    }
    .offcanvas-start {
        width: 200px;
    }

    .hb-size {
        font-size: 10px;
    }

    .hb-num {
        font-size: 8px;
    }
    .hb-info
    {
        font-size: 8px;
    }
}
@media only screen and (max-width: 420px) {
    div {
        font-size: 9px;
    }
    img {
        width: 90%;
    }
    li {
        font-size: 6px;
    }
    button {
        font-size: 6px;
    }
    select {
        font-size: 6px;
        width: 65px;
    }
    p {
        font-size: 8px;
    }
    .offcanvas-start {
        width: 200px;
    }

    .hb-size {
        font-size: 6px;
    }

    .hb-num {
        font-size: 6px;
    }
    .hb-info
    {
        font-size: 6px;
    }
}

@media only screen and (max-width: 400px) {
    div {
        font-size: 9px;
    }
    img {
        width: 90%;
    }
    li {
        font-size: 6px;
    }
    button {
        font-size: 6px;
    }
    select {
        font-size: 6px;
        width: 65px;
    }
    p {
        font-size: 8px;
    }
    .offcanvas-start {
        width: 200px;
    }

    .hb-size {
        font-size: 6px;
    }

    .hb-num {
        font-size: 6px;
    }
    .hb-info
    {
        font-size: 6px;
    }
}

@media only screen and (max-width: 320px) {
    div {
        font-size: 8px;
    }
    img {
        width: 250px;
    }
    button {
        font-size: 6px;
    }

    .offcanvas-start {
        width: 200px;
    }

    .hb-size {
        font-size: 6px;
    }

    .hb-num {
        font-size: 6px;
    }
    .hb-info
    {
        font-size: 6px;
    }
}