/* accessibility */

:root {
  --color-alpha: #fff;
  --color-beta:#aaa;
  --color-gamma: #222;
}

[data-theme="light"] {
  --color-alpha: #333;
  --color-beta:#555;
  --color-gamma: #ddd;
}

/* general styles */

body {
  /* modified system-default font stack: https://www.digitalocean.com/community/tutorials/css-system-font-stack */
  font-family: "Roboto Mono", SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  background: #222;
  background: var(--color-gamma);
  color: #fff;
  color: var(--color-alpha);
  font-size: 0.9em;
  line-height: 1.5em;
  padding: 8px;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 800;
  margin: 0 0 0.8em 0;
  padding: 0;
  color: #aaa;
  color: var(--color-beta);
}

h1 {
  font-size: 1.6em;
  line-height: 1.7em;
}

h2, h3, h4, h5, h6 {
  font-size: 1.3em;
  line-height: 1.4em;
}

p {
  margin: 0 0 0.8em 0;
  padding: 0;
}

/*  `font-family: monospace, monospace;` corrects the inheritance and scaling of font size in all browsers */
code, pre {
  font-family: monospace, monospace;
  color: #aaa;
  color: var(--color-beta);
}

a,
a:link,
a:active,
a:visited,
.theme-switch span {
  color: #aaa;
  color: var(--color-beta);
  text-decoration: underline;
  cursor: pointer;
}

a.active,
a.active:visited {
  color: #fff;
  color: var(--color-alpha);
  font-weight: 800;
}

a:hover,
.theme-switch span:hover {
  color: #fff!important;
  color: var(--color-alpha)!important;
  font-weight: 800;
}
/* note: explore tags aren't anchors, but individual script page "tags" are */
a.tag {
  text-decoration: none!important;
}

hr {
  margin: 0.8em 0;
  border: none;
  background-color: #aaa;
  background-color: var(--color-beta);
  color: #aaa;
  color: var(--color-beta);
  height: 1px;
  opacity: 1;
}

img {
  max-width: 100%;
  display: block;
}

nav, footer {
  max-width: 100%;
}

nav {
  margin: 0.8em 0.8em 1.6em 0.8em;
}

footer {
  margin: 1.6em 0.8em 0.8em 0.8em;
}

section {
  max-width: 800px;
  margin: 0.8em;
  overflow: auto;
}

section hr {
  margin: 1.6em 0;
}

ul, ol {
  margin: 0;
  padding: 0;
}

ul li, ol li {
  list-style-position: outside;
  margin: 0 0 .5em 0;
}

ul li {
  list-style-type: disc;
  margin-left: 1.2em;
}

ol li {
  list-style-type: decimal;
  margin-left: 1.9em;
}

ul li ul {
  margin: 0;
  padding-top: .5em;
}

ul li ul li {
  margin-bottom: .5em;
}

table tr td {
  padding-bottom: .8em;
  padding-right: .8em;
  vertical-align: top;
}

::selection {
  background: #fff;
  background: var(--color-alpha);
  color: #222;
  color: var(--color-gamma);
}

/* specialized styles */

.tag {
  background: #fff;
  background: var(--color-alpha);
  color: #222!important;
  color: var(--color-gamma)!important;
  border-color: #fff;
  border-color: var(--color-alpha);
  border-width: 1px;
  border-style: solid;
  border-radius: 4px;
  margin: 0 .4em 1.2em 0;
  padding: .1em;
  text-decoration: none;
}

.tag:hover,
.tag.tag-active {
  background: #222;
  background: var(--color-gamma);
  color: #fff!important;
  color: var(--color-alpha)!important;
  border-color: #fff;
  border-color: var(--color-alpha);
  border-width: 1px;
  border-style: solid;
  cursor: pointer;
}

.show {
  display: block!important;
}

/* hide the checkbox */
#theme {
  display: none;
}

[data-theme="light"] .theme-switch .dark {
  display: none;
}

[data-theme="dark"] .theme-switch .light {
  display: none;
}

.theme-switch {
  float: right;
}

body.explore section {
  max-width: 100%;
}

.projects {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
}

.projects .project {
  display: none;
  margin: 0;
  padding: 0;
  width: 100%;
}

@media (min-width: 576px) {
  .projects .project {
    width: 50%;
  }
}

@media (min-width: 992px) {
  .projects .project {
    width: 25%;
  }
}

@media (min-width: 1400px) {
  .projects .project {
    width: 12.5%;
  }
}

.projects .project a {
  border: 1.6em solid transparent;
  display: block;
  text-decoration: none;
  color: #fff;
  color: var(--color-alpha);
}

.projects .project a:hover {
  border-width: 1.6em;
  border-style: solid;
  border-color: #fff;
  border-color: var(--color-alpha);
  background: #fff;
  background: var(--color-alpha);
  color: #222!important;
  color: var(--color-gamma)!important;
}

.projects .project a h1 {
  color: #fff!important;
  color: var(--color-alpha)!important;
}

.projects .project a:hover h1 {
  color: #222!important;
  color: var(--color-gamma)!important;
}

.projects .project a img {
  width: 100%;
  height: auto;
}

.projects .project a img,
.projects .project a h1,
.projects .project a p {
  margin: 0 0 0.8em 0;
}

#no-results {
  display: none;
}