.links line {
  stroke: #999;
  stroke-opacity: 0.26;
  -webkit-transition: stroke-opacity 0.5s; /* Safari */
  transition: stroke-opacity 0.5s;
}

.nodes circle {
  stroke: #fff;
  stroke-width: 1.5px;
  -webkit-transition: r 0.5s; /* Safari */
  transition: r 0.5s;
  cursor: pointer;
}
/*rgb(39,61,127) header*/
/*rgb(36,156,213) footer*/
.container {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: 10vh 85vh 5vh;
    grid-row-gap: 0;
    align-items: stretch;
    grid-template-areas:
        "h h h h h h h h h h h h"
        "c c c c c c c c c c c c";
    /*margin-top: 0;
    padding-top: 0;*/
}
.header {
    grid-area: h;
    background-color: rgb(39,61,127);
    color: white;
    padding-left: 2em;
    text-align: center;
}
.menu {
    display: none;
    grid-area: m;
    background-color: rgb(247,252,254);
    /*background: black;*/
    /*padding: 0;*/
    margin: 0;
}
.content {
    grid-area: c;
    /*margin: 0;*/
}
body {
  font-family:  Tahoma, Helvetica, Geneva, sans-serif;
}
h1 {
  font-weight: 100;
}
.footer {
   grid-area: f;
   display: none;
   background-color: rgb(36,156,213);
   margin: 0;
   padding: 5px;
   color: white;
}
li{
  background-color: rgb(240,240,240);
  width: 100%;
  border: 1px black solid;
  padding: 5px;
  margin: 5px;
}
.popover {
  position: relative;
  top: -80vh;
  left: 10%;
  min-height: 70vh;
  width: 80%;
  overflow-y: auto;
  text-align: center;
  background-color: rgba(36,156,213,0.5);
  padding: 5px;
  z-index: 90;
  font-family: Helvetica,sans-serif;
  font-weight: 100;
  transition: visibility 0s linear 300ms, opacity 300ms;
}
.card {
  position: absolute;
  top: 15vh;
  left: 70%;
  height: 70vh;
  overflow-y: auto;
  text-align: center;
  background-color: rgba(36,156,213,0.5);
  padding: 2em;
  width: 20%;
  /* z-index: -99; */
  visibility: hidden;
  font-family: Helvetica,sans-serif;
  font-weight: 100;
}
.card > img {
  margin-bottom: 1em;
}
.card > div {
  text-align: left;
}
.tooltip {
  position: absolute;
  z-index: 10;
  visibility: hidden;
  font-family: Helvetica, sans-serif;
  font-weight: 100;
}
li:hover {
  color:white;
  background-color: rgb(36,156,213);
}
a:link {
    text-decoration: none;
}
ul {
  display: grid;
  list-style-type: none;
  grid-template-columns: repeat(1, 1fr);
}
@media screen and (max-width: 640px) {
    .container {
        grid-template-areas:
            "h h h h h h h h h h h h"
            "c c c c c c c c c c c c";
    }
    html{
      font-size: 10px;
    }

}