:root {
--color-font: black;
--color-link: blue;
--color-card: white;
--color-background: white;
}
@media (prefers-color-scheme: dark) {
:root {
--color-font: white;
--color-link: blue;
--color-card: #202124;
--color-background: black;
	}
}
@media (prefers-color-scheme: light) {

}

::selection {
	background: gold;
	color: white;
}

/* scroll buffer */
html {
  scroll-padding: 20px 0 0 0;
}

body {
	color: var(--color-font);
	background: var(--color-background);
  letter-spacing: .03em;
	font-family: monospace, 'Apple Color Emoji', arial, sans-serif;
}

.jumbotron {
	padding-top: 3rem;
	padding-bottom: 3rem;
	margin-bottom: 0;
	background: var(--color-background);
}

@media (min-width: 768px) {
  .jumbotron {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }
}

.jumbotron p:last-child {
  margin-bottom: 0;
}

.jumbotron-heading {
  font-weight: 300;
}

.jumbotron .container {
  max-width: 60rem;
}

footer {
  padding-top: 10rem;
  padding-bottom: 3rem;
}

footer p {
  margin-bottom: .25rem;
}

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

a:hover {
	color: var(--color-link);
}

.card {
	background: var(--color-card);
	border-radius: 1.25rem;
}

/* dark border on hover */
.card:hover {
  border: 1px solid darkgray;
  transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.go-link {
	font-weight: bold;
}

.btn {
	border-radius: 1.25rem;
	padding: 0.375rem 1rem;
}

.btn-dark {
	background-color: black;
}

.dropdown-menu {
		border-radius: 1.25rem;
}

.dropdown-item {
	border-radius: 1.25rem;
	background: none;
}
.dropdown-item:hover {
	border-radius: 1.25rem;
}

/* card colomn layout */
  @media (min-width: 576px) {
      .card-columns {
          column-count: 1;
      }
  }

  @media (min-width: 768px) {
      .card-columns {
          column-count: 2;
      }
  }

  @media (min-width: 992px) {
      .card-columns {
          column-count: 3;
      }
  }

/* more spacing in dropdown-item */
.menu-padding {
  padding: .75rem 1.5rem;
}

/* external link icon on hover in list group */
.list-group-item {
  position: relative;
  display: block;
  background: var(--color-card);
}

.list-group-item:before{
    display: inline-block;
    width: 16px;
    height:16px;
    right: 16px;
    content: " ";
    background-image: url(externallink.svg);
    position: absolute;
    transition: all 0.15s ease;
    visibility: hidden;
}

.list-group-item:hover:before {
  visibility: visible;
}

.list-group-item:hover {
  background-color: rgba(0,0,0,0.01);
  transition: all 0.15s ease;
}

/* border radius container */
.container {
  border-radius: 3px;
}

.card-title {
	text-align: center;
}

.dropdown-menu, .dropdown-item{
	color: var(--color-font);
	background: var(--color-card);
}

/* favicon styling in list */
img.favicon {
  margin: 0px 20px 0px 0px;
  height: 16px;
  width: 16px;
}

/* dropdown menu */
 @media (min-width: 992px) {
.dropdown:hover>.dropdown-menu {
  display: block;
}
}

/* Without this, clicking will make it sticky */
@media (min-width: 992px) {
.dropdown>.dropdown-toggle:active {
  pointer-events: none;
}
}

/* styling category title */
@media (min-width: 768px) {
.category-title {
  font-size:5vw;
  font-weight:lighter;
  color: black;
}
}

.highlight{
  border-radius: 0.3em;
  background-image: linear-gradient(-100deg, rgba(255, 224, 0, 0.3), rgba(255, 224, 0, 0.7) 93%, rgba(255, 224, 0, 0.4));
}
}