/* Color Variables :
----------------------------------------------- */
:root {
  --main: #8b013fe3;
  --sub-titles: #f88dad;
  --links: #8390fa;
  --one: #e3e3e3;
  --two: #808080;
  --three: #d3d3d3;
  --four: #555555;
  --five: #d4a0a7;
  --six: #002366;
}

/* Colors :
----------------------------------------------- */
body {
  color: var(--two);
}

h1,
i {
  color: var(--main);
}

a {
  color: var(--links);
}

h2,
h3,
h5 {
  color: var(--sub-titles);
}

li,
nav p,
#img-caption {
  color: var(--four);
}

footer,
h4,
.top-btn,
footer,
footer i {
  color: var(--one);
}

/* Background :
----------------------------------------------- */
#img-div {
  background-color: var(--three);
}

.book {
  background-color: white;
}

aside {
  background-color: hsla(0, 0%, 12%, 0.904);
}

footer {
  background-color: var(--main);
}

/* Borders :
----------------------------------------------- */
nav {
  border-bottom: 3px solid var(--two);
}

nav p,
h2 {
  border-bottom: 1px solid var(--two);
}

.official-site {
  border: 10px solid var(--three);
}

h4 {
  border-bottom: 3px solid var(--one);
}

/* Pseudo-Classes :
----------------------------------------------- */
.special-link:hover,
.special-link:focus {
  color: var(--five);
  border-bottom: 1px solid var(--five);
}

.special-p a:hover,
.special-p a:focus {
  color: var(--six);
}

.top-btn:hover,
.top-btn:focus {
  opacity: 1;
  text-shadow: 0 0 0 var(--one);
}