:root {
  --background-primary: white;
  --text-primary: black;
  --text-opposite: white;
  --accent-1: #a67f8e;
  --accent-2: #30323D;
  --accent-3: #B0C5CA;

}

body {
  font-family: Source Serif Pro;
  background-color: var(--background-primary);
  color: var(--text-primary);
  width: 500px;
  display: block;
  margin-left: auto;
  margin-right: auto;

}



/* pseudos */
/*text selection */

::-moz-selection { /* Code for Firefox */
  color: white;
  background: var(--accent-3);
}

::selection {
  color: white;
  background: var(--accent-3);
}

a {
  color: var(--accent-1);
  text-decoration: none;
}


a:hover {
  color: var(--text-primary);
  transition: color .5s;
}

a:visited {
/* removed due to overwriting a:hover after transitioning */
}

/* comic */
.comic-view {

}

/* interface */
.pageCounts {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 3ch;
}
#pageNum {
  display: inline-block;
  text-align: center;
}

#totalPages {
  display: inline-block;
  text-align: center;
}

p {
  display: inline-block;
}
/* arrows */
/* arrow container */
.arrows {
  width: 58px;
  display: block;
  margin-top: 10px;
  margin-left: auto;
  margin-right: auto;
}

/* arrow circles */
.forward-arrow {
  height: 25px;
  width: 25px;
  background-color: rgb(63, 88, 228);
  border-radius: 50%;
  display: inline-block;
  
}


.backward-arrow {
  height: 25px;
  width: 25px;
  background-color: rgb(63, 88, 228);
  border-radius: 50%;
  display: inline-block;
  
}
/* arrow text/icons */
.backward-arrow p {
  color: white;
  height: 1rem;
  width: 1rem;
  margin-left: 1rem;
  margin-right: 1rem;
  transform: translateY(-0.9rem) translateX(-0.5rem);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.forward-arrow p {
  color: white;
  height: 1rem;
  width: 1rem;
  margin-left: 1rem;
  margin-right: 1rem;
  transform: translateY(-0.9rem) translateX(-0.5rem);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;

}