body{font-family:'Nunito Sans', sans-serif;font-size:14px;background-color:#f8f8f8;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
header{position:absolute;display:block;left:0;top:0;width:100%;margin:0;padding:0;height:70px;vertical-align:top;z-index:100;}
#header_content{width:940px;margin:4px auto 0 auto;padding:0;position:relative;max-width:100%;height:65px;border-bottom:1px #eee solid;}
a#site_logo #slogoCircle{fill:#f73d44;-webkit-transition:fill 0.33s ease;-moz-transition:fill 0.33s ease;transition:fill 0.33s ease;}
a#site_logo:hover #slogoCircle{fill:#ff454b;}
#gradient{position:absolute;display:block;left:0;top:70px;width:100%;margin:0;padding:0;height:5px;background:-moz-linear-gradient(top,rgba(248,248,248,0.5) 0%, rgba(248,248,248,0) 100%);background:-webkit-linear-gradient(top, rgba(248,248,248,0.5)0%,rgba(248,248,248,0) 100%);background:linear-gradient(to bottom, rgba(248,248,248,0.5) 0%,rgba(248,248,248,0) 100%);pointer-events:none;}
main{display:block;position:relative;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;max-width:826px;min-height:100vh;margin:0 auto;padding:90px 20px 160px 20px;vertical-align:top;font-family:'Amatic SC', sans-serif;font-size:24px;line-height:28px;color:#000;letter-spacing:0.002em;-webkit-font-smoothing:antialiased;}
footer{display:block;width:100%;height:120px;margin:-120px 0 0 0;
padding:0;background-color:#d3eef4; /*rgba(155,224,239,0.4);*/vertical-align:top;}
#footer_content{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;width:940px;max-width:100%;margin:0 auto;padding:0;border-top:1px rgba(0,0,0,0.066) solid;position:relative;}
#siteinfo{position:absolute;top:37px;left:20px;font-family:'Nunito Sans', sans-serif;font-size:11px;color:#8da0a4; /*rgba(0,0,0, 0.33);*/margin:0;padding:0;}
#siteinfo a{color:inherit;white-space:nowrap;text-decoration:none;-webkit-transition:color 0.33s ease;-moz-transition:color 0.33s ease;transition:color 0.33s ease;}
#siteinfo a:hover{color:#416870;}
#siteinfo a:active{color:#f73d44;}
section{margin:0; padding:0;}
main h1{font-family:'Amatic SC', sans-serif;font-weight:400;font-size:40px;margin:27px 0 15px 0;line-height:44px;text-transform:uppercase;}
#playfield{display:flex;flex-direction:rows;flex-wrap:wrap;justify-content:space-between;align-items:center;max-width:680px;margin:46px 0 0 0;}
#gameCtrl{display:flex;flex-direction:rows;flex-wrap:wrap;justify-content:space-between;align-items:center;max-width:680px;margin:0 0 58px 0;}
#stablegenius{width:250px;max-width:100%;height:auto;margin:10px 0;}
#tictactoe{width:300px;max-width:100%;height:auto;margin:20px -5px 10px 0;cursor:pointer;}
#tictactoe #board g{display:none; fill:none;}
#tictactoe #board #x8,
#tictactoe #board #x6,
#tictactoe #board #o1,
#tictactoe #board #o2,
#tictactoe #board #o3
{display:inline;}
#tictactoe #board g.board-o path{stroke-dasharray:220;stroke-dashoffset:0;-webkit-animation:anim-draw-o 0.7s linear forwards;-moz-animation:anim-draw-o 0.7s linear forwards;animation:anim-draw-o 0.7s linear forwards;}
@keyframes anim-draw-o{
from{stroke-dashoffset:220;}
to{stroke-dashoffset:0;}
}
#tictactoe #board g.board-x path:last-child{stroke-dasharray:105;stroke-dashoffset:0;-webkit-animation:anim-draw-x 0.4s ease forwards;-moz-animation:anim-draw-x 0.4s ease forwards;animation:anim-draw-x 0.4s ease forwards;}
#tictactoe #board g.board-x path:first-child
{stroke-dasharray:105;stroke-dashoffset:105;-webkit-animation:anim-draw-x 0.4s 0.4s ease forwards;-moz-animation:anim-draw-x 0.4s 0.4s ease forwards;animation:anim-draw-x 0.4s 0.4s ease forwards;}
@keyframes anim-draw-x{
from{stroke-dashoffset:105;}
to{stroke-dashoffset:0;}
}
#gameCtrl #gameStatus
{width:250px;max-width:100%;text-align:center;padding-left:16px;}
#gameCtrl #gameBtn{width:300px;max-width:100%;text-align:center;margin:10px 0;}
#gameCtrl #gameBtn button
{display:inline-block;margin:0;padding:6px 20px;border-radius:6px;border:1px #232425 solid;font-family:'Amatic SC', sans-serif;font-size:24px;font-weight:400;line-height:normal;background-color:#f8f8f8;color:#232425;margin:10px 0;transition:all 0.3s ease;}
#gameCtrl #gameBtn button:hover,
#gameCtrl #gameBtn button:focus{background-color:#9bd1de;}
#gameCtrl #gameBtn button:active{background-color:#e45439;}
#playfield.error500 #stablegenius{width:277px;}
#gameCtrl.error500 #gameStatus{width:277px;}
@media screen and (max-width:600px){
#playfield, #gameCtrl{flex-direction:columns; justify-content:center;}
#tictactoe{margin-right:-30px;}
}
p.imagecaption,
p.imagecaption-note{font-family:'Nunito Sans', sans-serif; color:#444546; font-size:14px; margin:1em 0 0 0.5em; line-height:18px; text-align:center;}
p.imagecaption-note{margin:0.5em auto; max-width:680px;}