#legal-overlay {
  min-width: 500px;
  position: fixed; /* Sit on top of the page content */
  display: block; /* Hidden by default */
  width: 100%; /* Full width (cover the whole page) */
  height: 180px; 
  left: 0;
  bottom: 0;
  background-color: rgb(48, 48, 48); /* Black background with opacity */
  z-index: 3; /* Specify a stack order in case you're using a different order for other elements */
  opacity: 0;
  transition: opacity 1s ease;
  border-top: 5px solid white;
}

#legal-overlay-text{
  position: absolute;
  top: 10px;
  left: 5%;
  width: 85%;
  height: 100%;
  color: white;
  overflow: auto;
}

#legal-overlay-ctrl {
  position: absolute;
  left: 94%;
  width: 100%;
  height: 100%;
  top: 30%;
}

.legal-button {
  display: inline;
  cursor: pointer; /* Add a pointer on hover */
  color: white;
  background-color: rgb(47, 103, 177);
  padding-left: 0.3rem;
  padding-right: 0.3rem;
  padding-top: 0.4rem;
  padding-bottom: 0.4rem;
}

.legal-button:hover {
  background-color: rgb(176, 212, 236);
}

.legal {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-size: 1rem;
}

.legal p {
  margin-top: 0.5rem;
  margin-bottom: 0.1rem;
}

.legal a {
  color: lightblue;
  font-style: oblique;
  font-weight: 600; 
}