/* Clean Slate */
* {
  margin: 0;
  padding: 0;
  border: 0;
}

* {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}

:root {
  background-color: lightgreen;
}

/* Global Selectors */
body {
  width: fit-content;
  background-color: #EFFBFCFF;
  border-left: 10px;
  border-right: 10px;
  color: #404040;
  border-style: solid;
}

h1 {
  padding: 30px;
  background-color: white;
}

nav menu {
  list-style: none;
}

nav menu li {
  padding: 15px;
}

.switch {
  display: inline-flex;
  justify-content: end;
  flex: auto;
}

h2 {
  color: brown;
}

main {
  width: 120vh;
  padding: 40px;
  border-radius: 10px;
}

p {
  color: #502800;
  text-align: justify;
}

p + p {
  margin-top: 16px;
}

.bottom-outline {
  box-shadow: 0px 4px #404040;
}

.center-x {
  margin: 0 auto;
}

.center-y {
  margin: auto 0;
}

.center {
  margin: auto;
}

.link {
  cursor: pointer;
}

.single {
  width: 50%;
}

.spread {
  width: 100%;
}

.inline {
  display: flex;
}

nav.comic-navigation menu {
  width: fit-content;
}

nav.site-navigation menu li {
  --r1: 40;
  --g1: 40;
  --b1: 40;
  --r2: 120;
  --g2: 120;
  --b2: 120;

  --r: calc(var(--r1) + (var(--r2) - var(--r1)) * var(--order) / (var(--size) - 1));
  --g: calc(var(--g1) + (var(--g2) - var(--g1)) * var(--order) / (var(--size) - 1));
  --b: calc(var(--b1) + (var(--b2) - var(--b1)) * var(--order) / (var(--size) - 1));

  /* background-color: #404040; */
  background-color: rgb(var(--r), var(--g), var(--b));
  color: white;
}

nav.site-navigation menu li.active {
  background-color: white;

  color: black;
}

nav.site-navigation menu li:hover {
  background-color: olive;
  color: white;
}

select.page-selector {
  padding: 8px;
  background-color: beige;
  color: #502800;
  outline: 1px solid burlywood;
  border-radius: 3px
}

div.navbar-border {
  border-top: 4px solid #404040;
  width: auto;
  height: auto;
  display: flex;
  flex-grow: 1;
}

.first, .previous {
  transform: scaleX(-1);
}

div.title-box {
  margin-top: 16px;
  margin-bottom: 4px;
}

article {
  background-color: beige;
  outline: 1px solid burlywood;
  padding: 16px;
  border-radius: 3px;
}

.notes {
  display: grid;
  grid-template-areas:
  "author vertical description";
  grid-template-columns: 
  [author] 150px [vertical] 0 [description] auto [end];
  
  gap: 16px;
}

.notes + .notes {
  margin-top: 16px;
}

div.author-information {
  grid-area: author;
}

div.vertical-bar {
  width: 2px;
  background-color: burlywood;
  height: auto;
  grid-area: vertical;
}

div.description {
  grid-area: description;
}

img.author-avatar {
  display: inline-block;
  outline: 1px solid black;
  width: 100%;
}

div.author-information p {
  margin: 3px 0px;
  color: brown;
  text-align: right;
}

p.author-name {
  font-weight: bold;
}

p.author-role {
  font-style: italic;
  font-size: small;
  margin: 0;
}

time {
  color: #a78563;
  font-style: italic;
  font-size: small;
}

.filler {
  flex-grow: 1
}

/* Hides an element without removing it for screen readers. */
.visually-hidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

/* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  flex-grow: 0;
  width: 60px;
  height: 34px;
  margin: 10px;
}

/* Hide default HTML button traits */
button {
	background: none;
	color: inherit;
	border: none;
	padding: 0;
	font: inherit;
	cursor: pointer;
	outline: inherit;
  overflow: hidden;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider.toggled:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
  background-color: #6ab6f3;
}

.slider.toggled {
  background-color: #a8b3d6;
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}