body {
    background: #0c1013;
    font-family: Roboto, sans-serif;
    margin: 0;
    padding: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
}

.main {
    margin: auto;
    display: grid;
    grid-template-rows: repeat(3,1fr);
    grid-template-columns: repeat(3,1fr);
    width: 400px;
    height: 400px;
    box-shadow: 0 0 29px 2px rgba(0,0,0,.91);
}

.cell {
    border: 2px solid #228DFF99;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 54px;
    font-weight: 400;
    cursor: pointer;
    -webkit-animation: neon2 1.5s ease-in-out infinite alternate;
    -moz-animation: neon2 1.5s ease-in-out infinite alternate;
    animation: neon2 1.5s ease-in-out infinite alternate;
    transition: all 0.1s ease;
}

.cell span {
    transform: scaleX(1.5);
    user-select: none;
}

.btn-restart {
    background: unset;
    border: none;
    color: #228DFF;
    font-weight: 700;
    font-size: 22px;
    padding: 10px 15px;
    border: 1px solid #228DFF;
    transition: all 0.3s ease;
    margin-top: 40px;
}

.btn-restart:hover {
    background: #228DFF;
    color: #fff;
    border-radius: 3px;
}

#msg {
    color: #228DFF;
    transition: all 0.3s ease;
    position: relative;
    bottom: 20px;
}

@-webkit-keyframes neon2 {
    from {
        text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #228DFF, 0 0 70px #228DFF, 0 0 80px #228DFF, 0 0 100px #228DFF, 0 0 150px #228DFF;
    }
    to {
        text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #228DFF, 0 0 35px #228DFF, 0 0 40px #228DFF, 0 0 50px #228DFF, 0 0 75px #228DFF;
    }
}