body, html {
  margin: 0;
  padding: 0;
  height: 100%;
  /*            overflow: hidden;*/
}
div {
  margin: 8px 4px 8px 4px;
}
.Title_Text {
  border: 1px solid rgb(255, 255, 255);
  border-radius: 6px;
  padding: 8px 4px 8px 4px;
  text-align: center;
  font-weight: bolder;
  font-size: 2.5em;
  font-variant: small-caps;
  letter-spacing: .5px;
  color: #B6E3FF;
  text-shadow: 0px 0px 3px #31C0FF, 0 0 30px #5AC2FF;
  box-shadow: 2px 2px 3px #4191C0, 3px 3px 3px #A7D3F0;
  -webkit-text-stroke: .5px #071A24; /* Stroke width and color */
  background-color: #071A24;
}
.center-image {
  display: block;
  justify-content: center; /* Horizontally centers the image */
  align-items: center; /* Vertically centers the image */
}
.video-background {
  border: 1px solid rgb(255, 255, 255);
  border-radius: 6px;
  box-shadow: 2px 2px 3px #4191C0, 3px 3px 3px #A7D3F0;
  padding: 4px 8px;
  position: relative;
  height: 40vh;
  overflow: hidden;
}
.video-background video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  object-fit: fill;
  transform: translate(-50%, -50%);
  z-index: -1; /* Ensure the video is behind other content */
}
.content {
  position: relative;
  z-index: 1; /* Ensure content is above the video */
  color: white;
  text-align: center;
  display: flex; /* Enable flexbox */
  justify-content: center; /* Center horizontally */
  align-items: center; /* Center vertically */
  margin: auto; /* Center within the parent */
}
.content img {
  position: absolute;
  top: 12px;
  /*  transform: translateY(40%); Position the image 10% from the top */
  left: 50%;
  transform: translateX(-50%);
  width: min(40%, 32vh); /* Set the width to 15% of the div */
  height: auto; /* Maintain aspect ratio */
}
.corner-image {
  position: absolute;
  width: auto;
  bottom: 0; /* Position the image at the bottom */
  right: 0px; /* Position the image at the right */
  /*    padding-right: 5px;  Add some padding if needed */
  margin: 0;
}
.corner-image img {
  margin: 0;
  width: 50px; /* Set the width of the corner image */
  padding-right: 5px;
  height: auto; /* Maintain aspect ratio */
  mix-blend-mode: difference;
}
.Extra_Vertical_Space {
  content: "A" !important;
  display: block !important;
  margin-bottom: 1em !important;
}
.Shadow_Text {
  padding: 8px 8px 8px 8px;
  border-radius: 6px 6px 6px 6px;
  border: 1px solid #FFFFFF;
  color: white; /*Text color */
  -webkit-text-stroke: .5px black; /*   Stroke width and color */
  box-shadow: 2px 2px 3px #4191C0, 3px 3px 3px #A7D3F0;
  background-color: rgba(35, 91, 125, 1.00);
  text-shadow: 1px 1px 2px black;
}
.Pop_Header {
  font-size: 1.1em;
  font-weight: bolder;
  text-align: left;
  letter-spacing: .5px;
  font-variant: small-caps;
  color: black;
  -webkit-text-stroke: .5px white; /* Stroke width and color */
  box-shadow: 2px 2px 3px #4191C0, 3px 3px 3px #A7D3F0;
  text-shadow: 4px 4px 9px #000000;
  border-radius: 6px;
  opacity: 1;
  padding: 4px 8px 4px 8px;
  border: 1px solid rgb(255, 255, 255);
  background-image: conic-gradient(from 0.5turn at 50% -150%, #A7D3F0, 20deg, #4191C0, 80deg, #014572, 240deg, #014572, 290deg, #4191C0, 340deg, #A7D3F0);
}
.copy_notice {
  color: deepskyblue;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
}
body, ::backdrop {
  background: rgba(33, 54, 75, 1.00);
  overflow: auto;
}
/* Light mode */
@media (prefers-color-scheme: light) {
  html,
  :fullscreen {
    scrollbar-color: #c2c2c2 #f3f3f3; /* thumb track */
  }
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  html,
  :fullscreen {
    scrollbar-color: #3f3f3f #1e1e1e;
  }
}

#fullscreen-button {
  position: absolute;
  top: 0px;
  left: -7px;
  background: rgba(0, 0, 0, 0.05);
  border: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  box-sizing: border-box;
  transition: transform .3s;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
#fullscreen-button:hover {
  transform: scale(1.125);
}
#fullscreen-button svg:nth-child(2) {
  display: none;
}
[fullscreen] #fullscreen-button svg:nth-child(1) {
  display: none;
}
[fullscreen] #fullscreen-button svg:nth-child(2) {
  display: inline-block;
}
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  /* Position the tooltip */
  position: absolute;
  z-index: 1;
  top: -5px;
  left: 105%;
}
.tooltip:hover .tooltiptext {
  visibility: visible;
}