/* Popup container - can be anything you want */
.popupContainer {
    position: relative;
    display: inline-block;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    color: rgba(var(--main-color),1);
    font-weight: bold;
}
.popupContainer:hover {
    color: rgba(var(--main-dark-color),1);
}

.popupContent{
    cursor: default;
}

/* The actual popup */
.popupContainer .popupContent {
    visibility: hidden;
    background-color: rgba(var(--main-color),1);
    /*filter: brightness(150%);*/
    color: white;
    border-radius: 6px;
    padding: 15px;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%; /* Force the center of the div */
    transform: translate(-50%);
}

/* The actual popup */
.popupFloating {
    min-width: 250px; /* Set a default minimum width */
    margin-left: -125px; /* Divide value of min-width by 2 */
    background-color: #333; /* Black background color */
    color: #fff; /* White text color */
    text-align: center; /* Centered text */
    border-radius: 2px; /* Rounded borders */
    padding: 16px; /* Padding */
    position: fixed; /* Sit on top of the screen */
    z-index: 1; /* Add a z-index if needed */
    left: 50%; /* Center the popup */
    top: 50% /* Center the popup */
}

/* Popup arrow */
.popupContainer .popupContent::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}

/* Toggle this class - hide and show the popup */
.popupContainer .show {
    visibility: visible;
    -webkit-animation: fadeIn 1s;
    animation: fadeIn 1s;
    box-shadow: 1px 1px 1px 3px rgba(var(--main-dark-color),1);
    background: white;
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
    from {opacity: 0;}
    to {opacity: 1;}
}

@keyframes fadeIn {
    from {opacity: 0;}
    to {opacity:1 ;}
}


.popupTile{
    border: 1px solid rgba(var(--main-dark-color),1);
    padding-top: 15px;
    padding-bottom: 15px;
    cursor: pointer;
    width: 8vw;
    min-width: 130px !important;
    background-color: rgba(var(--main-color),1);
}

.popupTile:hover{
    background-color: rgba(var(--main-dark-color),1);
}

.grid-container {
    display: grid;
    grid-column-gap: 25px;
    grid-auto-flow: column;
}

@media (max-width: 500px) {
    .grid-container {
        display: grid;
        grid-row-gap: 10px;
        grid-auto-flow: row;
    }

    .popupTile{
        border: 1px solid rgba(var(--main-dark-color),1);
        padding: 15px;
        cursor: pointer;
        width: 140px;
        height: 140px;
        /*zoom: 0.8;*/
        /*-moz-transform: scale(0.8);*/
    }

}