styles.css

@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,700');
*
{
    box-sizing:border-box;
}
html,body
{
    padding:0;
    margin:0;
    width:100%;
    height:100%;
    background:#fcfcfc;
    font-family:'Open Sans', sans-serif;
    font-size:16px;
    color:#333;
}
body
{
    display:flex;
    flex-direction:column;
}
.content
{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    flex:1 0 auto;
}

/* HEADER */
header
{
    display:flex;
    align-items:center;
    flex:none;

    background:#3891a6;
    height:4rem;
    padding:0 1em;

    color:#fcfcfc;
    font-size:0.875rem;

    -webkit-box-shadow: 0 0 0.625rem 0 rgba(50, 50, 50, 0.2);
    -moz-box-shadow:    0 0 0.625rem 0 rgba(50, 50, 50, 0.2);
    box-shadow:         0 0 0.625rem 0 rgba(50, 50, 50, 0.2);
}
header h1
{
    margin:0;
    padding:0;
    font-size:1em;
    font-weight:300;
    display:flex;
    align-items:center;
    flex:1 0 auto;
}
header h1 span
{
    font-size:1em;
}
header h1 img
{
    height:2em;
    margin-right:.5em;
    display:block;
}
.header_btnbox
{
    display:flex;
    flex-direction: row;
    align-items:center;
    margin-left:auto;
    line-height:0;
}
.header_btn
{
    display:block;
    margin-left:1em;
    height:2em;
    transition:background .2s ease;
    cursor: pointer;
}
.header_btn:first-child
{
    margin-left:0;
}
.header_btn img
{
    display:block;
    height:100%;
    transition: transform .3s ease;
}
.header_btn:hover img
{
    transform:rotate(-360deg);
}
@media (min-width:350px)
{
    header
    {
        padding:0 2em;
    }
    header h1 span
    {
        font-size:1.25em;
    }
}
@media (min-width:768px)
{
    header
    {
        font-size:1rem;
    }
    header h1 span
    {
        font-size:1.5em;
    }
}
/* END HEADER */

/* GAMEBOARD */
.gameboard_container
{
    font-size:1.5vmin;

    padding:1em;
    width:calc(100% - 2rem);
    max-width:calc(100vh - 8rem);
}
.gameboard,
.gameboard_row
{
    display:grid;
    gap:1em;
}
.gameboard
{
    grid-template-rows:repeat(3, 1fr);
    background:#333;
    width:100%;
    margin:0 auto;
}
.gameboard_row
{
    grid-template-columns:repeat(3, 1fr);
    position:relative;
}
.gameboard_square
{
    background:#fcfcfc;
    padding-bottom:100%;
    position:relative;
}
.square_x::before,
.square_o::before
{
    content:'';
    position:absolute;
    top:1em;
    left:1em;
    right:1em;
    bottom:1em;
    background-size:contain;
    background-position:center center;
    background-repeat:no-repeat;
}
.square_x::before
{
    background-image:url(images/x_sq.svg);
}
.square_o::before
{
    background-image:url(images/o.svg);
}

.highlighted::after,
.selected::after
{
    content:'';
    display:block;
    position:absolute;
    border-width:1em;
    border-style:solid;
}
.highlighted::after
{
    border-color: #3891a6;
}
.selected::after
{
    border-color: #1cd61c;
}
.gameboard_row.highlighted::after,
.gameboard_row.selected::after
{
    left:-2em;
    right:-2em;
    top:-2em;
    bottom:-2em;
    z-index:10;
}
.gameboard_square.highlighted::after,
.gameboard_square.selected::after
{
    left:-1em;
    right:-1em;
    top:-1em;
    bottom:-1em;
    z-index:11;
}
/* END GAMEBOARD */

/* TURN BOX */
#turn_box
{
    display:flex;
    align-items:center;
    justify-content: center;
    position:fixed;
    bottom:1rem;
    right:1rem;
    -webkit-box-shadow: 0 0 0.625rem 0 rgba(50, 50, 50, 0.2);
    -moz-box-shadow:    0 0 0.625rem 0 rgba(50, 50, 50, 0.2);
    box-shadow:         0 0 0.625rem 0 rgba(50, 50, 50, 0.2);
    height:3em;
    padding:0 1em;
    transition:background .2s;
    z-index:98;
}
#turn_box.p1
{
    background:#333;
    color:#efefef;
}
#turn_box.p2
{
    background:#efefef;
    color:#333;
}
#turn_box_icon
{
    height:1em;
    margin-right:0.625em;
}
.p1 #turn_box_icon
{
    filter:invert(100);
}
/* END TURN BOX */

/* ALERTS */
.alert_bg
{
    z-index:99;
    background:rgba(50,50,50,.5);
    position:fixed;
    top:0;
    left:0;
    height:100vh;
    width:100vw;
}
.alert_box
{
    position:fixed;
    top:50%;
    left:50%;

    background:#f5f5f5;
    padding:2rem;
    width:100%;
    max-width:40rem;

    transform:translate(-50%, -50%);
    line-height:1.4;
    -webkit-box-shadow: 0 0 0.625rem 0 rgba(50, 50, 50, 0.4);
    -moz-box-shadow:    0 0 0.625rem 0 rgba(50, 50, 50, 0.4);
    box-shadow:         0 0 0.625rem 0 rgba(50, 50, 50, 0.4);
}
.alert_title
{
    margin:0 0 0.67em;
    padding:0 0 0.67em;
    line-height:1.1;
    font-size:1.5em;
    border-bottom:0.0625rem solid #ddd;
    font-weight:200;
}
.alert_text
{
    margin:0 0 2rem;
    padding:0;
    font-weight:200;
}
.alert_btnbox
{
    display:flex;
    flex-direction:row;
    justify-content:flex-end;
    width:100%;
}
.alert_btn
{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    appearance:none;
    -webkit-appearance: none;
    border:0;
    background:#3891a6;
    height:3em;
    cursor:pointer;
    padding:0 2em;
    color:#efefef;
    font-size:1rem;
}
.alert_btn:hover,
.alert_btn:focus,
.alert_btn:active
{
    background:#2d7686;
}
/* END ALERTS */