:root {
  --color-bg: hsl(230, 1%, 98%);
  --color-textfield-contrast: #fff;
  --color-footer-bg: #f5f5f5;
  --color-footer: #6c757d;
  --color-footer-icon: #495057;
  --color-text: #495057;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #202020;
    --color-textfield-contrast: #202020;
    --color-footer-bg: #1c1c1c;
    --color-footer: #6c757d;
    --color-footer-icon: #6c757d;
    --color-text: #bbb;
  }

  .navbar-brand {
    color: var(--color-text) !important;
  }

  .dropdown-menu {
    background: var(--dark) !important;
  }

  .dropdown-item, .no-paste {
    color: var(--color-text) !important;
  }

  .dropdown-item:hover {
    background: var(--color-textfield-contrast) !important;
  }

  .form-control:not(.btn) {
    border-color: var(--gray) !important;
  }

  .form-control:disabled {
	background: #363636 !important;
  }

  .modal-content {
	color: #ccc !important;
	background: #444 !important;
  }
}

html {
  position: relative;
  min-height: 100%;
}

body {
  padding-top: 3.5rem; /* Margin top by nav bar */
  padding-bottom: 3rem; /* Margin bottom by footer height */
  background: var(--color-bg) !important;
}

@media (max-width: 767.5px) {
  body {
    padding-top: 6.4rem; /* Margin top by unfolded nav bar */
  }
}

footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 3rem; /* Set the fixed height of the footer here */
  line-height: 3rem; /* Vertically center the text there */
  background-color: var(--color-footer-bg);
  font-size: 0.9rem;
  font-style: italic;
}

footer a {
  color: var(--color-footer);
  text-decoration: none !important;
}
footer .fab {
  font-size: 1rem;
}
footer a:not(:hover) .fab {
  color: var(--color-footer-icon);
}

/* messy fix for atrocious bootstrap idea of making hovered
 * active and inactive toggle buttons indistinguishable */
.btn-outline-secondary:not(:disabled):hover {
	color: var(--gray);
	background-color: unset;
	box-shadow: 0 0 0 .15rem color-mix(in srgb, var(--gray) 30%, transparent);
}
.btn-outline-secondary:not(:disabled).active:hover,
.btn-outline-secondary:not(:disabled):active:hover {
	color: var(--white);
	background-color: var(--gray);
}

.form-group textarea {
	margin: 0.5em 0px;
}

.form-control:not(.btn), .form-control:not(.btn):focus,
.form-group textarea, .form-group textarea:focus {
	color: var(--color-text) !important;
	background: var(--color-textfield-contrast);
}

.toolbar {
	display: none;
}
pre.lang {
	padding: 0 !important;
	margin: 0.5em 0 !important;
	outline: none !important;
}
pre.lang:before,
pre.lang:after {
    display: none;
}
#pastebin-code-block {
	border-left: 0;
	display: block;
}
#pastebin-code-block.line-numbers {
	padding-left: 3.8em;
}
#content-textarea, pre.lang,
#pastebin-code-block {
	white-space: pre-wrap !important;
	font-family: 'Noto Sans Mono', monospace !important;
	font-size: 13px !important;
	line-height: 1.4 !important;
	tab-size: 8 !important;
}
.line-highlight {
	z-index: 5;
	scroll-margin-top: 200px;
}