:root {
  --text-primary: #C825B6;
  --text-secondary: #E5D5D7;
  --bg-primary: #000000;
  --bg-secondary: #301028;
  --bg-btn-post: #000000;
  --bg-btn-post-hover: #10030B;
  --link: #44FF00;
  --link-visited: #44E000;
  --link-hover: #44FF80;
  --bg-btn-nav: var(--bg-primary);
  --bg-btn-nav-hover: #003000;
  --btn-nav-border: var(--bg-secondary);
  --btn-nav-active: #008000;
  
  --content-width: 680px;
}

body {
  color: var(--text-primary);
  background-color: var(--bg-primary);
  min-width: 680px;
  margin-left: auto; 
  margin-right: auto;
  margin-top: 0px;
  margin-bottom: 0px;
  min-height: 100%;
}

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

a:visited {
  /* Sadly most browsers block anything other than colour changes. Annoying especially given I don't use JS. Bah. */
  color: var(--link-visited);
}

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

.content {
  padding: 0em 0.5em;
  width: var(--content-width);
  margin-left: auto;
  margin-right: auto;
}

.posts {
  margin-bottom: auto;
  display: flex;
  min-height: 75dvh;
  flex-direction: column;
  justify-content: flex-end;
}

.preview {
  margin-bottom: 1em;
  padding: 0.01em 1em 1em 1em;
  border-radius: 1em;
  border-width: 2px;
  border-style: dotted;
  background-color: var(--bg-btn-post);
}

.preview a {
  font-size: 14pt;
}

.preview:hover {
  background-color: var(--bg-btn-post-hover);
}

h5 {
  line-height: 0.1em;
}

.directory {
  margin-top: auto;
  width: var(--content-width);
  max-width: var(--content-width);
  min-width: var(--content-width);
  font-family: monospace;
  font-size: 12pt;
  justify-content: right;
  text-align: right;
  text-align-last: right;
}

.directory pre {
  white-space: pre-line;
  width: 100%;
}

.directory pre a {
  float: left;
}

.directory h1 {
  visibility: hidden;
  position: relative;
  padding: 0px;
  margin: 0px;
}

.directory h1:after {
  visibility: visible;
  position: absolute;
  top: 0;
  left: 0;
  content: "All Blog Posts";
  font-size: 18pt;
  padding: 0px;
  margin: 0px;
}

p, li {
  color: var(--text-secondary);
}

li {
  padding-bottom: 0.75em;
}

img {
  max-width: 100%;
}

.navigation {
  font-size: large;
  display: flex;
  margin-left: auto;
  margin-right: auto;
  justify-content: center;
  background-color: var(--bg-secondary);
  padding: 0.8em;
}

.navigation a {
  background-color: var(--bg-btn-nav);
  padding: 0.5em;
  justify-content: center;
  display: flex;
  border-style: outset;
  border-color: var(--btn-nav-border);
  border-radius: 64px;
  min-width: 64px;
  margin: 0.1em 1.2em;
  font-size: 16pt;
}

.navigation a:hover {
  background-color: var(--bg-btn-nav-hover);
}

.navigation a:active {
  background-color: var(--btn-nav-active);
  border-style: inset;
}