@font-face {
  font-family: "headerTitle";
  src: url("fonts/Cronicle.ttf");
}
@font-face {
  font-family: "postTitle";
  src: url("fonts/Satanic_Demon.ttf");
}
@font-face {
  font-family: "postMatter";
  src: url("fonts/erika-pl.regular.ttf");
}
@font-face {
  font-family: "postContent";
  src: url("fonts/faustus.regular.ttf");
}
@font-face {
  font-family: "postFirstChar";
  src: url("fonts/goudy-initialen.regular.ttf");
}
@font-face {
  font-family: "catTerm";
  src: url("fonts/CaesarDressing.regular.ttf");
}
@font-face {
  font-family: "navFont";
  src: url("fonts/black-magnet.regular.otf");
}
@font-face {
  font-family: "pageFont";
  src: url("fonts/Almendra.regular.ttf");
}
@font-face {
  font-family: "encryptedFont";
  src: url("fonts/Drachenklaue.ttf");
}
@font-face {
  font-family: "codeFont";
  src: url("fonts/blockblueprint.medium.ttf");
}
pre:has(code) {
  padding: 15px;
  border-radius: 3%;
}

code {
  font-family: codeFont;
  font-size: clamp(10pt, 1.5vw, 14pt);
}

.jtab path {
  stroke: #cccccc;
}
.jtab circle {
  fill: #cccccc;
  stroke: none;
}
.jtab circle + text {
  fill: #121212;
}

::-moz-selection {
  background-color: #e9b074;
  color: #121212;
}

::selection {
  background-color: #e9b074;
  color: #121212;
}

html {
  background-color: #191816;
  background-image: url("images/rocky_wall.png");
}

header {
  border-bottom: 5px solid #e9b074;
  margin-bottom: 1rem;
}
header h1 {
  font-family: headerTitle;
  text-align: center;
  font-size: clamp(16pt, 3vw, 72pt);
}
header nav {
  text-align: center;
  font-family: navFont;
  font-size: clamp(16pt, 1.5vw, 24pt);
  margin: 6%;
}
header nav > a {
  padding: 3%;
  margin: 3%;
}

body {
  color: #cccccc;
  /* line-height: 1.5 */
  /* margin: 1rem */
  margin: 0 auto;
  width: 50vw;
  max-width: 900px;
}
body main {
  background-color: rgba(18, 18, 18, 0.7);
  border-radius: 2%;
}

.directory {
  padding: 3% 5%;
}

@keyframes rise-and-shine {
  0% {
    top: 0vh;
  }
  100% {
    top: -15vh;
  }
}
@keyframes morningside {
  0% {
    background: radial-gradient(circle at 15vw, #121212 60%, #9d1934);
  }
  100% {
    background: radial-gradient(circle at 7.5vw, #121212 66%, #9d1934);
  }
}
.black-hole.wrap {
  z-index: -1;
  position: absolute;
  top: -15vh;
  text-align: center;
  filter: drop-shadow(-5px 4px 20px rgba(157, 25, 52, 0.5));
  animation: rise-and-shine 5s ease-out;
}
.black-hole.wrap #black-hole {
  width: 50vw;
  max-width: 900px;
  height: 50vw;
  max-height: 900px;
  margin: 0 auto;
  shape-outside: circle(50%);
  -webkit-clip-path: circle(45vw);
          clip-path: circle(45vw);
  background-color: #121212;
  border-radius: 50%;
  background: radial-gradient(circle at 7.5vw, #121212 66%, #9d1934);
  animation: morningside 5s ease-in;
  transform: rotate(-90deg);
}

#page #title {
  font-family: postTitle;
  margin-left: 1.5vw;
}

#content.page {
  font-family: pageFont;
  font-size: clamp(10pt, 1.5vw, 18pt);
  margin: 5% 15% 0;
  padding: 5% 0 5%;
}

.expo > #title {
  padding-top: 0px;
}

#posts {
  padding: 3% 10%;
}
#posts > a:has(.post) {
  display: block;
  transform: rotate(0deg);
}
#posts > a:has(.post) > .post {
  box-shadow: none;
  border: 1px solid rgba(255, 176, 116, 0.5);
  transition: box-shadow 3s;
}
#posts > a:has(.post) > .post > p {
  color: #cccccc;
  font-family: postContent;
  font-size: clamp(10pt, 1.4vw, 18pt);
  margin: 2% 0;
}
#posts > a:has(.post) > .post > h2 {
  font-size: clamp(14pt, 2.5vw, 20pt);
  font-weight: 900;
  margin: 0;
}
#posts > a:has(.post) > .post:hover {
  box-shadow: inset 0 2px 16px #ffb074;
}
#posts > a:has(.post):nth-child(even) {
  transform: rotate(3deg);
  transition: transform 2s;
}
#posts > a:has(.post):nth-child(odd) {
  transform: rotate(-3deg);
  transition: transform 2s;
}
#posts > a:has(.post):hover {
  transform: rotate(0deg);
}

