:root{
  --background-color: black;
  --contrast-color: white;
  --font-size: 1rem;
}

@font-face {
  font-family: "Fluxisch";
  src: url("../fonts/fluxisch/fluxisch-light.woff") format("woff");
}

*{
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  scrollbar-width: none;
  overflow:
    -moz-scrollbars-none;
  -ms-overflow-style: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* font-family: "Fluxisch", sans-serif; */
  /* font-family: Georgia; */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  padding: 0px;
  margin: 0px;
  overflow-x: hidden;
}

/* main layout ----------- */

header {
  /* background-color: fuchsia; */
  width: 100%;
  position: fixed;
  display: flex;
  justify-content: space-between;
  color: var(--background-color);
  bottom: 0px;
  padding: .5rem;
}

main{
  /* background-color: orange; */
  height: auto;
  overflow: auto;
  overflow-x: hidden;
}

#output {
  /* background-color: green; */
}


#footer{
  /* background-color: black; */
  margin: 0px;
  padding: .5rem;
  padding-bottom: 4rem;
	bottom: 0px;
}

#footer a{
  /* color: var(--background-color); */
}

table{
  /* display: block; */
  background-color: white;
  /* width: 100%; */
  vertical-align: top;
  /* mix-blend-mode: difference; */
  color: var(--background-color);
  z-index: 10000;
  padding: 0px;
  margin: 0px;
  border-collapse: collapse;
  border-spacing: 1px;

}

.index-title{
  max-width: 900px;
}

table a{
  mix-blend-mode: difference;
  text-decoration: none;
}

table {
  /* display: inline-table; */
  padding: 0px;
  /* border: 10px solid white; */
}

table th,
table td {
  /* border: solid 1px; */
  box-shadow: 2px 2px 2px grey;
}

td {
  vertical-align: top;
}


td{
  vertical-align: top;
  /* border: 1px solid black; */
  text-align: left;
  width: auto;
  padding: .4rem;
}



/* global elements ----------- */

figure, ul, li {
  margin: 0;
  padding: 0;
}

img {
  max-height: 400px;
  filter:
  /* invert(1)  */
  grayscale(1)
  ;
  mix-blend-mode: color-burn;
  background-color: var(--background-color);
}


header{
  display: none;
}

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

mark {
  color: var(--contrast-color);
  background-color: var(--background-color);
  /* font-family: "fluxisch"; */
  /* font-family: Georgia, 'Times New Roman', Times, serif; */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

}

svg {
  position: absolute;
  mix-blend-mode: exclusion;
  pointer-events:none;
}

/* blocks ----------- */

.block-post {
  list-style: none;
  float: left;
  color: var(--contrast-color);
  background-color: var(--contrast-color);
  padding: .5rem;
  transition: background-color .3s;
  z-index: 10000;
}

.block-post:hover {
  cursor: crosshair;
  background-color: var(--contrast-color);
  color: var(--background-color);
  box-shadow: 2px 2px 1000px rgba(101, 101, 101, 0.4);
}

.block-post:hover img{
  mix-blend-mode: difference;
  filter: invert(1)
  grayscale(1)
  ;
}




.block-post:hover a{
  color: var(--background-color);
}

.meta{
  padding-right: 1rem;
  list-style: none;
}

.meta *{
  display: inline;

}


.block-anchor{
  cursor: help;
}



.block-source{
  padding-left: 1rem;
  /* margin-left: 0px; */
  /* text-decoration: none; */
}

.block-source::before{
  /* content: " "; */
}

.block-description {
  visibility: hidden;
  position: absolute;
}

.block-content {
  font-family: georgia;
  max-width: 800px;
  background-color: white;
  font-size: calc(var(--font-size) * 1.6);
  padding-left: calc(var(--font-size) * 1.6);
}


.block-content p{
  margin-top: 0px;
}

.print {
  background-color: var(--contrast-color);
  color: var(--background-color);
  box-shadow: 2px 2px 2px grey;
}

.print img{
  mix-blend-mode: multiply;
}

.print a{
  color: var(--background-color);
}

::selection {
  color: white;
  background: white;
  mix-blend-mode: difference;
}
.block-prompt {
  display: none;
  font-weight: bold;
  visibility: collapse;
}




#content-select{
  display: flex;
  color: black;
  justify-content: space-between;
  background-color: white;
  width: 100%;
  position: -webkit-sticky;
  position: sticky;
  bottom: 0;
  padding: 1rem;
  mix-blend-mode: difference;
}

#content-select span{
  /* min-width: 20vw; */
  /* background-color: red; */
  /* text-align: center; */
  flex-basis: 20%;
}

#metaSelect{
  text-align: center;
}

#aboutLink{
  text-align: right;
  color: var(--contrast-color);
  mix-blend-mode: difference;
}