.bg {
    background-image: url("../img/background.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-color: rgba(255, 255, 255, 0);
    min-height: 100%;
    margin: 1em;
}

.container {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

.image-container {
    text-align: center;
    width: 100%;
}

.links-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.link {
    min-width: 50%;
}

@media screen and (min-width: 1200px) {
    .container {
        max-width: 1140px;
    }

    .hex-grid_item {
        margin: -1rem -1rem -1rem 0.5rem;
    }
}

@media screen and (max-width: 1200px) {
    .container {
        max-width: 1140px;
    }

    .hex-grid_item {
        margin: -1rem -1rem -1rem 0.5rem;
    }
}

@media screen and (max-width: 992px) {
    .container {
        max-width: 960px;
    }

    .hex-grid_item {
        margin: -1rem 0rem -1rem -1rem;
    }
}

@media screen and (max-width: 768px) {
    .container {
        max-width: 720px;
    }

    .link {
        width: 100%;
    }

    .hex-grid_item {
        margin: -0.5rem 0rem -1rem -0.5rem
    }


    details {
        display: none;
    }
}

@media screen and (max-width: 630px) {
    .container {
        max-width: 600px;
    }

    .hex-grid_item {
        margin: 0.5rem 0.5rem -1rem -1rem;
    }
}

@media screen and (max-width: 480px) {
    .container {
        max-width: 480px;
    }

    .hex-grid_item {
        margin: 5px 0px 0px -5px;
    }
}

@media screen and (max-width: 320px) {
    .container {
        min-width: 320px;
    }

    .hex-grid_item {
        margin: -0.3rem -0.5rem 1rem 0.5rem;
    }

    .hex-grid_list {
        padding: 0px 15px 15px 0px;
    }
}

.round {
    margin: 0.2em;
    border-radius: 0.5em;
}

.icon {
    width: 2em;
    height: 2em;
    vertical-align: -0.125em;
}

.hex-grid {
    display: flex;
    justify-content: center
}

.hex-grid_list {
    display: grid;
    list-style-type: none;
    position: relative;
    padding: 5px 15px 15px 5px;
    width: 100%;
    max-width: 900px;
    /* max-width: 700px;
    max-height: 700px; */
    /*100vw;
    /* margin: 4rem;
    padding: 2rem; */
    /* grid-gap: 0.2em 1em */
}

.hex-grid_item {
    position: relative;
    padding-bottom: 80%;
    list-style-type: none;
    filter: drop-shadow(0 0 10px rgba(68, 68, 68, .08));
}

.hex-grid_content {
    align-items: center;
    -webkit-clip-path: polygon(75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%, 25% 0);
    clip-path: polygon(75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%, 25% 0);
    display: flex;
    flex-direction: column;
    font-size: 1.125rem;
    height: 100%;
    justify-content: center;
    padding: 2rem 25%;
    position: absolute;
    text-align: center;
    text-decoration: none;
    transition: transform .24s ease-out;
    width: 100%;
    background-image: url("../img/selected.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    /* color: #111; */
}

.case_color {
    background-color: rgba(186, 140, 99, 1);
}

.pieces_reserve {
    display: flex;
    flex-direction: column;
    flex-direction: row;
    justify-content: center;
    align-items: baseline;
}

.pieces_reserve[selected] {
    background: green;
}

.team_color_1 {
    /* color: white; */
    background-color: rgba(255, 255, 255, 0);
    filter: invert(50%) sepia(97%) saturate(1896%) hue-rotate(158deg) brightness(90%) contrast(103%);
}

.team_color_2 {
    /* background: red; */
    background-color: rgba(255, 255, 255, 0);
    filter: invert(0%) sepia(0%) saturate(100%) hue-rotate(109deg) brightness(72%) contrast(87%);
}

.highlight_warn {
    background-color: rgba(190, 95, 10, 1);
}

.selected {
    background-color: rgba(127, 255, 0, 1);
}

.highlight_win {
    background-color: rgba(35, 210, 0, 1);
}