.post {
  background-image: linear-gradient(to top right, #121212, rgba(74, 74, 74, 0.1));
  font-family: postTitle;
  padding: 3%;
  margin: 2% 0;
  border-radius: 4%;
}

#post {
  font-family: postTitle;
}
#post #content {
  margin: 0 10%;
  font-family: postContent;
  font-size: clamp(12pt, 1.8vw, 18pt);
}
#post #content img {
  filter: saturate(0) contrast(1.75);
}
#post #content > img, #post #content > p > img {
  margin: 2% auto;
  max-width: 75%;
  height: auto;
  display: block;
  border-top: 12px;
  border-right: 12px;
  border-left: 12px;
  border-bottom: 48px;
  border-color: #fff;
  border-style: solid;
  border-radius: 1%;
}
#post #content > img:nth-child(even), #post #content > p > img:nth-child(even) {
  transform: rotate(2deg);
}
#post #content > img:nth-child(odd), #post #content > p > img:nth-child(odd) {
  transform: rotate(-2deg);
}
#post #content > p:first-child::first-letter {
  font-family: postFirstChar;
  font-size: clamp(64pt, 3vw, 86pt);
  float: left;
  color: #e9b074;
}
#post #content figure {
  display: flex;
  flex-flow: column nowrap;
  margin: 2% auto;
  max-width: 50%;
  height: auto;
  border-top: 12px;
  border-right: 12px;
  border-left: 12px;
  border-bottom: 24px;
  border-color: #fff;
  border-style: solid;
  border-radius: 1%;
  background-color: #fff;
  text-align: center;
}
#post #content figure img {
  width: 100%;
}
#post #content figure figcaption {
  max-height: 10vh;
}
#post #content figure figcaption > p {
  margin-top: 0;
  margin-bottom: 0;
  color: #121212;
  font-family: postMatter;
  font-size: clamp(9pt, 1.5vw, 14pt);
  text-align: justify;
}
#post h1:first-child {
  text-align: center;
  font-size: 24pt;
  color: #9d1934;
  font-weight: bold;
}
#post #frontmatter {
  width: 33%;
  margin: 0 0 0 auto;
  padding: 1%;
  font-family: postMatter;
}
#post .terms {
  max-width: 66%;
  margin: 25px auto 0;
  text-align: center;
}
#post .terms#label {
  text-decoration: underline;
}
#post .terms#directory {
  font-family: postMatter;
  padding: 2% 0 4%;
}
#post .terms li {
  display: inline-block;
  margin: 0.5%;
  font-weight: bold;
}
#post .terms li a {
  display: block;
  padding: 5px;
  background-color: #9d1934;
  color: #121212;
  text-decoration: none;
  border-radius: 5px;
  transition: background-color 3s;
}
#post .terms li a:hover {
  background-color: #e9b074;
}

.page.category > div {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-evenly;
}
.page.category > div > h1 {
  font-family: catTerm;
  flex-basis: 33vw;
  font-size: clamp(16pt, 1.3vw, 24pt);
}
.page.category > div > p {
  font-family: pageFont;
  margin-left: 10%;
  margin-right: 5%;
  max-height: 15vh;
  overflow-y: scroll;
}
.page.category > img {
  max-width: 100%;
  filter: saturate(0) contrast(1.75);
}

#categories.expo > h1 {
  font-family: catTerm;
  font-size: clamp(24pt, 2vw, 32pt);
}

#categories.directory {
  padding-top: 0px;
}
#categories.directory > .category {
  min-height: 66px;
  background-position-y: 34%;
  background-size: cover;
  background-blend-mode: saturation;
  filter: contrast(1.3);
}
#categories.directory > .category > h2 {
  text-shadow: 2px 2px 5px #121212;
  font-family: catTerm;
}
#categories.directory > .category > h2 + p {
  display: none;
}
#categories.directory > .category:hover > h2 + p {
  display: initial;
  text-shadow: 2px 2px 5px #121212;
  font-family: pageFont;
}

.page.tag > h1 {
  font-family: postMatter;
  font-size: clamp(24pt, 2vw, 32pt);
}

#tags.expo > h1 {
  font-family: postMatter;
  font-size: clamp(24pt, 2vw, 32pt);
}

#tags.directory {
  padding-top: 0px;
}
#tags.directory > dl {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  align-content: space-around;
  gap: 3%;
}
#tags.directory .tag.title {
  font-family: postMatter;
  font-weight: bold;
  font-size: clamp(12pt, 1.5vw, 16pt);
  background-color: #9d1934;
  cursor: pointer;
}
#tags.directory .tag.title > a {
  padding: 5px;
  background-color: #9d1934;
  color: #121212;
  text-decoration: none;
  border-radius: 5px;
}
#tags.directory .tag.title:hover + .tag.content::after {
  display: inline-block;
  position: absolute;
  z-index: 1;
  max-width: 10vw;
  max-height: 15vh;
  overflow: scroll;
  background-color: #e9b074;
  color: #121212;
}

footer {
  border-top: 1px solid #e9b074;
  margin-top: 1rem;
  font-family: postMatter;
  font-size: 14pt;
}

a {
  color: #9d1934;
  text-decoration: none;
}/*# sourceMappingURL=main.css.map */