html, body {

  margin:0;
  padding:0;

  width:100%;
  height:100%;

}


body {

  background:#000;

  display:flex;

  flex-direction:column;

  justify-content:center;

  align-items:center;

  overflow:hidden;

}



#viewer {

  width:100%;

  height:calc(100vh - 100px);

  display:flex;

  justify-content:center;

  align-items:center;

  position:relative;

}



#manga {

  max-width:100%;

  max-height:100%;

  width:auto;

  height:auto;

  display:block;

}



#pageNumber {

  position:absolute;

  bottom:-20px;

  left:50%;

  transform:translateX(-50%);

  color:white;

  font-size:16px;

  font-family:-apple-system, BlinkMacSystemFont, sans-serif;

  opacity:0.7;

}



#swipeArea {

  width:100%;

  height:100px;

  position:relative;

  display:flex;

  align-items:center;

  justify-content:space-between;

  padding:0 20px;

  box-sizing:border-box;

}



#swipeArea button {

  width:60px;

  height:60px;

  border:none;

  background:none;

  color:white;

  font-size:40px;

  opacity:0.7;

}



#swipeText {

  position: fixed;

  left: 50%;

  bottom: 28px;

  transform: translateX(-50%);

  color: white;

  font-size: 16px;

  font-family: serif;

  opacity: 0;

  z-index: 9999;

  animation: swipeHint 5s ease-in-out forwards;

}


@keyframes swipeHint {

  0% {
    opacity: 0;
  }

  50% {
    opacity: 0.8;
  }

  100% {
    opacity: 0;
  }

}