/* styles.css */
body {
  font-family: "Tahoma", "Arial", helvetica;
}
.video-container-wrapper {
  display: flex;
  justify-content: center;  /* Centers the videos horizontally */
  align-items: center;      /* Centers the videos vertically within the wrapper */
  gap: 20px;                /* Adds space between the two videos */
}


.custom-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #003366;
  padding: 10px;
  border-radius: 10px; /* Rounded corners added */
  margin-bottom: 10px; /* Added spacing below the controls */
}

.custom-controls button {
  color: #003366;
  background-color: #ff7300;
  border: none;
  padding: 5px 10px;
  cursor: pointer;
  border-radius: 5px; /* Rounded corners added */
  transition: background-color 0.3s, color 0.3s, border-color 0.3s; /* Transition added for smooth effect */
}

.custom-controls button:hover {
  background-color: #003366;
  color: #ff7300;
  border-color: #ff7300;
}

.play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer;
  color: #003366;
  background-color: #ff7300;
  border: 5px solid #003366; /* Border hinzugefügt */
  padding: 10px 20px;
  font-size: 16px;
  border-radius: 100px; /* Abgerundete Ecken */
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.8), inset 0 0 10px rgba(0, 51, 102, 0.5); /* Box-Schatten */
  transition: background-color 0.3s, color 0.3s, border-color 0.3s; /* Übergangseffekte */
  z-index: 1; /* Play-Button bleibt oben */
}

.play-button:hover {
  background-color: #003366;
  color: #ff7300;
  border-color: #ff7300;
}

.myVideo {
  width: 100%;
  height: 100%;
  border: 15px solid #003366;
  border-radius: 45px; /* Rounded corners added */
  box-shadow: 0 0 10px rgba(0, 51, 102, 0.5), inset 0 0 10px rgba(255, 255, 255, 0.5); /* Box shadow with inner shadow added */
  position: absolute; /* Positioniert das Video absolut im Container */
  z-index: 1; /* Video bleibt über dem Thumbnail */
  border-radius: 45px; /* Gleiche abgerundete Ecken wie das Thumbnail */
  object-fit: cover;
}

.video-thumbnail {
  position: absolute;
  width: 100%;
  height: 100%;
  border: 15px solid #003366;
  object-fit: cover; /* Bild bleibt im richtigen Seitenverhältnis */
  z-index: 1; /* Thumbnail bleibt hinter dem Video */
  cursor: pointer; /* Zeigt an, dass das Thumbnail anklickbar ist */
  border-radius: 45px; /* Gleiche abgerundete Ecken wie das Video */
}

.video-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: gray; /* Einfache graue Hintergrundfarbe */
  z-index: 0; /* Hintergrund hinter dem Video */
  border-radius: 45px; /* Gleiche abgerundete Ecken wie das Video */
}