@media screen and (max-width: 1200px) {
    h1 {
        font-size: 65px;
    }
    .mainMenu {
        margin-top: 15%;
    }
    .mainMenu span {
        font-size: 47px;
    }
    #ball1,#ball2{
        width: 150px;
    }
}
@media screen and (max-width: 900px) {
    html {
        font-size: 6px;
    }
    h1 {
        font-size: 55px;
    }
    #IPage {
        margin-top: 15%;
    }
    .canvas {
        top: 15%;
    }
    .mainMenu {
        margin-top: 25%;
    }
    .mainMenu span {
        font-size: 42px;
    }
    #ball1,#ball2{
        width: 120px;
    }
    .bottomPanel {
        bottom: -80px;
    }
    .saveWindow {
        width: 72vw;
        height: 45vh;
        left: 11%;
    }
}
@media screen and (max-width: 600px) {
    html {
        font-size: 6px;
    }
    h1 {
        font-size: 45px;
    }
    #IPage {
        margin-top: 12%;
    }
    .mainMenu {
        margin-top: 35%;
    }
    .mainMenu span {
        font-size: 36px;
    }
    #ball1,#ball2{
        width: 100px;
    }
    .canvas {
        top: 10%;
        width: 75vw;
        height: 70vh;
        margin: 0 20% 0 8%;
    }
    .slider {
        width: 75vw;
        height: 70vh;
    }
    .canv {
        width: 75vw;
        height: 70vh;
    }
    .rangeItem {
        width: 30px;
        height: 30px;
    }
    .range input  {
        right: -20px;
        top: 115px;
    }
    .rightPanel .selected {
        background:  url(../img/tb_36.png) dimgray;
    }
    .rightPanel>div {
        width: 36px;
        height: 36px;
        background: url("../img/tb_36.png");
    }
    .rightPanel>div:hover {
        background:  url(../img/tb_36.png) dimgray;
    }
    .rightPanel {
        height: 70vh;
        right: -38px;
    }
    .rightPanel .brushElem,
    .rightPanel .brushElem:hover,
    .rightPanel .brushElem:active {
        background-position: 35px -38px;
    }
    .rightPanel .coloring,
    .rightPanel .coloring:hover,
    .rightPanel .coloring:active {
        background-position: 35px -3px;
    }
    .rightPanel .clean,
    .rightPanel .clean:hover,
    .rightPanel .clean:active {
        background-position: 35px -110px;
    }
    .rightPanel .cancel,
    .rightPanel .cancel:hover,
    .rightPanel .cancel:active {
        background-position: 37px 286px;
    }
    .rightPanel .save,
    .rightPanel .save:hover,
    .rightPanel .save:active {
        background-position:  37px -829px;
    }
    .bottomPanel {
        width: calc(75vw + 36px);
        bottom: -80px;
    }
    .saveWindow {
        width: 72vw;
        height: 45vh;
        left: 11%;
    }

}
@media screen and (max-width: 420px) {
    html {
        font-size: 6px;
    }
    h1 {
        font-size: 30px;
    }
    #IPage {
        margin-top: 10%;
    }
    .mainMenu {
        margin-top: 40%;
    }
    .mainMenu span {
        font-size: 30px;
    }
    #ball1,#ball2{
        width: 70px;
    }
    .canvas {
        width: 75vw;
        height: 70vh;
        margin: 0 20% 0 8%;
    }
    .canv {
        width: 75vw;
        height: 70vh;
    }
    .rangeItem {
        width: 30px;
        height: 30px;
    }
    .range input  {
        right: -20px;
        top: 115px;
    }
    .rightPanel .selected {
        background:  url(../img/tb_36.png) dimgray;
    }
    .rightPanel>div {
        width: 36px;
        height: 36px;
        background: url("../img/tb_36.png");
    }
    .rightPanel>div:hover {
        background:  url(../img/tb_36.png) dimgray;
    }
    .rightPanel {
        height: 70vh;
        right: -38px;
    }
    .rightPanel .brushElem,
    .rightPanel .brushElem:hover,
    .rightPanel .brushElem:active {
        background-position: 35px -38px;
    }
    .rightPanel .coloring,
    .rightPanel .coloring:hover,
    .rightPanel .coloring:active {
        background-position: 35px -3px;
    }
    .rightPanel .clean,
    .rightPanel .clean:hover,
    .rightPanel .clean:active {
        background-position: 35px -110px;
    }
    .rightPanel .cancel,
    .rightPanel .cancel:hover,
    .rightPanel .cancel:active {
        background-position: 37px 286px;
    }
    .rightPanel .prevStep,
    .rightPanel .prevStep:hover,
    .rightPanel .prevStep:active {
        background-position:  254px -181px;
    }
    .rightPanel .prevStep,
    .rightPanel .prevStep:hover,
    .rightPanel .prevStep:active {
        background-position:  254px -181px;
    }
    .rightPanel .nextStep,
    .rightPanel .nextStep:hover,
    .rightPanel .nextStep:active {
        background-position:  254px 251px;
    }
    .rightPanel .nextStep,
    .rightPanel .nextStep:hover,
    .rightPanel .nextStep:active {
        background-position:  254px 251px;
    }
    .bottomPanel {
        width: calc(75vw + 36px);
        bottom: -80px;
    }
    .saveWindow {
        width: 72vw;
        height: 45vh;
        left: 11%;
    }
}