h1 {
            color: var(--nut_color);
            line-height: 50px;
            border-radius: 15px;
            text-align: center;
            background-color: var(--normal_color);
        }

#wabanti_container {
            display: flex;
            background-color: var(--wallpaper_color);
        }

#board_container {
            flex: 7;
            line-height: 0px;
        }

#board {
            display: block;
            position: relative;

            margin-left: auto;
            margin-right: auto;
            margin-top: 15px;
            margin-bottom: 15px;

            line-height: 0px;
            height: 690px;
            background-color: var(--wallpaper_color);
        }

.row {
            position: absolute;
        }

.field {
            position: absolute;
            display: inline-block;
            width: calc(2 * var(--hex_width));
            height: calc(2 * var(--hex_height));
            border-right-color: var(--normal_color);
            border-left-color: var(--normal_color);
        }

.hex_l {
            /* hex left part */
            position: absolute;
            display: inline-block;
            height: var(--hex_height);

            border-right-color: inherit;
            border-top: var(--hex_border) solid transparent;
            border-right: var(--hex_width) solid;
            border-bottom: var(--hex_border) solid transparent;
        }

.hex_r {
            /* hex right part*/
            position: absolute;
            display: inline-block;
            left: var(--hex_width);

            height: var(--hex_height);

            border-left-color: inherit;
            border-left: var(--hex_width) solid;
            border-top: var(--hex_border) solid transparent;
            border-bottom: var(--hex_border) solid transparent;
        }

.field:hover .hex_l,
.field:hover .hex_r {
            border-right-color: var(--hover_color) !important;
            border-left-color: var(--hover_color) !important;
            cursor: none;
        }

#info_container {
            flex: 3;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            background-color: var(--wallpaper_color);
        }

#player_container {
            flex: 1;
        }

#player_index,
#win_container {
            width: 100%;
            line-height: 50px;
            border-radius: 15px;
            text-align: center;
        }

#nav_container {
            flex: 1;
            text-align: center;
        }

hr {
            width: 60%;
            // color: black;
            // background-color: black;
            border: 1px solid black;
        }

#nav_container button {
            width: 60%;
            border: 2px solid black;
            border-radius: 15px;
            text-align: center;
            margin: 10px 5px;
            color: black;
            padding: 10px;
            cursor: pointer;
            font-size: 1.5em;
            font-weight: bold;
        }

button:disabled {
            background-color: grey;
}


#dice_container table {
            display: inline-block;
            width: 50px;
            height: 50px;
            border: 1px solid black;
            border-radius: 10px;
            padding: 2px;
            // text-align: center;
            margin: 2px;
            // font-size: 2em;
}

.circle {
            height: 0px;
            width: 0px;
            border-radius: 5px;
            border: 5px solid transparent;
            background-color: transparent;
}

.dice {
            text-align: center;
            margin: auto;
            font-size: 2em;
            display: inline-block;
            width: 50px;
            line-height: 50px;
            border-radius: 15px;
            background-color: var(--die_in_color);
}