suraj-ray-game.css

/*
*Author Suraj Ray
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 4 version
*/

* {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    text-align: center;
    font-family: 'Courier New', Courier, monospace;
    font-weight: bold;
    color: black;
}

body {
    background: #381d2a;

    /* Centering its children */
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.msg {
    height: 100vmin;
    display: none;
}

/* Message in h1 centering the message */
h1 {
    margin-top: 180px;
    text-align: center;
    padding: 0;
    color: red;
}

/* start new game button*/

.play,
.reset {
    height: 70px;
    width: 170px;
    margin-top: 70px;
    font-size: 24px;
}

.reset {
    margin-top: 40px;
    margin-bottom: 10vmin;
}

/* Main tag positioning in the centre and giving height and width */
main {
    height: 264px;
    width: 264px;
    margin-top: 20vmin;
    background: #fff;

    /* Centering its children */
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

main div {
    height: 240px;
    width: 240px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    row-gap: 10px;
    -webkit-column-gap: 12px;
    -moz-column-gap: 12px;
    column-gap: 12px;
}

/* setting height, width and colors for buttons */

.btn {
    width: 70px;
    height: 70px;
    background: #fff;
    border: none;
    font-size: 40px;
    -webkit-box-shadow: 0 0 10px rgba(128, 128, 128, 0.667);
    box-shadow: 0 0 10px rgba(128, 128, 128, 0.667);
}

main,
.reset,
.play {

    -webkit-box-shadow: 0 0 10px rgba(21, 255, 0, 0.817);

    box-shadow: 0 0 10px rgba(21, 255, 0, 0.817);
}

/* class to color the buttons with O and x applied via JavaScript  */

.o-class {
    background-color: yellow;
}

.x-class {
    background-color: rgb(60, 249, 60);
}

@media screen and (orientation : portrait) {
    body {
        max-height: 100dvh;
    }

    main {
        margin-top: 40vmin;
    }

    h1 {
        margin-top: 100px;
    }
}