/*all*/
body {
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: #f9f9f9;
    color: #333333;
    font-size: 14px;
    font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    line-height: 1.42857143;
    margin:0px;
}
.game {
    z-index: 1;
    width: 308px;
    height: 308px;
    margin: 0px 15px 30px 15px;
    position: absolute;
    display:inline-block;
}
.right{
    right:15px;
}
.left{
    left:15px;
}
.description {
    height: 1.4em;
    background-color: rgba(182, 183, 178, .85);
    margin-bottom: 0px;
    margin-left: 4px;
    padding-left: 10px;
    padding-right: 10px;
    font-size: 2em;
    position: absolute;
    top: calc(300px - 1.4em + 4px);
    width: 280px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    transition: all ease-out .4s;
}
.board_svg {
    border: 4px solid #000;
    border-radius: 12px;
    padding: 0px;
    margin: 0px;
}
.info {
    color: #666;
    font-size: 1.3rem;
    transition: all ease-out .4s;
    height: 0px;
    overflow: hidden;
}
.game_name {
    font-family: 'Lato', Arial, Helvetica, sans-serif, Arial, sans-serif;
}
.tag {
    display: inline-block;
    z-index: 0;
    padding: 1px 7px;
    border: 4px solid #000;
    position: relative;
    width: 80px;
    height: 1.3em;
    /* - margin - width- border -  border*2 - padding * 2 + board*/
    left: 221px;
    /*size of tag - size of board + padding * 2 + border-radius + padding for looks*/
    top: 13px;
    /*padding*/
    /*margin+30px*/
    /*top: 160px;*/
    /*(100vw - containerwidth)/2 +margin + padding+ board size-width*/
    /*left: calc((100vw - 970px) / 2 + 30px + 300px - 80px - 14px);*/
    overflow: hidden;
    background-color: rgba(172, 173, 168, .85);
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    font-size: 1.3em;
    transition: all linear .4s;
}
#games_section {
    background: #f2f2f2;
    padding-top: 28px;
    display: block;
    position:relative;
    top:107.15px;
    height:60vh;
}
.container {
    box-sizing: border-box;
    width: min(970px, 100%);
    position:absolute;
    left:max(calc(50vw - 485px), 0px);
    padding-right: 15px;
    padding-left: 15px;
}
/*(100vw-970)/2 */
#games_grid {
}
header {
    padding-left:30px !important;
    font-weight: 600;
    font-size: 75px;
    height: 105px;
    line-height: 1.42857143;
}
#game_container :nth-child(4n-1) {
    float:right;
}
/*#game_container .tag:nth-of-type(4n) {
    float: right;*/
    /*same thing but *-1 and - border*/
    /*left: 117px;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}*/
/*gomoku*/
#gomoku_svg {
    stroke: #400B0F;
    stroke-width: 2;
    background-color: #DFC772;
}
.gomoku_stone {
    position: absolute;
    left: 0px;
    top: 0px;
}
.white_gomoku {
    stroke: #DBDBDB;
}

.dot {
    stroke-linecap: round;
    stroke-width: max(5px, 2%);
}
/*chance chess*/
#chance_chess_svg {
    background-image: url("../img/chess.png");
    background-size: cover;
    width: 300px;
    height: 300px;
}
@media (max-width:400px) {
    header {
        line-height: 1;
        padding-left: 30px !important;
        padding-top: 10px !important;
        font-size: 50px;
    }
    #games_section {
        top: 70px;
    }
}

@media (max-width:830px) {
    .right{
        top:338px;
    }
}
@media (max-width:368px) {
    .container{
        padding:0px;
    }
    .game {
        margin: 0px 0px 30px 0px;
    }
    .right {
        right: calc(50vw - 154px);
    }

    .left {
        left: calc(50vw - 154px);
    }
    .tag {
        left: calc(50vw + 52px);
    }
}
@media (max-width:492px) {
    .tag {
        border-radius: 10px 0px 0px 10px;
    }/*
    .right {
        top: 338px;
    }*/
}
/*@media screen and (max-width:490px){
    .tag {
        position:absolute;
        left: calc(50% - 44px);
        top:145px;
        border-top-right-radius: 10px;
        border-bottom-right-radius: 10px;
        border-top-left-radius: 10px;
        border-bottom-left-radius: 10px;
    }
}*/