:root {
  --accent-color: #cc0000;
  --button-padding: 10px 15px;
  --button-font-size: 16px;
  --transition-duration: 0.3s;
  --text-color: #333;
}

/* The main container is 100% width, with no background color. */
#anoncam-container {
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  padding: 10px 0; /* top/bottom padding only */
  background-color: transparent; /* so you can style it externally */
}

#anoncam-container h3 {
  margin-bottom: 20px;
}

/* 
   Use CSS Grid to place two videos side by side on wider screens, 
   with a 10px gap in between. 
*/
.video-container {
  display: grid;
  width: 100%;
  margin: 0;
  padding: 0;
  grid-template-columns: 1fr 1fr; /* two equal columns */
  gap: 10px;                     /* space between columns */
}

/* Each video is in a 4:3 box via the "padding-top" trick */
.video-wrapper {
  position: relative;
  width: 100%;
  background-color: #000; /* black background for letterboxing */
  overflow: hidden;
}

/* Force a 4:3 ratio by padding-top: 75% (3/4 = 0.75) */
.video-wrapper::before {
  content: "";
  display: block;
  padding-top: 75%;
}

/* Absolutely position the <video> to fill the .video-wrapper */
.video-wrapper video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain; /* letterbox/pillarbox as needed */
  background-color: #000;
}

/* On smaller screens, switch to one column (videos stacked) */
@media (max-width: 600px) {
  .video-container {
    grid-template-columns: 1fr; /* single column */
  }
}

/* Control container: buttons centered below the videos */
.control-container {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0px 0px 10px 0px;
}

/* Updated button styling */
.control-container button {
  background-color: #4fa4ff; /* Blue background */
  color: #000;               /* White text */
  border: none;              /* No border */
  padding: 6px 12px;         /* Decreased padding */
  cursor: pointer;
  border-radius: 4px;        /* Slightly rounded corners */
  transition: background-color 0.2s ease;
}

.control-container button:hover,
.control-container button:focus {
  background-color: #4fa4ff; /* Darker blue on hover/focus */
}

.control-container button:active {
  background-color: #4fa4ff; /* Even darker when clicked */
}

/* Example for the "muted" class if you want a distinct style, 
   but you can remove or tweak if desired */
#muteBtn.muted {
  background-color: #6c757d; /* grayish background if muted */
  color: #fff;
}


/* Status output styling */
#statusOutput {
  font-size: 16px;
  color: var(--text-color);
  margin-top: