:root {
  --base-font-size: 14px;
  --base-font-family: 'Open Sans', sans-serif;

  --code-font-family: 'Inconsolata', monospace;
  --code-font-size: 14px;
  --code-font-weight: 500;

  --blockquote-em-font-style: italic;
  --sidebar-width: 22rem;
}

.pagination-item, .pagination-item-title, .pagination-item-label {
    opacity: .8 !important;
    transition: all .2s;
    transition-property: all;
    transition-duration: 0.2s;
    transition-timing-function: ease;
    transition-delay: 0s;
}

.pagination-item:hover {
    opacity: 1 !important;
}

.grid2, .grid3, .grid3 {
  width: 100%;
}

.col {
  display: inline-block;
  vertical-align: top;
}

.grid2 .col {
  width: 50%;
}

.grid3 .col {
  width: 33.33%;
}

.grid4 .col {
  width: 25%;
}

[class*="img-left"] {
  float: left;
  margin: 5px 25px 10px 0;
}

[class*="img-right"] {
  display: inline-block;
  margin: 20px 0px 10px 25px;
}

[class*="icon"] {
  margin: 20px auto;
  display: block;
  width: 25%;
  height: auto;
}

[class*="img-center"] {
  margin: 40px auto;
  display: block;
  height: auto;
}

.img-shadow {
  margin: 40px 0;
  box-shadow: 0px 2px 16px #858585;
  height: auto;
}

.img-shadow-center {
  box-shadow: 0px 2px 16px #858585;
  margin: 40px auto;
  display: block;
  height: auto;
}

#dark_mode {
  position: absolute;
  margin-top: 1.25em;
  right: 25px;
}

#dark_mode .fas {
  color: var(--theme-color);
}

#dark_mode .fas.fa-sun {
  margin-right: .5ex;
}

#dark_mode .fas.fa-moon {
  margin-left: .5ex;
}

#dark_mode input[type=checkbox]{
	height: 0;
	width: 0;
	visibility: hidden;
}

#dark_mode label {
	cursor: pointer;
	text-indent: -9999px;
	width: 48px;
	height: 24px;
	background: grey;
	display: inline-block;
	border-radius: 24px;
	position: relative;
}

#dark_mode label:after {
	content: '';
	position: absolute;
	top: 3px;
	left: 3px;
	width: 18px;
	height: 18px;
	background: #fff;
	border-radius: 18px;
	transition: 0.3s;
}

#dark_mode input:checked + label {
	background: var(--theme-color);
}

#dark_mode input:checked + label:after {
	left: calc(100% - 3px);
	transform: translateX(-100%);
}

#dark_mode label:active:after {
	width: 42px;
}

#dark_mode body {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
}