canvas
{
    display: block;
    margin: auto;
    background-color: #3580BB;
}

h1
{
    text-align: center
}

button
{
    display: block;
    margin: auto
}

@media screen and (width > 1100) and (height > 1100)
{
    canvas
    {
        width: 1000px;
        height: 1000px
    }    
}

@media screen and (width >= 1000px) and (width < 1100px), screen and (height >= 1000px) and (height < 1100px)
{
    canvas
    {
        width: 900px;
        height: 900px
    }
}

@media screen and (width >= 900px) and (width < 1000px), screen and (height >= 900px) and (height < 1000px)
{
    canvas
    {
        width: 800px;
        height: 800px
    }
}

@media screen and (width >= 800px) and (width < 900px), screen and (height >= 800px) and (height < 900px)
{
    canvas
    {
        width: 700px;
        height: 700px
    }
}

@media screen and (width >= 700px) and (width < 800px), screen and (height >= 700px) and (height < 800px)
{
    canvas
    {
        width: 600px;
        height: 600px
    }
}

@media screen and (width >= 600px) and (width < 700px), screen and (height >= 600px) and (height < 700px)
{
    canvas
    {
        width: 500px;
        height: 500px
    }
}

@media screen and (width >= 500px) and (width < 600px), screen and (height >= 500px) and (height < 600px)
{
    canvas
    {
        width: 400px;
        height: 400px
    }
}

@media screen and (width >= 400px) and (width < 500px), screen and (height >= 400px) and (height < 500px)
{
    canvas
    {
        width: 300px;
        height: 300px
    }
}

@media screen and (width >= 300px) and (width < 400px), screen and (height >= 300px) and (height < 400px)
{
    canvas
    {
        width: 200px;
        height: 200px
    }
}