MapVoting {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    justify-content: center;
    align-items: center;


    .main-container {
        font-weight: bold;
        border-radius: 20px;
        pointer-events: all;
        font-size: 25px;
        font-family: Poppins;
        color: #fff;
        flex-direction: column;
        background-color: #242424;
        border: 4px rgb(61, 129, 63);
        z-index: 1;
        align-items: center;
        justify-content: space-between;
        width: 60%;
        padding: 20px;

        h1 {
            font-size: 42px;
        }

        .image {
            background-size: 100% 100%;
            width: 200px;
            height: 200px;
        }

        .voting-container {
            flex-direction: row;
            width: 80%;
            justify-content: space-evenly;
            align-items: center;
            flex-shrink: 0;

            gap: 12px;
        }

        .map {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            margin-top: 20px;
            border-radius: 5%;
            border: 5px black;
            transition: all 0.1s;
            background-color: #022638a5;
            transform: scale(1);

            .info-container {
                gap: 5%;
            }

            &:hover {
                transform: scale(1.1);
            }

            &:active {
                transform: scale(0.95);
                background-color: #022638;
            }
        }

        .selected {
            border: 5px rgb(61, 129, 63);
            background-color: #022638;
        }

        .close-container {
            position: absolute;
            top: 10px;
            right: 10px;
            height: 60px;
            width: 60px;
            // margin-top: 10px;
            // margin-right: 10px;
            align-items: center;
            justify-content: center;
            border-radius: 10px;
            background-color: #555555;

            &:hover {
                background-color: red;
            }

            .close {
                font-size: 40px;
                color: #fff;
                cursor: pointer;
                text-shadow: 2 2 2 black;

                &:hover {
                    background-color: red;
                    text-shadow: 4 4 4 black;
                }
            }
        }

        .gamemode-container {
            width: 100%;
            height: 400px;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            flex-direction: column;
            padding: 20px;

            .scroll-area {
                position: relative;
                width: 80%;
                height: 100%;
                overflow-y: scroll;
                overflow-x: hidden;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                // padding: 32px;
                gap: 10px;

                .gamemode {
                    width: 80%;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    border-radius: 2%;
                    border: 5px black;
                    transition: all 0.1s;
                    background-color: #022638a5;
                    transform: scale(1);
                    height: 100%;
                    // padding: 10px;  



                    &:hover {
                        transform: scale(1.05);
                    }

                    &:active {
                        transform: scale(0.95);
                        background-color: #022638;
                    }

                    &.selected {
                        border: 5px rgb(61, 129, 63);
                        background-color: #022638;
                    }
                }
            }
        }
    }
}