﻿
.container1 {
    display: flex; /* Enables Flexbox */
    justify-content: center; /* Centers divs horizontally */
    align-items: center; /* Centers divs vertically (optional) */
    height: 100vh; /* Full viewport height for vertical centering */
    gap: 20px; /* Adds space between the two divs */
    align-items: center; /* Vertically centers child */
    justify-content: center; /* Optional: Horizontally centers child */
    height: 400px; /* Parent must have height */
    /*background-image: url('../icons/global_network.png');*/
    /*background-image: url('../icons/world-map.png');*/
    background-image: url('../icons/world-map1.png');
    /*background-image: url('../icons/world-map_1600x1067.png');*/
    /* background-image: url('../icons/globe_mesh.png');*/
    /*background-image: url('../icons/globe_mesh_green.png');*/
    /*background-position: center;*/ /* Centers image horizontally and vertically */
    background-size: contain; /* Scales image to fill the div (may crop edges) */
    background-repeat: no-repeat;
    padding: 10px;
    background-position: calc(50% + 10px) center;
    /*background-size: 60px;*/
}

.container2 {
    padding: 10px;
}

.box1 {
    width: 200px;
    height: 150px;
    color: white;
    background-color: rgba(0, 0, 0, 0.7);
    padding: 0px;
    border-radius: 10px;
    text-align: center;
    /*display: flex;*/
    align-content: center;
    align-items: center; /* Vertically centers child */
    justify-content: center; /* Optional: Horizontally centers child */
    transition: transform 0.2s ease; /* Smooth transition */
    outline: none;
    box-shadow: none;
}

    .box1:hover {
        transform: scale(1.1); /* Zooms the entire div by 10% */
        outline: none;
        box-shadow: none;
    }

    .box1:focus {
        outline: none;
        box-shadow: none;
    }

    .box1:active {
        outline: none;
        box-shadow: none;
    }

div:focus:not(:focus-visible) {
    outline: none;
}
