body {
    background-color: lightblue;
}

.hidden {
    display: none;
}

.mainContainer {
    position: relative;
    box-sizing: border-box;
}

.box {
    border: 1px solid black;
    text-align: center;
    box-sizing: border-box;
}

.lookingGood {
    text-align: center;
}

.noTop {
    border-top: 0 transparent;
}

.noLeft {
    border-left: 0 transparent;
}

.noRight {
    border-right: 0 transparent;
}

.noBottom {
    border-bottom: 0 transparent;
}

h1 {
    text-align: center;
    margin-bottom: 25px;
}

button {
    margin-bottom: 15px;
}

@media screen and (min-width: 100px) {

    h1 {
        font-size: 2.5em;
    }

    button {
        font-size: 1.5em;
    }

    .mainContainer {
        height: 300px;
        width: 300px;
        margin: 0 auto;
        position: relative;
    }

    .lookingGood {
        font-size: 2.5em;
    }

    .box {
        height: 100px;
        width: 100px;
        padding-top: 25px;
        font-size: 2.5em;
    }

    #tr0 {
        position: absolute;

    }
    #tr1{
        position: absolute;
        left: 100px;

    }
    #tr2{
        position: absolute;
        left: 200px;

    }
    #mr0{
        position: absolute;
        top: 100px;

    }
    #mr1{
        position: absolute;
        top: 100px;
        left: 100px;

    }
    #mr2{
        position: absolute;
        top: 100px;
        left: 200px;

    }
    #br0{
        position: absolute;
        top: 200px;

    }
    #br1{
        position: absolute;
        top: 200px;
        left: 100px;

    }
    #br2{
        position: absolute;
        top: 200px;
        left: 200px;
    }
}

@media screen and (min-width: 600px) {
    h1 {
        font-size: 3.5em;
    }

    button {
        font-size: 2.5em;
    }

    .mainContainer {
        height: 600px;
        width: 600px;
        margin: 0 auto;
        position: relative;
    }

    .box {
        height: 200px;
        width: 200px;
        padding-top: 50px;
        font-size: 4.5em;
    }

    .lookingGood {
        font-size: 3.5em;
    }

    #tr0 {
        position: absolute;

    }
    #tr1{
        position: absolute;
        left: 200px;

    }
    #tr2{
        position: absolute;
        left: 400px;

    }
    #mr0{
        position: absolute;
        top: 200px;

    }
    #mr1{
        position: absolute;
        top: 200px;
        left: 200px;

    }
    #mr2{
        position: absolute;
        top: 200px;
        left: 400px;

    }
    #br0{
        position: absolute;
        top: 400px;

    }
    #br1{
        position: absolute;
        top: 400px;
        left: 200px;

    }
    #br2{
        position: absolute;
        top: 400px;
        left: 400px;
    }
}