styles.scss

$red-color: #D72638;
$black-color: #242F40;
$purple-color: #AB87FF;

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    text-align: center;
    min-height: 100vh;
    padding-top: 50px;
    font-family: 'Montserrat', sans-serif;

    .helper {
        color: $black-color;

        font-size: 3rem;
        transition: opacity 500ms ease, font-size 500ms ease 500ms;

        &.hidden {
            opacity: 0;
            font-size: 0;
        }
    }

    .container { 
        width: 80vh;
        margin: 0 auto;
        height: 80vh;
        transform: scale(0.7);
        transition: transform 500ms ease 500ms;

        .grid {
            height: 100%;
            width: 100%;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: repeat(3, 1fr);

            .square {
                width: 100%;
                height: 100%;
                border: 5px solid $purple-color;
                padding: 10px;
            }

            .one {
                border-top: none;
                border-left: none;
            }

            .two {
                border-top: none;
            }

            .three {
                border-top: none;
                border-right: none;
            }

            .four {
                border-left: none;
            }

            .six {
                border-right: none;
            }

            .seven {
                border-left: none;
                border-bottom: none;
            }

            .eight {
                border-bottom: none;
            }

            .nine {
                border-right: none;
                border-bottom: none;
            }
        }
    }
}

svg {
    height: 100%;
    width: 100%;
}

.dialog {
    position: absolute;
    width: 100%;
    height: 20%;
    background-color: white;
    top: 50%;
    transform: translateY(-50%);

    line-height: calc(0.2 * 80vh - 10px);
    font-size: 3rem;

    opacity: 0;
    transition: opacity 500ms ease-in-out 1250ms;

    z-index: -100;

    &.X {
        border: 5px solid $red-color;
        color: $red-color;
    }

    &.O {
        border: 5px solid $black-color;
        color: $black-color;
    }

    &.Cat {
        border: 5px solid $purple-color;
        color: $purple-color;
    }
}