@charset "UTF-8";
@font-face {
  font-family: "Josefin";
  src: url("/fonts/josefin.ttf");
  font-weight: 125 1250;
  font-stretch: 75% 125%;
  font-style: normal;
}
@font-face {
  font-family: "Josefin Italics";
  src: url("/fonts/josefinitalic.ttf");
  font-weight: 125 1250;
  font-stretch: 75% 125%;
  font-style: normal;
}
html, body {
  min-height: 100vh;
  transition: 0.15s ease-in-out;
  /*font-feature-settings: 'salt';*/
}

:root {
  scrollbar-face-color: var(--scrollbar-face-color); /* Firefox 63 compatibility */
  scrollbar-track-color: var(--scrollbar-track-color); /* Firefox 63 compatibility */
  scrollbar-color: var(--scrollbar-color-1) var(--scrollbar-color-2);
  scrollbar-width: thin;
}

body {
  background-image: url("../img/bg.png");
  -webkit-backdrop-filter: var(--backdrop-filter-1) var(--backdrop-filter-2) var(--backdrop-filter-3) var(--backdrop-filter-4);
          backdrop-filter: var(--backdrop-filter-1) var(--backdrop-filter-2) var(--backdrop-filter-3) var(--backdrop-filter-4);
  /* für lightmode später: backdrop-filter: brightness(90%) blur(15px) invert(100%) hue-rotate(120deg); */
  background-size: cover;
  background-attachment: fixed;
  padding: 0;
  margin: 0;
  color: var(--text-color);
}

ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

a {
  text-decoration: none;
  color: var(--link-color);
  transition: 0.15s ease-in-out;
}

a:hover {
  color: var(--link-hover-color-opt);
  transition: 0.15s ease-in-out;
}

.pagecontainer a {
  border-bottom: var(--link-color) 1px dotted;
}

.pagecontainer a:hover {
  border-bottom: var(--link-hover-color-opt) 1px dotted;
}

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

body > div > button {
  border: none;
  background: none;
}

button:hover {
  cursor: pointer;
}

blockquote {
  color: var(--text-color-less);
  font-size: 8pt;
  text-align: justify;
}

.masterwrapper {
  position: relative;
  height: auto;
  width: 65rem;
  margin: auto;
}

/* Navbar und Logo */
.logo {
  display: flex;
  justify-content: center;
  height: 120px;
  padding: 20px;
}

.topnav {
  position: relative;
  display: block;
  height: 10px;
  padding-left: 40px;
  padding-right: 40px;
  height: 20px;
}

.topnav li {
  display: inline;
}

.topnav li a {
  display: inline-block;
  text-align: center;
}

.subnavtext {
  text-align: center;
  font-size: 10pt;
  position: relative;
}

.subnavtext li {
  display: inline-block;
  list-style: none;
  position: relative;
  white-space: nowrap;
}

.subnavtext ul {
  border-bottom: 1px var(--border-color) solid;
}

.subnavtext .borderanim {
  display: block;
  padding: 4px;
  white-space: nowrap;
  text-decoration: none;
  color: var(--navtext-color);
  font-family: "Josefin", sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  border-top: 1px rgba(0, 0, 0, 0) solid;
  transition: 0.15s ease-in-out;
}

.startnavbullet {
  margin-right: 20px;
}

.endnavbullet {
  margin-left: 20px;
}

.subnavtext .borderanim:hover {
  color: var(--link-color);
  border-top: 1px var(--link-color) solid;
  transition: 0.15s ease-in-out;
}

/* ENDE: Navbar und Logo */
/* Contentwrapper */
.contentwrapper {
  position: relative;
  height: auto;
  margin-top: 40px;
  margin-left: 40px;
  margin-right: 40px;
  padding-bottom: 5px;
}

.contentwrapper a {
  color: var(--linktext-color);
}

.content-post {
  height: auto;
  background-color: rgba(0, 0, 0, 0);
  border-radius: 4px;
  border: 1px var(--border-color) solid;
  margin-top: 20px;
  color: var(--text-color);
  transition: 0.15s ease-in-out;
}

.content-post:hover {
  background-color: var(--post-hover);
  border: 1px var(--border-color-hover) solid;
  transition: 0.15s ease-in-out;
}

.content-post:hover .categorytitle {
  color: var(--category-color);
  transition: 0.15s ease-in-out;
}

.content-post:hover > .content-postimage > img {
  -o-object-position: 50% 20%;
     object-position: 50% 20%;
  transition: 0.15s ease-in-out;
}

.content-postimage {
  height: 300px;
  border-radius: 4px;
  overflow: hidden;
}

.content-postimage > img {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: 50% 10%;
     object-position: 50% 10%; /* später customizable machen */
  transition: 0.15s ease-in-out;
}

.content-posttext {
  font-family: "Verdana", sans-serif;
  padding: 20px;
}

.metainfo {
  display: inline;
  font-size: 9pt;
  font-weight: 500;
  margin: 10px;
  opacity: 0.75;
}

.floatright {
  float: right;
}

.titling {
  font-size: 22pt;
  font-weight: 1000;
  margin: 10px;
  font-family: "Josefin", sans-serif;
}

.textcontent {
  font-size: 11pt;
  font-weight: 300;
  margin: 10px;
  line-height: 1.5;
}

