/******Header*****/
header {
  height: 4rem;
  background-color: #f3f3f3;
  /* border: 2px solid; */
}
.title-bar {
  display: flex;
  height: 50%;
  /* gap:0.5rem; */
  align-items: center;
  padding-left: 0.5rem;
}
.logo {
  height: 80%;
  mix-blend-mode: multiply;
}
.title {
  font-size: 1.2rem;
}

.menu-bar {
  display: flex;
  gap: 1rem;
  margin-left: 1rem;
  height: 50%;
  align-items: center;
}
.menu {
  position: relative;
  /* border: 2px solid; */
  padding-bottom: 12px;
}

.menu:hover .menu-item {
  display: block;
}

.menu-item {
  background-color: #f9f7f7;
  position: absolute;
  top: 31px;
  z-index: 1;
  width: 6.5rem;
  display: none;
  cursor: pointer;
}
li {
  padding: 0.25rem;
}
li:hover {
  background-color: grey;
}
.menu-btn {
  padding: 2px;
  border-radius: 4px;
}
.menu-btn:hover {
  background-color: rgb(201, 197, 197);
  cursor: pointer;
}

#videoinput {
  display: none;
}

/* main content */
main {
  height: calc(100vh - 4rem - 4rem);
  background-color: hsl(0, 27%, 2%);
  display: flex;
  justify-content: center;
  align-items: center;
}
.video {
  height: 100%;
  /* border: 10px solid red; */
}

#volumeToast{
  background-color: rgb(211, 203, 203);
  color: black;
  width: 3.7rem;
  height: 3rem;
  font-size: 1.8rem;;
  display:none;
  position:absolute;
}
/******Footer*****/
footer {
  height: 4rem;
  background-color: #f0f0f0;
  display: flex;
  flex-direction: column;
  padding: 0.5rem;
}

#controls {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 5px;
}

#playbackBox {
  font-size: 1rem;
  width: 2.3rem;
  height: 1.3rem;
  border: 2px solid;
}
#seek-bar{
  width:95%;
  cursor: pointer;
}

/* Added styles for play/pause toggle */
#pause {
  display: none;
}

/* Added styles for volume icons */
#volume-icon, #mute-icon {
  cursor: pointer;
}

#mute-icon {
  display: none;
}

/* Added styles for time display */
#current-time, #total-time {
  font-family: monospace;
}