@import url('https://fonts.googleapis.com/css2?family=Iceberg&family=Iceland&display=swap');


body {
    background: no-repeat linear-gradient(#b0c3f3,
    rgba(196, 196, 196, 0)), whitesmoke;
    font-family: 'Iceland', cursive;
}

h1, h2 {
    font-size: 5em;
}

.h1-red {
    color: #d80000;
}

.h1-green {
    color: #009b00;
}

.h1-blue {
    color: #0044ff;
}

.h1-blue, .h1-green, .h1-red {
    background-color: whitesmoke;
    border-radius: 0.3em;
    box-shadow:
            inset -0.6em -0.6em 0.3em #bfd1ff,
            inset 1em 1em 0.2em whitesmoke,
            0.3em 0.3em 0.7em #839ad7;
}

/*******************************************************************/

/***************/
/* Modal style */
/***************/

#modal .clay {
    background: #bfd1ff9f;
    backdrop-filter: blur( 3.5px );
}

/***************/
/* Grid style */
/***************/

.col {
    width: 120px;
    height: 120px;
}

.box{
    height: 100%;
    width: 100%;
}

.col, button {
    /*border-radius: 2.5em;*/
    background: whitesmoke;
    box-shadow:
            inset -0.6em -0.6em 1em #bfd1ff,
            inset 0.4em 0.4em 0.5em #eff3ff,
            0.8em 0.8em 2em #839ad7;
}

.col.active, button:hover {
    box-shadow:
            inset 0.6em 0.6em 1em #bfd1ff,
            inset -0.4em -0.4em 0.5em #eff3ff,
            0.8em 0.8em 2em #839ad7;
}


/***************/
/* Cross style */
/***************/

.cross {
    background: #d80000;
    transform: rotate(45deg);
    position: relative;
}

.cross::after {
    background: #d80000;
    content: "";
    position: absolute;
}

/***************/
/* circle style */
/***************/

.circle {
    border-radius: 50%;
}

/*******************************************************************/

@media screen and (max-width: 300px) {

    h1, h2 {
        font-size: 2.6em;
    }

    #modal button {
        font-size: 2em
    }

    .col {
        width: 70px;
        height: 70px;
        border-radius: 1.5em;
    }

    .cross {
        height: 60px;
        width: 20px;
    }

    .cross::after {
        height: 20px;
        left: -20px;
        top: 20px;
        width: 60px;
    }

    .circle {
        height: 60px;
        width: 60px;
        border: solid 15px #009b00;
    }

}

@media screen and (min-width: 301px) and (max-width: 576px) {

    h1, h2 {
        font-size: 3em;
    }

    #modal button {
        font-size: 2em
    }

    .col {
        width: 90px;
        height: 90px;
        border-radius: 2em;
    }

    .cross {
        height: 70px;
        width: 23px;
    }

    .cross::after {
        height: 23px;
        left: -23px;
        top: 23px;
        width: 70px;
    }

    .circle {
        height: 70px;
        width: 70px;
        border: solid 20px #009b00;
    }

}

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

    .cross {
        height: 100px;
        width: 35px;
    }

    .cross::after {
        height: 35px;
        left: -33px;
        top: 33px;
        width: 100px;
    }

    .circle {
        border: solid 30px #009b00;
        height: 100px;
        width: 100px;
    }
}

/*******************************************************************/