/* -------- default ----------- */
#mydiv {
font-size: 12px;

}
/* --------- smartphone -my 5"---------- */
@media screen and (max-width: 767px) {
#mydiv {
font-size: 14px;

}
}
/* -------- tablets-ipad pro---------- */
@media screen and (min-width: 768px) {
#mydiv {
font-size: 16px;
width:400px;

}
}
/* --------- small desktop screen ------------- */
@media screen and (min-width: 1024px) {
#mydiv {
font-size: 14px;
width:400px;
}
}
/* --------- large desktop screen --my hp HDTV----------- */
@media screen and (min-width: 1280px) {
#mydiv {
font-size: 16px;
width:400px;
}

.scroller {
    --scrollbar-color-thumb: hotpink;
    --scrollbar-color-track: blue;
    --scrollbar-width: thin;
    --scrollbar-width-legacy: 10px;
}

/* Modern browsers with `scrollbar-*` support */
@supports (scrollbar-width: auto) {
    .scroller {
        scrollbar-color: var(--scrollbar-color-thumb) var(--scrollbar-color-track);
        scrollbar-width: var(--scrollbar-width);
    }
}

/* Legacy browsers with `::-webkit-scrollbar-*` support */
@supports selector(::-webkit-scrollbar) {
    .scroller::-webkit-scrollbar-thumb {
        background: var(--scrollbar-color-thumb);
    }
    .scroller::-webkit-scrollbar-track {
        background: var(--scrollbar-color-track);
    }
    .scroller::-webkit-scrollbar {
        max-width: var(--scrollbar-width-legacy);
        max-height: var(--scrollbar-width-legacy);
    }
}