overlays.css

.overlay-content{

  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 50%;
  left: 50%;
  font-size: 12px;
  color: white;
  transform: translate(-0%, 5%);



}
.overlay {
  /* unvisited link */

  position: fixed;
  display: none; /* Hidden by default */
  width: 100%; /* Full width (cover the whole page) */
  height: 100%; /* Full height (cover the whole page) */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.5); /* Black background with opacity */
  z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
  cursor: pointer; /* Add a pointer on hover */
    font-family:  monospace;
}
.card {
  box-shadow: 0 4px 8px 0 rgba(30, 30, 30, 1);
  max-width: 700px;
  margin: auto;
  text-align: center;
  font-family: monospace;
  background: rgba(15, 15,15,10);
}


.card button {
  border: none;
  outline: 0;
  padding: 12px;
  color: white;
  background-color: #000;
  text-align: center;
  cursor: pointer;
  width: 100%;
  font-size: 18px;
}

.card button:hover {
  opacity: 0.7;
}

.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #02a81b;
  font-family: monospace;
}

/* Style the buttons that are used to open the tab content */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
    font-family: monospace;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}
.overlay a:link {
 color: grey;
}

/* visited link */
.overlay a:visited {
 color: green;
}

/* mouse over link */
.overlay a:hover {
 color: green;
}

/* selected link */
.overlay a:active {
 color: white;
}