/* Fullscreen video background */
video#bgvid  {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;      /* fill screen width */
    height: 100vh;     /* fill screen height */
    object-fit: cover; /* crop edges, perfect background */
    z-index: -1;       /* behind table */
}

/* Overlay content */
.overlay {
    position: relative;
    z-index: 10;
    width: 100%;
    height: auto;
    padding-top: 20px; /* pushes table down a bit */
}


.content-container {
  min-height: 100vh;
  display: flex;
  align-items: flex-end; /* Moves table to bottom */
  justify-content: center; /* Centers table horizontally (optional) */
  box-sizing: border-box;
  padding: 20px;
}
#bottom-table {
  background-color: rgba(0, 0, 0, 0.6);
  color: white;
  width: 100%;
  border-collapse: collapse;
}

#bottom-table td {
  padding: 15px;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

table.table1  {
    display: flex;
    justify-content: center; /* horizontal centering */
    align-items: flex-start; /* align to top */
    min-height: 100vh; /* full viewport height */
    padding-top: 20px; /* optional spacing from top */
}
table.table2 {
	width: 100%;
	height: 100px;
	vertical-align: middle;
	}
table.table3 {
	width: 100%;
	height: 50px;
   	border: none;
	}
table.table3 td {
	width: 50%;
    vertical-align: middle;
    }
table.table4 {
	width: 600px;
	height: 300px;
	vertical-align: middle;
   	border: solid white;
	}
table.table4 td	{
	width: 100%;	
	vertical-align: middle;
   	border: solid white;	
    }
table.table5 {
	 width: 50%;
	 height: 50px;
   	 border: solid red;
	  }
table.table5 td	{
	width: 50%;	
	vertical-align: middle;
   	border: solid white;	
    }

img {
	display: block;
    margin: auto;
    }
P   { 
	text-align: center;
	font-size: x-large;
	}

.wandering-construction {
  /* 1. POSITIONING: Lifts it out of the middle and lets it roam the whole screen */
  position: fixed; 
  z-index: 9999;        /* Keeps it on top of everything else */
  pointer-events: none; /* Allows visitors to click buttons behind the moving image */

  /* 2. SIZE: Adjust these numbers if you need it bigger or smaller */
  width: 400px; 
  height: auto;

  /* 3. SPEED: 45 seconds for a full loop. Change to 45s to make it even slower */
  animation: wanderScreen 100s ease-in-out infinite;
}
@keyframes
 wanderScreen {
  0% {
    top: 10vh;
    left: 10vw;
  }
  25% {
    top: 70vh;
    left: 60vw;
  }
  50% {
    top: 20vh;
    left: 80vw;
  }
  75% {
    top: 60vh;
    left: 20vw;
  }
  100% {
    top: 10vh;
    left: 10vw; /* Must perfectly match 0% so it doesn't jump or glitch */
  }
}
html, body {
  margin: 0;
  height: 100%;
}
.content-container {
  min-height: 100vh;
  display: flex;
  align-items: flex-end; /* Moves table to bottom */
  justify-content: center; /* Centers table horizontally (optional) */
  box-sizing: border-box;
  padding: 20px;
}
#bottom-table {
  background-color: rgba(0, 0, 0, 0.6);
  color: white;
  width: 100%;
  border-collapse: collapse;
}

#bottom-table td {
  padding: 15px;
  border: 1px solid rgba(255, 255, 255, 0.2);
}