html,
body {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: arial, verdana, sans-serif;
}

#pdf-container {
  position: relative;
  width: 100%;
  height: 100%;
}

.controls {
  position: absolute;
  bottom: 1em;
  right: 1em;
  display: flex;
  align-items: center;
  gap: 1em;
  user-select: none;
  opacity: 1;
  transition: opacity 0.2s ease-in-out;
  & .speaker-button {
    align-self: center;
    padding: 0.5em 1.25em;
    border: none;
    border-radius: 999px;
    background: rgba(17, 17, 17, 0.6);
    color: #f5f5f5;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    cursor: pointer;
    backdrop-filter: blur(8px);
    transition: background 0.2s ease-in-out, color 0.2s ease-in-out;
  }
  & .speaker-button:hover,
  & .speaker-button:focus-visible {
    background: rgba(19, 218, 236, 0.85);
    color: #0b0b0b;
    outline: none;
  }
  & .arrow {
    width: 0;
    height: 0;
    border-block: 2em solid transparent;
    border-inline: 0 solid transparent;
    cursor: pointer;
    transition: border-color 0.2s ease-in-out;
  }
  & .prev {
    border-inline-end: 50px solid #71E9F4;
  }
  & .next {
    border-inline-start: 50px solid #71E9F4;
  }
  & .prev:hover {
    border-inline-end-color: #13DAEC;
  }
  & .next:hover {
    border-inline-start-color: #13DAEC;
  }
}

@media (prefers-reduced-motion: reduce) {
  .controls {
    & .arrow {
      transition: none;
    }
  }
}