.header {
  background-color: #979797;
  text-align: center;
  padding: 20px;
}

/* Style the top navigation bar */
.topnav {
  overflow: hidden;
  background-color: #333;
}

/* Style the topnav links */
.topnav a {
  float: left;
  display: inline;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* Change color on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

body
{
        margin: 0;
        padding: 0;
    background-color: #000000;
   background-image: url("images/fog.gif");
    background-size: 100% 100%;
    background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  
    
}

 #map-container {
        position: relative;
        width: 1000px; 
        margin: 0 auto;
    }
    #map-image {
        width: 100%;
        display: block;
    }
    .region {
        position: absolute;
        border: 1px red; 
        opacity: 1; 
        cursor: pointer;
        
    }
    .popup-text {
            position: fixed;
            top: 50%;
            right: 10px;
            transform: translateY(-50%);
            background-color: white;
            padding: 10px;
            border: 1px solid black;
            border-radius: 5px;
            display: block;
            max-width: 500px;
            overflow-y: auto;
           font-weight: bold;
        } 
    .popup-text b {font-weight: bold;}