.autortitling {
  font-size: 13pt;
  margin: 10px;
  font-family: "verdana", sans-serif;
}

.autortextcontent {
  font-size: 10pt;
  font-weight: 300;
  margin: 10px;
  line-height: 1.5;
}

.categorytitle {
  display: inline;
  font-weight: 800;
  font-size: 11pt;
  text-transform: uppercase;
  font-family: "Josefin", sans-serif;
  transition: 0.15s ease-in-out;
}

.author {
  font-weight: 800;
  color: var(--linktext-color-2);
}

.author:hover {
  cursor: pointer;
}

.postlink {
  font-size: 11pt;
  font-weight: 800;
  margin-right: 30px;
  margin-bottom: 10px;
  color: var(--linktext-color-2);
  text-align: right;
  transition: 0.15s ease-in-out;
  font-family: "Josefin", sans-serif;
}

.postlink:hover {
  color: var(--link-color);
  transition: 0.15s ease-in-out;
  cursor: pointer;
}

.footer {
  display: grid;
  justify-content: center;
  height: 50px;
  width: auto;
  background-color: rgba(0, 0, 0, 0);
  margin-top: 20px;
  border-top: 1px var(--border-color) solid;
  color: var(--navtext-color);
  padding-top: 10px;
  text-transform: uppercase;
}

.ralewaytext {
  font-family: "Josefin", sans-serif;
  font-size: 8pt;
  font-weight: 500;
  line-height: 1.5;
  text-align: center;
}

.lightingmode {
  position: relative;
  float: right;
  overflow: visible;
}

.lightingsym {
  position: relative;
  color: var(--text-color);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  font-size: 16pt;
  width: 23px;
  height: 20px;
  top: 15px;
  right: 25px;
}

.downloadarrow {
  font-size: 13pt;
  position: relative;
  top: 2px;
  margin: 2px;
}

.category {
  position: relative;
  top: -35px;
  right: -25px;
  font-size: 9pt;
  padding: 5px;
  text-align: right;
  display: block;
}

.category::before {
  position: relative;
  content: "|";
  top: -1px;
  left: -4px;
  color: var(--category-color);
}

.pagination {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: right;
  height: 20px;
  margin: 20px;
  width: 100%;
}

.paginationbutton {
  margin: 10px;
  background: none;
  color: var(--link-color);
  border: none;
  font-size: 10pt;
}

.paginationbutton:hover {
  color: var(--link-hover-color-opt);
}

.page {
  font-size: 14pt;
}

[data-stylemode=dark] .logo > img {
  content: url("../img/logo.png");
}

[data-stylemode=light] .logo > img {
  content: url("../img/logo dark.png");
}

::-moz-selection {
  background: var(--selection-color);
}

::selection {
  background: var(--selection-color);
}

/* COLORING */
html[data-stylemode=dark] {
  --text-color: rgb(248, 237, 235);
  --text-color-less: rgb(177, 168, 168);
  --link-color: rgb(249, 233, 255);
  --link-hover-color-opt: rgb(196, 74, 94);
  --border-color: rgba(255, 255, 255, 0.1);
  --navtext-color: rgba(255, 244, 243, 0.4);
  --linktext-color-2: rgb(185, 67, 87);
  --category-color: rgb(233, 41, 73);
  --border-color-hover: rgba(255, 255, 255, 0.4);
  --post-hover: rgba(255, 255, 255, 0.05);
  --scrollbar-face-color:#B4649E;
  --scrollbar-track-color: #B4649E;
  --scrollbar-color-1: #38457C;
  --scrollbar-color-2: #080C17;
  --guillemets-color: rgba(200, 132, 214, 0.377);
  --textbox-color: rgba(200, 132, 214, 0.034);
  --hr-1:rgba(0, 0, 0, 0.1);
  --hr-2:rgba(255, 255, 255, 0.3);
  --selection-color: #992181;
  --backdrop-filter-1: brightness(90%);
  --backdrop-filter-2: blur(2px);
  --backdrop-filter-3: 0;
  --backdrop-filter-4: 0;
}

html[data-stylemode=light] {
  --text-color: rgb(44, 42, 42);
  --text-color-less: rgb(87, 80, 80);
  --link-color: rgb(48, 43, 49);
  --link-hover-color-opt: rgb(206, 70, 100);
  --border-color: rgba(56, 68, 124, 0.7);
  --navtext-color: #080c1775;
  --linktext-color-2: rgb(185, 67, 87);
  --category-color: rgb(233, 41, 73);
  --border-color-hover: rgba(255, 255, 255, 0.4);
  --post-hover: rgba(255, 255, 255, 0.05);
  --scrollbar-face-color:#B4649E;
  --scrollbar-track-color: #B4649E;
  --scrollbar-color-1: #38457C;
  --scrollbar-color-2: #080C17;
  --guillemets-color: rgba(84, 54, 90, 0.568);
  --textbox-color: rgba(215, 209, 216, 0.637);
  --hr-1:rgba(255, 255, 255, 0.144);
  --hr-2:rgba(107, 107, 107, 0.3);
  --selection-color: #ec75d5;
  --backdrop-filter-1: brightness(450%);
  --backdrop-filter-2: blur(2px);
  --backdrop-filter-3: sepia(30%);
  --backdrop-filter-4: contrast(80%);
}/*# sourceMappingURL=style.css.map */